Hi, I have a Blazor WASM project that uses TelerikTextArea components in its pages, and I noticed it took a massive performance hit when we added a <DataAnnotationsValidator /> to the EditForms on these pages. To verify if this was just our project or not, I created a new Wasm Blazor app and added:

• A new Razor Component with an EditForm
• a class with 4 strings, 2 with [Required} annotations, set to be the model of the editform
• 4 TelerikTextAreas in the form for each of the strings in the model
• a <DataAnnotationsValidator />

Without the <DataAnnotationsValidator /> I did not see any performance issues filling out these textboxes, but with it added to the form there is an obvious stutter when typing in these textareas. If I increase the number of text areas the stutter gets worse, freezing up the page for 10-15 seconds at the worst. I cloned this Component and changed all of the TelerikTextAreas to InputTextAreas and the performance issues are gone.

I recorded the performance of the page with the Chrome dev tools and noticed that Event: keypress Handler takes far longer to resolve than if the <DataAnnotationsValidator /> is removed or InputTextAreas are used. 

The stutter is mildly inconvenient on this test page I created, but in a larger existing component adding validation to the forms has rendered these Telerik components just about useless. Has anyone else encountered these serious performance issues?

Hello Team
In Treelist the popup does not close after the update

is something wrong with this code ?

<TelerikTreeList Data=@vm.Model
                     IdField="Id"
                     ParentIdField="ParentId"
                     Sortable=true Pageable=true
                     EditMode="@TreeListEditMode.Popup"
                     SelectionMode="@TreeListSelectionMode.Single"
                     OnCreate="@CreateItem"
                     OnUpdate="@UpdateItem"
                     OnDelete="@DeleteItem">
        <TreeListToolBar>
            <TreeListCommandButton Command="Add" Icon="add">Add</TreeListCommandButton>
        </TreeListToolBar>
        <TreeListColumns>
            <TreeListColumn Field=@nameof(ModelHierarchyInfo.Name) Expandable="true" Width="250px"></TreeListColumn>
            <TreeListColumn Field=@nameof(ModelHierarchyInfo.Designation)></TreeListColumn>
            <TreeListCommandColumn Width="220px">             
                <TreeListCommandButton Command="Add" Icon="add"></TreeListCommandButton>
                <TreeListCommandButton Command="Edit" Icon="edit"></TreeListCommandButton>
                <TreeListCommandButton Command="Delete" Icon="delete"></TreeListCommandButton>
                <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true"></TreeListCommandButton>
                <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></TreeListCommandButton>
            </TreeListCommandColumn>
        </TreeListColumns>
    </TelerikTreeList>

Hi, I am using the telerik blazor component for the first time as a Korean developer.

When entering the first consonant in Korean, two consonants are created at the same time.

Two identical consonants are also entered when typing the enter key and typing letters on a new line.

There is no problem when typing English.

If you refer to the attached picture, you will understand quickly.

Is there a way for the editor to support Korean input?

Hi, I have some questions related to the new filter type in Grid - checkboxes

1. Is it possible to format decimal values in filter window? Attributes related to currency format like Display... do not work here. I have still values like 123.0000000000 in checkboxes filter window

2. Is it possible to format date values in filter window? I have dates in filter window with different format than in Grid.

3. Is it possible to sort values in filter window? I mean default behaviour/sorting (without writing templates for every column).

Thanks!

I have a TelerikGrid inside of a Blazor component (this blazor component sits within a Telerik tab control which in turn sits on a Blazor page).  The last column in the grid is a button that pops up a context menu for that selected row.

The context menu code in the component looks like this:

<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" OnClick="@((TelerikGridContextMenuItem item) => OnContextMenuItemClick(item))"></TelerikContextMenu>

The code for the last grid column looks like this:

<GridColumn Width="60px" Filterable="false" Groupable="false" Reorderable="false" Locked="true">
    <Template>
        <span @onclick:stopPropagation="true">
            <TelerikButton Primary="true" OnClick="@((MouseEventArgs e) => ShowContextMenuOptionsForRow(e, context as TyreCatalogueInfo))" Icon="more-vertical"></TelerikButton>
        </span>
    </Template>
</GridColumn>

The MenuItems for the context menu are set in the OnInitializedAsync method for the component like this:

protected override async Task OnInitializedAsync()
{
    if (IsEnvironmentSet())
    {
        MenuItems = new List<TelerikGridContextMenuItem>
        {
            new() {Text = "Edit Tyre", Icon = "edit", Action = EditSelectedTyre}
        };

        await base.OnInitializedAsync();
    }
}

When any of the buttons in the last grid column are clicked this invokes the ShowContextMenuOptionsForRow which is on a base class which the Blazor component inherits from.

The code for that looks like this:

protected async Task ShowContextMenuOptionsForRow(MouseEventArgs e, TRowInfoType row)
{
    SelectedRowInfo = row;

    await ContextMenuRef.ShowAsync(e.ClientX, e.ClientY);
}

If I stick a breakpoint on the first line SelectedRowInfo = row; within the ShowContextMenuOptionsForRow method it pretty much immediately hits.  If I then hit F5 to continue it takes a further x seconds for the popup menu to appear.  I'm not sure where the time is being spent/lost.

See supporting video which demonstrates the slowness.

https://drive.google.com/file/d/1My5gpDx9qPRi2Fz4tpab7LEWGQZDG3eY/view

I have used this same pattern for other pages (pages that have the grid directly on it, with no other child Blazor components involved) and the speed of the popup is instantaneous.

UPDATE

The slow performance seems to be linked to the Blazor ShouldRender property which is defaulted to true in the Blazor framework.  If I override the ShouldRender property by setting private member field _shouldRender to false when the context menu is invoked by the user, then it appears on screen instantly.  I can reset the private member field _shouldRender back to true when the user click on one of the context menu items.  The issue I have is that once the context menu is invoked by the user they could click anywhere else on the page to dismiss the context menu and that would leave the private member field _shouldRender  as false and have a negative effect on other interactions that need the ShouldRender property to return true.

The code I originally posted I have updated as follows:

private bool _shouldRender = true;
protected override bool ShouldRender()
{
    return _shouldRender;
}

protected async Task ShowContextMenuOptionsForRow(MouseEventArgs e, TRowInfoType row)
{
    _shouldRender = false;

    SelectedRowInfo = row;

    await ContextMenuRef.ShowAsync(e.ClientX, e.ClientY);
}

protected async Task OnContextMenuItemClick(TelerikGridContextMenuItem item)
{
    _shouldRender = true;

    if (item.Action != null)
    {
        await InvokeAsync(item.Action);
    }
}

I have a div which has a couple of buttons contained within it on the lower left corner. I have a TelerikTooltip with the target selector pointed to my div. Most of the time the tooltip works fine but I have found that if I move the mouse onto the div from the lower left corner where the buttons are, the TelerikTooltip shows up correctly while the mouse is over the buttons but when I move the mouse farther into the div and away from the buttons the TelerikTooltip gets hidden and a default tooltip is displayed. It behaves this way whether I use a title on the div or a template on the TelerikTooltip. Any way to keep the TelerikTooltip visible and avoid the default tooltip from being displayed?

I have multiple grids in one view and would like to sync the columns widths. That is, if a user resizes a column, I want that column to be resized in all the grids in the view.

I bound the Width property to a field and while it sets the initial width, however, resizing the column does not change the bound value. Is this not supported? There also doesn't seem to be a Resize event either, so no way to workaround the problem.

Any suggestions?

Thanks in advance.

I am having an issue with my z-index, then freezing grid columns. 

There are obviously then becoming sticky,  which creates a new stacking context, and sticks to the nearest ancestor?  I think this may be where the problem lies. 

As a result when my fixed modal is activated this happens, and I just can't seem to fix the problem. 

Any ideas?

Thank you!