How prevent render Grid, during using Dialog?

[Tomasz S.]

I have grid with a few hundred simple rows (without virtualization and paging).

I show simple dialog with SfNumericTextBox (binded to property).

Each click on the arrows seems to render the grid. It's very slow (even warnings in console). 

How to prevent this?

[Monisha Saravanan]

Hi Tomasz,

We would like to inform you that we have already prevented unwanted rendering of Grid component while performing Edit Operation in DataGrid. If you have used @bind-value and binded the value from the context directly the upon every change in value will refresh the value in the GridColumn. So before proceeding further kindly share us the below details from your end.

1. Share us the entire Grid code snippet.
2. Share us whether you have used Blazor server or wasm. If you are using WASM then kindly check the below documentation for performance improvements.

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

3. Share us the total number of rows and columns rendered at initial rendering.
4. If you have larger number of records we suggest you to use either paging or virtualization at your end.
5. Share us the console error faced at your end.
6. Share us the video demonstration of the reported issue.
7. If possible share us a simple issue replicating sample or kindly replicate the reported issue on the below sample.

Sample: https://blazorplayground.syncfusion.com/embed/hXLfDgteqeXbVora?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

The above requested details will be very helpful for us to validate the reported issue at our end.

Regards,

Monisha

[Tomasz S.]

This is sample:

https://blazorplayground.syncfusion.com/VtLTtKjSTzJCkvQn

I know, that virtualization/paging is faster. But i have small and fast grid with one or two columns. 

I don't need virtualization/paging. 

But even with virtualziation/paging, this grid is still re-rendered unnecessarily.

[Monisha Saravanan]

Hi Tomasz,

We would like to inform you that it is always suggested to use either paging/virtualization while rendering larger number of records in WASM application.

To prevent the unwanted rendering of the component we recommend you to use PreventRender in the valuechange event of the NumericTextBox. This will improve the performance in WASM app by preventing the unnecessary component renderings.

We have modified and reattached the shared sample. Kindly check the below attached sample and code snippet for your reference.

Sample: https://blazorplayground.syncfusion.com/embed/LZBTDUjdskvXjTyU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

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

 

<SfDialog Visible="true" IsModal="true" Width="300">

    <DialogTemplates>

        <Header>

            dodaj

        </Header>

        <Content>

            <SfNumericTextBox Value="slowvalue" ID="SlowValue" Placeholder="SlowValue" FloatLabelType="FloatLabelType.Always"  TValue="int" Max="10000" Min="1">

                <NumericTextBoxEvents TValue="int"  ValueChange="@change"></NumericTextBoxEvents>

            </SfNumericTextBox>

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="OK"  IsPrimary="true" />

        <DialogButton Content="Cancel" />

    </DialogButtons>

    <DialogPositionData X="center" Y="center"></DialogPositionData>

</SfDialog>

 

<div class="container-fluid">

    <div class="row">

        <div class="col-6">

            <SfGrid @ref="@DataGrid1" DataSource="@Orders" />

        </div>

        <div class="col-6">

            <SfGrid @ref="@DataGrid2" DataSource="@Orders2" Toolbar="@(new List<string>() {"Delete", "Edit"})">

                <GridEvents RowSelected="RowSelectHandler1" RowDeselected="RowDeselectHandler1" TValue="Order">

                </GridEvents>

            </SfGrid>

        </div>

    </div>

</div>

 

@code{

    public void change(Syncfusion.Blazor.Inputs.ChangeEventArgs<int> args)

    {

        slowvalue = args.Value;

        DataGrid1.PreventRender();

        DataGrid2.PreventRender();

    }

}

Please let us know if you have any concerns.

[Tomasz S.]

Thank you for the information. 

I thought the only solution was to remove @bind-value

[Monisha Saravanan]

Hi Tomasz,

Welcome. Yes we recommend you to remove @bind-value and use prevent render to improve the performance. Kindly get back to us if you have further queries. As always we will be happy to assist you.