RadzendataGrid in a component does not work in virtual

I have created a component that is called from another component. This component has:

  • RadzenDropDown (Virtualized)
  • RadzenDataGrid (Virtualized)

Well, the RadzenDataGrid component does not work, it does not load the data. It only works when I remove the virtualization and load the data all at once.

Hi @pitasoft,

Please check the forum FAQ for tips how to improve your question. Right now the information provided is highly insufficient.

This is how it works correctly.

<div class="mb-3">
    <label class="form-label">Tipo de cliente:</label>
    <div class="input-group">
        <RadzenDropDown @bind-Value=@_selectedUserId
                        Data=_users
                        LoadData="LoadUsersAsync"
                        Count="_userCount"
                        AllowVirtualization="true"
                        AllowClear="true"
                        AllowFiltering="true"
                        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                        TextProperty="@nameof(UserDto.Title)"
                        ValueProperty="@nameof(UserDto.UserId)"
                        Placeholder="Seleccione un usuario"
                        class="form-control"/>
        <button class="btn btn-success" type="button" @onclick="AddUserAsync" id="@($"button-addon-selection-customer-{_id}")"><span class="oi oi-plus"></span></button>        
    </div>
</div>
<RadzenDataGrid @ref="_grid"
                Style="height: 400px;"
                TItem="UserDto" 
                Data="@_selectedUsers" 
                IsLoading="_working"
                ColumnWidth="45px"
                AllowSorting="true" 
                AllowMultiColumnSorting="true" 
                AllowFiltering="true"
                FilterMode="FilterMode.SimpleWithMenu"
                IsNullText="Texto nulo" ApplyFilterText="Aplicar filteo" FilterText="Filtrar" AllColumnsText="Todas la columnas" AndOperatorText="Y"
                ClearFilterText="Limpiar" ColumnsShowingText="Mostar columnas" ColumnsText="Columnas" ContainsText="Contiene" DoesNotContainText="No contiene"
                EmptyText="Vacio" EndsWithText="Termina con" EnumFilterSelectText="Seleccionar" EqualsText="Igual" GreaterThanOrEqualsText="Mayor o igual" GreaterThanText="Mas grande"
                GroupPanelText="Panel grupo" IsEmptyText="Es vacio" IsNotEmptyText="No es vacio" IsNotNullText="No es nulo" LessThanOrEqualsText="Menor o igual"
                LessThanText="Menor" NotEqualsText="No igual" OrOperatorText="O" PageSizeText="Tamaño página" StartsWithText="Comenzar con">
    <EmptyTemplate>
        <p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">No hay registros para visualizar.</p>
    </EmptyTemplate>
    <Columns>                
        <RadzenDataGridColumn TItem="UserDto" Property="@nameof(UserDto.Title)" Title="Titulo" Width="300px"/>
        <RadzenDataGridColumn TItem="UserDto" Property="@nameof(UserDto.Email)" Title="e-Mail" Width="300px"/>
        <RadzenDataGridColumn TItem="UserDto" Sortable="false" Filterable="false">
            <Template Context="user">
                <button class="btn btn-danger" @onclick="() => DeleteUser(user)" title="Desasginar"><span class="oi oi-circle-x" aria-hidden="true"></span></button>
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

This code worked, and with the latest version of the components it has stopped working.

<div class="mb-3">
    <label class="form-label">Tipo de cliente:</label>
    <div class="input-group">
        <RadzenDropDown @bind-Value=@_selectedUserId
                        Data=_users
                        LoadData="LoadUsersAsync"
                        Count="_userCount"
                        AllowVirtualization="true"
                        AllowClear="true"
                        AllowFiltering="true"
                        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                        TextProperty="@nameof(UserDto.Title)"
                        ValueProperty="@nameof(UserDto.UserId)"
                        Placeholder="Seleccione un usuario"
                        class="form-control"/>
        <button class="btn btn-success" type="button" @onclick="AddUserAsync" id="@($"button-addon-selection-customer-{_id}")"><span class="oi oi-plus"></span></button>        
    </div>
</div>
<RadzenDataGrid @ref="_grid"
                Style="height: 400px;"
                TItem="UserDto" 
                Data="@_selectedUsers"
                LoadData="LoadSectecdUsersAsync"
                Count="_userSelectedCount"
                AllowVirtualization="true"                
                IsLoading="_working"
                ColumnWidth="45px"
                AllowSorting="true" 
                AllowMultiColumnSorting="true" 
                AllowFiltering="true"
                FilterMode="FilterMode.SimpleWithMenu"
                IsNullText="Texto nulo" ApplyFilterText="Aplicar filteo" FilterText="Filtrar" AllColumnsText="Todas la columnas" AndOperatorText="Y"
                ClearFilterText="Limpiar" ColumnsShowingText="Mostar columnas" ColumnsText="Columnas" ContainsText="Contiene" DoesNotContainText="No contiene"
                EmptyText="Vacio" EndsWithText="Termina con" EnumFilterSelectText="Seleccionar" EqualsText="Igual" GreaterThanOrEqualsText="Mayor o igual" GreaterThanText="Mas grande"
                GroupPanelText="Panel grupo" IsEmptyText="Es vacio" IsNotEmptyText="No es vacio" IsNotNullText="No es nulo" LessThanOrEqualsText="Menor o igual"
                LessThanText="Menor" NotEqualsText="No igual" OrOperatorText="O" PageSizeText="Tamaño página" StartsWithText="Comenzar con">
    <EmptyTemplate>
        <p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">No hay registros para visualizar.</p>
    </EmptyTemplate>
    <Columns>                
        <RadzenDataGridColumn TItem="UserDto" Property="@nameof(UserDto.Title)" Title="Titulo" Width="300px"/>
        <RadzenDataGridColumn TItem="UserDto" Property="@nameof(UserDto.Email)" Title="e-Mail" Width="300px"/>
        <RadzenDataGridColumn TItem="UserDto" Sortable="false" Filterable="false">
            <Template Context="user">
                <button class="btn btn-danger" @onclick="() => DeleteUser(user)" title="Desasginar"><span class="oi oi-circle-x" aria-hidden="true"></span></button>
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

Try to prepare running example using our demos where we can reproduce the problem.

LoadData is never executed even if _grid.Reload() is called.

The component is used this way:

        </div>
        <hr/>
        <div class="mb-3">
            @if (!New)
            {
                <button class="btn btn-success" type="button" @onclick="OnRefresh" title="Actualizar"><span class="oi oi-reload" aria-hidden="true"></span></button>
                <span>&nbsp;</span>
            }
            <button class="btn btn-primary" type="submit">@SubmitText</button>
            <a class="btn btn-secondary" href="@UrlCancel">@CancelText</a>
        </div>
    </EditForm>
    @if (!New)
    {
        <SelectionCustomerComponent User="User"/>
    }

It is on our demo:

Again, try to prepare runnable example.

I have the component used and it works perfectly when it is in pages, but when I use it in components that I call in pages it does not work for me.

This is an example how it works.

We can’t help much looking at screenshot.

It works correctly when you use the component in pages. But when I create a component that uses a DataGrid and calls it on the page it doesn't work. It does not launch the LoadData.

I have created a component from the above code. And I call this component on a page and it doesn't work. I have given you the complete code previously.

Pages are components and our demos are constructed exactly by nesting components in pages. Check the code for reference.

Well, I just tried to help you for free however as I already mentioned we can’t run the code you’ve pasted here.