I have a page with a collection of cards of client data.  I want to invoke a TelerikPopover when a particular status field is clicked in a given card, but the popover would be populated with the unique status string for that client card.  This almost works.  However, even though I populate the string with the unique status for the current card, I get multiple popovers, on top of one another, containing values from other cards that I've clicked on previously.  The Popover is defined like this :

    <TelerikPopover @ref="@PopoverRef"
                    AnimationType="@AnimationType.Fade"
                    AnchorSelector=".client-card-abar"
                    ShowOn="PopoverShowOn.Click"
                    Collision="@PopoverCollision.Flip"
                    Position="@PopoverPosition.Bottom">
        <PopoverHeader>
            Alerts
        </PopoverHeader>
        <PopoverContent>
                <div>
                    @((MarkupString)statusText)
                </div>
        </PopoverContent>
    </TelerikPopover>

And the value of statusText is being correctly set prior to displaying the popup, thusly:

    private void BeforeOpenPopover(int pid)
    {
        var txt = AlertText[pid];

        statusText = txt + "<br />";
        PopoverRef.Refresh();
    }

Is there a fundamental reason that using one TelerikPopover for the page will not work?  I don't really want the "weight" of a seperate Popover control for every card if possible.

Thanks.

Hi,

I was looking the the code at the following URL to set the value of the editor.

https://docs.telerik.com/blazor-ui/components/editor/overview

If I set the value to be ;

<h1>Report</h1>
<h2>Summary Results</h2>
<h2>Results Table</h2>
<table>
<tbody>
    <tr>
        <th>Date Completed</th>
        <th>Score</th>
    </tr>
    <tr>
        <td>26/03/2024 1:53:00 am</td>
        <td>28.0000</td>
    </tr>
    <tr>
        <td>26/01/2024 1:46:44 am</td>
        <td>48.0000</td>
    </tr>
    <tr>
        <td>26/02/2024 1:53:00 am</td>
        <td>44.0000</td>
    </tr>
</tbody>
</table>

Then the results look correct as seen below;

However if I set the same value via a button after OnInitializedAsync then it adds a bunch of elements and changes the report to the below

Any ideas?

Thanks

Hi, due to SyncFusion changing their licensing for small organizations, I'm converting our app from SyncFusion to Telerik.

In most cases, Telerik controls are equivalent or superior.

Not so with the Editor control. :( 

Users expect editors to be Microsoft Word like, within reason, and the Editor control is seriously lacking.

1 - Users have to be able to indent with the Tab key.  Please provide an option for Tab to indent and not jump out of the control.

2 - Can't resize the control, like we can here in this forum field?  It's basic functionality.  Auto sizing up to a max would be helpful.  I found the feature request showing how to set a min-height and max-height.  What it doesn't say is the Div mode has a height somewhere in the framework of 250 (and an incomplete width?), so you have set the height in the control, even if it's blank.

3 - Viewing html source of the editor pops up a small window that you can only resize vertically, but not horizontally?!?  It's basically unusable, unless you want to copy the content out and edit it somewhere else.

4 - The color picker is basically unusable.  It should be two controls, like any other respectable editor: the first applies the currently selected color (which the control remembers and visually shows), and the second is a drop down that allows you to select the color (which it remembers), it applies that color, and then the palette closes.  The existing picker does none of this. :(   And Red is missing from the palette??

5 - The documentation for most controls has a section "appearance".  This one doesn't?  The info on controlling the height and width should be in this missing section, including how-to for Div vs iFrame.

6 - More documentation on the existing toolbars would be helpful for customization.  I shouldn't have to step through the code and analyze what's in "new List<IEditorTool>(Telerik.Blazor.Components.Editor.EditorToolSets.All)" to figure out how to remove unwanted tools?

7 - EditorPasteSettings seems to be broken.  I can copy from Word, paste into the control, look at the source in the tiny window, and right at the top is a class="MsoNormal".  The documentation indicates this is on by default, but it doesn't matter whether I omit that parameter, or explicitly set it to true, Mso classes still come in.  I didn't test if the other default paste cleanup functionality is working or not. 

8 - My users require the "Insert Symbol" tool on the toolbar.  SyncFusion provided me custom code to add this to their control with a dialog.  Can Telerik do the same?

All of this functionality exists in the state of the art SyncFusion editor.  Sadly I'm going to have to continue to use the SfRichTextEditor control and minimal SyncFusion content until the TelerikEditor control is updated.

If I were Telerik, I would be embarrassed by this control. :(

I'm using .NET 8 with the current Telerik UI, which is 6.2.0.

Thanks for your time.

Regards,

Charles

P.S.  On a side note, your document conversion code is fantastic.  I can import a Word doc with your DocxFormatProvider and convert it to html with your HtmlFormatProvider and the content is almost perfect, if not perfect. 

Thx

Let's say we have a DateTimePicker two-way bound to a DateTime? value:

<TelerikDatePicker @bind-Value="searchCriteria.specificDate" ShowClearButton="true"></TelerikDatePicker>

public DateTime? specificDate {get; set; }           

The user enters an invalid value, such as 1/d/yyyy.

How do you reset it programmatically?

Assigning the bound value to null doesn't do anything, as it's already null.

I don't see a reset method anywhere?

It'd be nice if there was a way to programmatically call whatever is called when the user clicks on the ClearButton.

Thanks.

p.s.  This probably applies to all the date/time picker variations.

I have a hierarchal grid of two entities, one the parent and one the child through a detail template.

I would like to know how I can gather selected checkbox column items from a child grid of one parent and the selected checkbox column items from a child grid of a second parent in a "merged" collection.

Currently the @bind-selected property of a detail template child grid definition only applies to one child grid of a parent row.

How can I manage adding to the same collection, values of a child grid of the same type below a second parent row?

Do you/anyone have any examples on how to develop this solution?

Thanks, for any help!

hi
I want to create a session after the user clicks on the button and display this user's information such as UserName or UserID in a section of the MainLayout

 In the MainLayout page, the currentUser_Id parameter value received from the session is displayed correctly in the paragraph, but this value is not passed to the paragraph inside the section.

In fact, I want to show the value of User _id which is created in the login page and in the session in a part of the page app .razor or mainLayout .razor as user information.

please help me

LoginPage.razor:

@page "/"
@using BlazorSessionApp.Layout
@layout LoginLayout
@inject NavigationManager NavigationManager
@inject ProtectedSessionStorage ProtectedSessionStore

<button class="btn btn-primary" @onclick="Submit">Enter</button>

@code
{
	private async Task Submit()
	{
		await ProtectedSessionStore.SetAsync("User_Id", 500);

		NavigationManager.NavigateTo("/Home", true);
	}
}

App.razor :

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<base href="/" />
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
	<link rel="stylesheet" href="app.css" />
	<link rel="stylesheet" href="BlazorSessionApp.styles.css" />
	<link rel="icon" type="image/png" href="favicon.png" />
	<HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
	<SectionOutlet SectionName="mysection" /> 

	<Routes @rendermode="InteractiveServer" />
	<script src="_framework/blazor.web.js"></script>

</body>
</html>

MainLayou.razor :

@inherits LayoutComponentBase
@inject ProtectedSessionStorage ProtectedSessionStore



<p>OutOf Section:@currentUser_Id</p>

<SectionContent SectionName="mysection">
	<p>into My Section:@currentUser_Id</p>
</SectionContent>




<div class="page">

	<div class="sidebar">
		<NavMenu />
	</div>

	<main>
		<div class="top-row px-4">
			<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
		</div>

		<article class="content px-4">
			@Body
		</article>
	</main>
</div>

@code {
	public int currentUser_Id;
	public bool isConnected;

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			isConnected = true;
			await LoadStateAsync();
			StateHasChanged();
		}
	}
	private async Task LoadStateAsync()
	{
		var result = await ProtectedSessionStore.GetAsync<int>("User_Id");
		currentUser_Id = result.Success ? result.Value : 0;
	}
	private async Task IncrementUser_Id()
	{
		currentUser_Id++;
		await ProtectedSessionStore.SetAsync("User_Id", currentUser_Id);
	}
}

Dear Community!

I have the requirement to show a ConfirmDialog before actually saving objects to the database, because of some conditions that need to meet. Nevertheless my TreeList looks like follows and has the later OnCreate event defined:

 <TelerikTreeList Data="@Data"
                  IdField="Server"
                  ParentIdField="PreServer"
                  Pageable="true"
 Height="100%"
 EditMode="@TreeListEditMode.Inline"
                  OnCreate="@CreateServer"
                  OnUpdate="@UpdateServer"
                  OnDelete="@DeleteServer"
                  OnEdit="@(() => EditAction = !EditAction)"
                  OnAdd="@(() => AddAction = !AddAction)"
                  ConfirmDelete="true">
</TelerikTreeList>

My approach was simply to hook into the OnCreate event, place a Dialogs.ConfirmAsync and await the result before continuing. In fact, the confirm dialog shows up, but gets overlayed by a transparent container that has a higher z-index and prevents the confirm dialog to be clicked. Furthermore a loading spinner appears and the app gets stuck. I also tried to add a Task.Delay(1) but it didn't work out.

    async Task CreateServer(TreeListCommandEventArgs args)
    {
        await Task.Delay(1);

        CancelCreate = await Dialogs.ConfirmAsync("Please confirm.", "Confirmation");

        if(CancelCreate){
        ServerViewModel server = (ServerViewModel)args.Item;

        if (server != null)
        {
            server.PreServer = ((ServerViewModel)args.ParentItem)?.Server;
            var result = await _sdService.CreateServer(server);

            if (result)
            {
                NotificationComponent?.Show("Server created!", NotificationTheme.Success);

                await FetchData();
            }
            else
            {
                NotificationComponent?.Show("An error occurred!", NotificationTheme.Error);
            }
        }
        }
    }

Any help would be much appreciated.
Many thanks!

I want to toggle grouping for a given scheduler resource and took the following approach in the SelectedChanged hander for a ToggleButton.

Are there pitfalls to this approach? Are built-in group toggles on the roadmap?

    <ToolBarToggleButton Title="@(Grouped ? "Ungroup" : "Group")"
                         Icon="@(Grouped ? SvgIcon.Ungroup : SvgIcon.Group)"
                         SelectedChanged="@GroupedSelectedChanged">@Grouped
    </ToolBarToggleButton>

    public bool Grouped { get; set; } = false;
...

    List<string> GroupingResources = ["Rooms"];

...

    void GroupedSelectedChanged(bool newGrouped)
    {
        if (newGrouped)
        {
            SchedulerRef.GroupSettings = new SchedulerGroupSettings
            {
                Resources = GroupingResources,
                Orientation = SchedulerGroupOrientation.Vertical
            };
        }
        else
        {
            SchedulerRef.GroupSettings = null;
        }
        
        SchedulerRef.Rebind();

        Grouped = newGrouped;
    }

Hello,
I am using the Scheduler, and I need to go quite far in its usage.

The events I need to display in the Scheduler follow creation constraints that require me to have control over the creation form.

So, I naturally followed the guide to create a 'custom edit form' found here: https://github.com/telerik/blazor-ui/tree/master/scheduler/custom-edit-form. However, I am facing an issue where I am unable to retrieve the user's choice from the popup. (cf 2024-10-21-11h47_41.png)"

I implemented the JS hack on the double-click:

function clickSchedulerPromptButton(btnIndex) {
    setTimeout(function () {
        var buttons = document.querySelectorAll(".k-window-content .text-right button");
        if (buttons && buttons.length >= btnIndex) {
            var chosenButton = buttons[btnIndex];
            chosenButton.click();
        }
    }, 50);
}

This allows me to handle the choice in my own edit popup (which, by the way, reduces the number of windows opened, improving the user experience), and it works.

However, if the Scheduler is configured with AllowUpdate = true, another way to modify a series becomes available: resizing appointments with the mouse. In this specific case, the EditItem event is not triggered; instead, the OnUpdate event is triggered, but only after the choice popup has been displayed. Since it's not possible to retrieve the user's choice, the entire series is always modified (and the event arguments do not carry the targeted occurrence date anyway).

I believe this is a BUG, as it makes the Scheduler difficult to use in its current state.

Can you help me to solve this bug :

• Trigger the EditItem event, even during a drag-and-drop of an appointment.
• Add the user's choice information in the arguments of SchedulerUpdateEventArgs and SchedulerEditEventArgs.
• Avoid displaying this choice popup (which is unnecessary); it should be integrated into the appointment form.
• Include information related to the targeted occurrence in the event arguments (currently, only SchedulerEditEventArgs provides this detail)."

Thank you in advance for your response, which I hope will be constructive.