Blazor Wasm Grid Performance
Thanks for the update.
We have unzipped the attached sample project. However, while the solution file is present, the remaining folders appear to be missing. As a result, we are unable to review the issue you encountered.
|
|
Please share the runnable project after removing the bin and obj folders. Additionally, kindly provide a video demonstrating the issue you are facing. Thank you for your understanding.
Thank you for sharing your scenario and code sample.
Based on the provided implementation, it appears that you are using a standalone ContextMenu component and triggering it manually during the Grid context menu open event by cancelling the default behavior. This approach may be contributing to the delay you are experiencing when opening the context menu. We would like to clarify that the Grid already provides built-in support for add custom context menu items functionality, which is optimized for better performance. Instead of cancelling the Grid’s context menu event and invoking a separate component, we recommend using the built-in ContextMenuItems property along with the ContextMenuItemClicked event. This allows you to define and handle menu actions directly within the Grid, ensuring faster and more efficient rendering. Additionally, you can pass parameters (such as the parent component context) through the event arguments and access them within child components as needed. Kindly refer to the below modified code snippet and sample for your reference.
Documentation: Context
Menu in Blazor DataGrid | Syncfusion
Code Snippet:
HomeView.razor
|
<SfGrid ID=@($"CompactGrid_{_id}") @ref=@GridRef DataSource=@PaginationDto TValue="BaseDto" ContextMenuItems=@_contextMenuItems Toolbar=@_toolbar ShowColumnChooser=@true ShouldRenderHiddenColumns=@false EnablePersistence=@true RowHeight=@(20) Width="100%" Height="100%" AllowResizing=@true AllowSelection=@false AllowPaging="true">
<GridPageSettings PageSize="50"></GridPageSettings> <GridEvents TValue="BaseDto" ContextMenuOpen=@OpenSfContextMenu ContextMenuItemClicked="GridContextMenuItemClicked" OnRecordDoubleClick=@SfDoubleClick OnRecordClick=@SfSingleClick /> ------
[Parameter] public required EventCallback<BaseDto> OnRowSingleClick { get; set; } [Parameter] public List<ContextMenuItemModel> GridContextMenuitems { get; set; } = new();
[Parameter] public EventCallback<ContextMenuClickEventArgs<BaseDto>> GridContextMenuItemClicked { get; set; } } |
Home.razor
|
@* <SfContextMenu @ref=@ContextMenuRef Items=@MenuItems> <MenuEvents TValue=@MenuItemModel ItemSelected=@ContextMenuItemSelected OnOpen=@OnOpen /> </SfContextMenu> *@
<SfButton OnClick=@SimulateApiCall Content="Simulate API Call" /> <SfButton OnClick=@ToggleTable Content="ToggleTable" />
<HomeView PaginationDto=@PaginationDto GridContextMenuitems="_contextMenuItems" HandleContextMenuOpen=@ContextMenuOpen GridContextMenuItemClicked=@ContextMenuItemSelected Loading=@Loading IsTable=@IsTable>
<WebCompactGridColumns> <GridColumn Field="@nameof(BaseDto.Name)" HeaderText="Name" Visible="true" /> <GridColumn Field="@nameof(BaseDto.EquipmentType)" Visible="true" /> <GridColumn Field="@nameof(BaseDto.TotalDays)" Visible="true" /> <GridColumn Field="@nameof(BaseDto.IsDeleted)" Visible="true" DisplayAsCheckBox=@true /> <GridColumn Field="@nameof(BaseDto.IsTicket)" Visible="true" DisplayAsCheckBox=@true /> </WebCompactGridColumns>
<WebDetailTemplate> <div>This is the detail Template</div> </WebDetailTemplate>
</HomeView>
@code {
public SfContextMenu<MenuItemModel> ContextMenuRef { get; set; } = new(); public List<MenuItemModel> MenuItems = new(); public List<BaseDto> PaginationDto { get; set; } = new(); public BaseDto? SelectedDto { get; set; } = null; public bool Loading { get; set; } = true; public bool IsTable { get; set; } = true;
private List<ContextMenuItemModel> _contextMenuItems = new() { new ContextMenuItemModel { Text = "Modify...", Id = "modify", Target = ".e-content" }, new ContextMenuItemModel { Text = "Overview...", Id = "overview", Target = ".e-content" }, new ContextMenuItemModel { Text = "Audit...", Id = "audit", Target = ".e-content" }, new ContextMenuItemModel { Text = "Open Sidebar...", Id = "sidebar", Target = ".e-content" },
new ContextMenuItemModel { Separator = true },
new ContextMenuItemModel { Text = "More Actions", Id = "more", Target = ".e-content", Items = new List<Syncfusion.Blazor.Navigations.MenuItem> { new Syncfusion.Blazor.Navigations.MenuItem { Text = "Copy Cell Value", Id = "copy", IconCss = "bi bi-clipboard" }, new Syncfusion.Blazor.Navigations.MenuItem { Text = "Share", Id = "share", IconCss = "bi bi-share" }, new Syncfusion.Blazor.Navigations.MenuItem { Text = "Duplicate", Id = "duplicate", IconCss = "bi bi-copy" },
new Syncfusion.Blazor.Navigations.MenuItem { Separator = true },
new Syncfusion.Blazor.Navigations.MenuItem { Text = "Delete", Id = "delete", IconCss = "bi bi-trash" } } },
};
---- ------ public async Task ContextMenuItemSelected ( ContextMenuClickEventArgs<BaseDto> args) { args.PreventRender = true; try { var item = args.Item.Id; Console.WriteLine(item); } catch (Exception) { } } ---- }
|
Sample: Check the attachment .
Furthermore, to improve Grid performance in a Blazor WebAssembly application, we suggest keeping the page size at a reasonable level (for example, around 15 or based on your requirements), even when using paging or virtualization, as very large page sizes can still introduce performance bottlenecks. You may refer to this documentation for more details:
https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#use-paging-or-virtualization-to-load-only-visible-rows
Another important optimization is to avoid unnecessary component re-renders
after Grid events. When handling Grid events, you can set the PreventRender
property on the event arguments (where applicable) to true, which prevents the
Grid from re-rendering unnecessarily and improves responsiveness. For more
information, please refer to:
Code Snippet:
|
public void SfSingleClick(RecordClickEventArgs<BaseDto> args) { args.PreventRender = true;
Console.WriteLine($"Single click: {args.RowData.Id}"); }
public void SfDoubleClick(RecordDoubleClickEventArgs<BaseDto> args) { args.PreventRender = true;
Console.WriteLine($"Double click: {args.RowData.Id}"); }
Home.razor { args.PreventRender = true; try { var item = args.Item.Id; Console.WriteLine(item); } catch (Exception) { } }
|
Please get back to us if you need further assistance.
Attachment: BlazorApp6_588da5ac.zip
