Random unexpected row selection on virtualized grid

[Daniel]

I have a virtualized grid bound to a list of custom objects. The list is filled after a form submit. 

On DataBound event, I call javascript interop method selectAll and all the rows are selected:

function selectAll()
{ 
        document.getElementsByClassName("e-checkselectall")[0].click(); 
}

However, when scrolling the grid, the row selection is randomly lost as you can see in the video attached.

Grid definition:

                <SfGrid @ref="grid" DataSource="@pendientes" AllowSorting="true" AllowGrouping="true" EnableVirtualization="true" Height="400" Toolbar="toolbar" AllowResizing="true" AllowFiltering="false" AllowPdfExport="true" AllowExcelExport="true" EnableVirtualMaskRow="true">
                    <GridEvents TValue="RespuestaGarantiasPendientes" OnToolbarClick="ToolbarClickHandler" RowSelected="CalculaSeleccion" RowDeselected="CalculaDeSeleccion" DataBound="DataBound" ></GridEvents>
                    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple" CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>
                    <GridColumns>
                        <GridColumn Type="ColumnType.CheckBox" HeaderText="Selección"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.matricula) HeaderText="Matrícula" Type="ColumnType.String"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.beneficiario) HeaderText="Beneficiario" Type="ColumnType.String"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.garantia) IsPrimaryKey="true" HeaderText="Garantía" Type="ColumnType.String"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.duracion) HeaderText="Duración" Type="ColumnType.Number" Format="N0" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.efecto) HeaderText="Efecto" Type="ColumnType.Date" Format="dd/MM/yyyy" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.vencimiento) HeaderText="Vencimiento" Type="ColumnType.Date" Format="dd/MM/yyyy" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.vehiculo) HeaderText="Vehículo" Type="ColumnType.String"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.proveedor) HeaderText="Proveedor" Type="ColumnType.Number" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.primaneta) HeaderText="Prima neta" Type="ColumnType.Number" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.comision) HeaderText="Comisión" Type="ColumnType.Number" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.impuestos) HeaderText="Impuestos" Type="ColumnType.Number" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
                        <GridColumn Field=@nameof(RespuestaGarantiasPendientes.liquido) HeaderText="Líquido" Type="ColumnType.Number" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
                    </GridColumns>
                    @*<GridGroupSettings Columns="@initialgroup"></GridGroupSettings>*@
                </SfGrid>

Attachment: 20220419_103537_18fee99c.rar

[Renjith Singh Rajendran]

Hi Daniel,

Greetings from Syncfusion support.

Based on this scenario, we suggest you to call the JS method inside the Created event of Grid. We are also attaching a sample for your reference. Please refer the codes below,

 

     <GridEvents TValue="Order" Created="Created"></GridEvents>

 

    public async Task Created()

    {

        await JsRuntime.InvokeAsync<object>("selectAll");

    }

 

Reference : https://blazor.syncfusion.com/documentation/datagrid/events#created

Please get back to us if you need further assistance.

Regards,

Renjith R

Attachment: ServerApp_a407cefc.zip