RadzenDataGrid Multiple Select Checkbox

Radzen.Blazor Components
1

Hi, I had a deselect issue before and you fixed it in this topic link but now I'm facing other issues. I added a checkbox column to my grid because I want to let users to select all without selecting one by one but in this situation:
1- When I change page, selections are staying but checkboxes are being empty.
2- When I select all, other selections that I did from other pages are disappearing.
Am I doing something wrong or is this another bug?
Here is my example code

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind

<RadzenDataGrid @ref="grid" @bind-Value=@selectedEmployees SelectionMode="DataGridSelectionMode.Multiple" KeyProperty="EmployeeID" IsLoading="@isLoading" Count="@count" Data="@employees" LoadData="@LoadData" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" PagerHorizontalAlign="HorizontalAlign.Center" TItem="Employee" ColumnWidth="200px">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Width="60px" Sortable="false" Filterable="false">
            <HeaderTemplate>
                <RadzenCheckBox TriState="false" TValue="bool?" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select all items" }})"
                   Value="@(selectedEmployees == null || selectedEmployees?.Any() != true ? false : !employees.All(i => selectedEmployees.Contains(i)) ? null : employees.Any(i => selectedEmployees.Contains(i)))"
                   Change="@(args => selectedEmployees = args == true ? employees.ToList() : null)" />
            </HeaderTemplate>
            <Template Context="data">
                <RadzenCheckBox TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select item" }})"
                    TValue="bool" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
        <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
        <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
        <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
    </Columns>
    <LoadingTemplate>
        <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
    </LoadingTemplate>
</RadzenDataGrid>

@code {
    bool isLoading;
    int count;
    ODataEnumerable<Employee> employees;
    IList<Employee> selectedEmployees;
    RadzenDataGrid<Employee> grid;

    NorthwindODataService service = new NorthwindODataService("https://services.radzen.com/odata/Northwind/");

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }

    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;

        var result = await service.GetEmployees(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true, expand: "NorthwindOrders($expand=Customer)");
        // Update the Data property
        employees = result.Value.AsODataEnumerable();
        // Update the count
        count = result.Count;

        isLoading = false;
    }
}
2

The code for the CheckBox column should be different in this case (LoadData binding) since the instances of returned items every time will be different and code like this will not work:

selectedEmployees.Contains(data))

You need to use EmployeeID to check if the item is selected or not.

3

You can check the updated version of our OData demo now with multiple selection with CheckBox column:

4

Thanks. This solved my problem no 1. It was my mistake. But the second problem still persists.

5

Select all in case of LoadData means select all records on the current page - no other items are available. You need to change this code if you want different behavior:

6

Thanks. It was a bit challenging for me but I think I figured. This code fixed my problem.

Change="@(args => {
                    if (selectedEmployees == null)
                        selectedEmployees = new List<Employee>();
                    if (selectedEmployees.Count == 0)
                        selectedEmployees= employees.ToList();
                    else if (args == true) {
                        selectedEmployees = selectedEmployees.Union(employees.ToList()).ToList();
                    }
                    else {
                        selectedEmployees = selectedEmployees.Where(s => !employees.Select(f => f.EmployeeID).ToList().Contains(s.EmployeeID)).ToList();
                    }
                })"
7

For me this code is working if match condition then work

<RadzenDataGrid @ref="Grid" AllowRowSelectOnRowClick="true" AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="10"
AllowSorting="true" Data="@NewRequestList" ColumnWidth="200px"
SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@selectedItems class="m-4">



<RadzenCheckBox TabIndex="-1" TriState="false" TValue="bool?"
InputAttributes="@(new Dictionary<string, object>() { { "aria-label", "Select all items" } })"
Value="@(selectedItems == null || selectedItems?.Any() != true ? false : !NewRequestList.All(i => selectedItems.Any(x=>x.ProjectTitle.Contains(i.ProjectTitle))) ? null : NewRequestList.Any(i => selectedItems.Any(x=>x.ProjectTitle.Contains(i.ProjectTitle))))"
Change="@(args => { selectedItems = args == true ? NewRequestList.ToList() : null; })" />


<RadzenCheckBox TabIndex="-1" TriState="false" TValue="bool"
InputAttributes="@(new Dictionary<string, object>() { { "aria-label", "Select item" } })"
Value="@(selectedItems != null && selectedItems.Any(x=>x.ProjectTitle.Contains(list1.ProjectTitle)))"
Change=@(args => { if (false) { Grid.SelectRow(list1); } if (selectedItems != null) { if (selectedItems.Count() >= NewRequestList.Count()) { selectedItems = null; } } }) />











<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Size="ButtonSize.ExtraSmall"
Click="@(args => EditPage(list))" @onclick:stopPropagation="true">




8
{ if (false) { Grid.SelectRow(list1); } if (selectedItems != null) { if (selectedItems.Count() >= NewRequestList.Count()) { selectedItems = null; } } }) />