Telerik Forums
UI for Blazor Forum
1 answer
729 views

When there are so many rows that the browser has a scroll bar, the context menu that opens automatically moves the scroll bar to the lowest position. 

Pictures attached showing the problem.

Also example code attached.

Marin Bratanov
Telerik team
 answered on 06 Aug 2021
1 answer
736 views
Is there any plans to implement an OnColumnContextMenu event in the grid? Or maybe an OnCellContextMenu event that identifies both the row and column?  And to go a step further, what about exposing events when the Grid header is clicked.
Svetoslav Dimitrov
Telerik team
 answered on 02 Jul 2021
3 answers
492 views

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);
    }
}

Nadezhda Tacheva
Telerik team
 answered on 01 Jul 2021
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?