We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

RowSelected event very slow on grids with many rows

I have crated a new application using the syncfusion template (see BlazorApp2 attached) and added a grid with 2000 rows on to index.razor. If you do not hook into the RowSelected event there is no delay when selecting a new (it works ok). If you hook into the RowSelected event it takes over 3 seconds before the row is highlighted when clicking on a new row. Which is unacceptable.


I have modified an application found on your web site (See BlazorApp1)  with the same index.razor page and this works fine when hooking into RowSelected.


BlazorApp2 uses WebAssemblyHostBuilder in program.cs where as BlazorApp1 uses WebApplication, is this the reason why BlazorApp1 works and BalzorApp2 does not?


How can we fix this problem within BlazorApp2 without reverting to what I assume is an older way of starting the application (assuming this is the cause)


Attachment: BlazorApps_5fc079b3.zip

3 Replies 1 reply marked as answer

MS Monisha Saravanan Syncfusion Team October 31, 2022 10:04 AM

Hi Phil,


Greetings from Syncfusion support.


We have checked your query and we would like to inform that when a callback method is assigned to the grid events, then the StateHasChanged will be called in parent component of the grid automatically once the event is completed. So we suggest you to prevent this re-rendering of the grid component by setting PreventRender property of the corresponding event argument as true in WASM for better performance. We have modified the shared sample. Kindly check the attached sample and code snippet for your reference.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp21556628684.zip


private void OnRowSelected(RowSelectEventArgs<Order> args)

    {

        args.PreventRender = true; //without this, you may see noticeable delay in selection with 75 rows in grid.

   }


Also we have documented this topic in our below UG section. Kindly check the attached UG for additional information.


Reference: https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events


https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance


Please let us know if you have any concerns.


Regards,

Monisha


Marked as answer

PH Phil October 31, 2022 10:42 AM

Setting PreventRender to false has solved the issue. Apologizes for not seeing this in the documentation.



MS Monisha Saravanan Syncfusion Team October 31, 2022 11:21 PM

Hi Phil,


Thanks for the update.


We are glad to hear that the reported issue has been resolved. Kindly get back to us if you have further queries. As always we will be happy to assist you.


Regards,

Monisha

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Loader.
Live Chat Icon For mobile
Up arrow icon