Use inline editing with virtualization

[yangetze]

Hey, I have a little issue/question about virtualizacion on datagrid.
I need a datagrid with this characteristics: use inline editing, don't use pagination.
I've done implemention and I've add a row without any issue. Buuuut, when I want to edit the row causes this error:
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
2021-11-18 16:43:00.694 -04:00 [WRN] Unhandled exception rendering component: Could not find 'blazoriseDataGrid.virtualize.onEditSetScroll' ('blazoriseDataGrid' was undefined).
Error: Could not find 'blazoriseDataGrid.virtualize.onEditSetScroll' ('blazoriseDataGrid' was undefined).

I read the note on documentaion: Note that this mode requires that all rows have the same height.
And I tried in css put the same height in all rows, but nothing happens.

• I've notice that only works if is popup.
• I've tried using OnReadData, but when I've save the detail this disappear.

Example code bellow:

<DataGrid TItem="CotizacionDetalleArticuloDto"
                                              Data="NewCotizacion.CotizacionDetalleArticulo" 
                                              VirtualizeOptions="virtualizeOptions" Virtualize="true"
                                              Editable="true"
                                              UseInternalEditing="true"
                                              EditMode="DataGridEditMode.Inline"
                                              NewItemDefaultSetter="@OnNewItemDefaultSetter"
                                              @bind-SelectedRow="@SelectedItemDetalleArticulo"
                                              ShowPager="true"
                                              Responsive="true">
                                        <DataGridColumns>
                                            <DataGridCommandColumn TItem="CotizacionDetalleArticuloDto">
                                                <NewCommandTemplate>
                                                    <Tooltip Text="@L["New"]">
                                                        <Button Color="Color.Success" Clicked="@context.Clicked" Disabled="(!SelectedCliente.Id.HasValue)"><Icon Name="IconName.Add" /></Button>
                                                    </Tooltip>
                                                </NewCommandTemplate>
                                                <EditCommandTemplate>
                                                    <Tooltip Text="@L["Edit"]">
                                                        <Button Color="Color.Success" Clicked="@context.Clicked"><Icon Name="IconName.Edit" /></Button>
                                                    </Tooltip>
                                                </EditCommandTemplate>
                                                <SaveCommandTemplate>
                                                    <Tooltip Text="@L["Save"]">
                                                        <Button Color="Color.Success" Clicked="()=>SaveDetail(context)"><Icon Name="IconName.Save" /></Button>
                                                    </Tooltip>
                                                </SaveCommandTemplate>
                                                <CancelCommandTemplate>
                                                    <Tooltip Text="@L["Cancel"]">
                                                        <Button Color="Color.Secondary" Clicked="@context.Clicked"><Icon Name="@("fa-ban")" /></Button>
                                                    </Tooltip>
                                                </CancelCommandTemplate>
                                            </DataGridCommandColumn>

                                            <DataGridColumn TItem="CotizacionDetalleArticuloDto" Field="@nameof(CotizacionDetalleArticuloDto.Descripcion)" Caption="@L["Descripcion"]" Editable="true">
                                                <DisplayTemplate>
                                                    <Tooltip @bind-Text="@context.Descripcion" Multiline="true">
                                                        <MemoEdit @bind-Text="@context.Descripcion" Rows="2" Disabled="true" Overflow="Overflow.Hidden"></MemoEdit>
                                                    </Tooltip>
                                                </DisplayTemplate>
                                                <EditTemplate>
                                                    <MemoEdit Rows="2" Disabled="true" Text="@((string)context.CellValue)"
                                                              TextChanged="@( v => { context.CellValue = v; UpdateCell(context);})" />
                                                </EditTemplate>
                                            </DataGridColumn>

                                            <DataGridNumericColumn TItem="QuoteDto" Field="@nameof(QuoteDto.Cant)" TextAlignment="TextAlignment.Right"
                                                                   Caption="@L["Cant"]" Editable="true" >
                                                <EditTemplate>
                                                    <NumericEdit Decimals="4" TValue="decimal" Value="@((decimal)context.CellValue)" Culture="es" 
                                                                 ValueChanged="@( v => { context.CellValue = v; UpdateCell(context); })"  />
                                                </EditTemplate>
                                            </DataGridNumericColumn>

                                            <DataGridNumericColumn TItem="QuoteDto" Field="@nameof(QuoteDto.Percent)" Caption="@L["Percent"]" Editable="true">                                                                   
                                                <EditTemplate>
                                                    <NumericEdit TValue="decimal" DecimalsSeparator="," Culture="es" Decimals="2"  Value="@((decimal)context.CellValue)" ValueChanged="@( v => { context.CellValue = v; UpdateCell(context); })" />
                                                </EditTemplate>
                                            </DataGridNumericColumn>

                                            <DataGridNumericColumn TItem="QuoteDto" Field="@nameof(QuoteDto.Total)" 
                                                                   Caption="@L["Total"]" Editable="true">
                                                <EditTemplate>
                                                    <NumericEdit TValue="decimal" ShowStepButtons="false" Disabled="true" Plaintext="true" Value="@((decimal)context.CellValue)"
                                                                 ValueChanged="@( v => { context.CellValue = v; })" TextAlignment="TextAlignment.Right" />
                                                </EditTemplate>
                                            </DataGridNumericColumn>                      
                                        </DataGridColumns>
                                    </DataGrid>

[David-Moreira]

Hello,
What Blazorise version are you using? It seems to me, you might be missing the Datagrid js resource.
<script src="_content/Blazorise.DataGrid/blazorise.datagrid.js?v=0.9.4.4"></script>
Can you try adding it and testing again?

In 0.9.5 this line is no longer needed though.

[yangetze]

I'm using Blazorise Datagrid 0.9.4.6

[David-Moreira]

Great, so please do add to your index.html (WebAssembly) or _Host.cshtml (Blazor Server)
<script src="_content/Blazorise.DataGrid/blazorise.datagrid.js?v=0.9.4.4"></script>
And try again.
Let us know if that solves your problem!

[yangetze]

Ok.

[yangetze]

Works like a charm! Thankkkks! 😆😆😆