Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 07 Jul 2020 15:16 by ADMIN
Robert
Created on: 02 Dec 2019 15:03
Category: Grid
Type: Feature Request
2
Select all items with GridCheckboxColumn when using VirtualScroll should select all items in the data source, not just the currently rendered rows

Hi,

how to select ALL items in the grid data source using GridCheckboxColumn in the grid header when grid is in Virtual scroll mode?
When I click on the GridCheckboxColumn in the grid header it selects only the items in the current visible page but I would like to select all items in the grid data source.

Selecting all items in the grid (not only visible ones) is a must have feature and current behavoiur is kind of misleading because the user would expect that all items are selected.

ADMIN EDIT: This has been available since 2.10.0 through the SelectAllMode parameter of the selection column.

2 comments
ADMIN
Marin Bratanov
Posted on: 07 Jul 2020 15:16

Hi Robert,

This has been available since 2.10.0 in April when the SelectAllMode was added to the selection column.

You can read more about its behavior here: https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#checkbox-selection

Here's an example where clicking the header checkbox selects all items with virtual scrolling mode:

 

<TelerikGrid Data=@GridData
             ScrollMode="@GridScrollMode.Virtual"
             Height="480px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
             SelectionMode="GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedItems">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" SelectAllMode="@GridSelectAllMode.All" />
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireData" Width="200px">
            <Template>
                @((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@if (SelectedItems != null)
{
    <ul>
        @foreach (SampleData item in SelectedItems)
        {
            <li>
                @item.Id
            </li>
        }
    </ul>
}

@code {
    public List<SampleData> GridData { get; set; }
    public IEnumerable<SampleData> SelectedItems { get; set; } = Enumerable.Empty<SampleData>();

    protected override async Task OnInitializedAsync()
    {
        GridData = await GetData();
    }

    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 1000).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
ADMIN
Marin Bratanov
Posted on: 03 Dec 2019 12:37

Hi Robert,

I have updated the documentation to also list multiple selection as a limitation of the virtual scrolling feature. Handling such scenarios will require further work and I made this request public at the following URL: https://feedback.telerik.com/blazor/1444491-select-all-items-with-gridcheckboxcolumn-when-using-virtualscroll-should-select-all-items-in-the-data-source-not-just-the-currently-rendered-rows. This should probably be exposed through a separate property that should control that behavior, because there are scenarios when it should work like that with "regular" paging.

At the moment, this can be done with a button and two-way binding of the selected items collection:

<TelerikButton Primary="true" OnClick="@SelectAll">Select All</TelerikButton>

<TelerikGrid Data=@GridData
             ScrollMode="@GridScrollMode.Virtual"
             Height="400px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
             SelectionMode="GridSelectionMode.Multiple" @bind-SelectedItems="@SelectedItems">
    <GridColumns>
        <GridCheckboxColumn SelectAll="false" />
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireData">
            <Template>
                @((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@if (SelectedItems != null)
{
    <ul>
        @foreach (SampleData employee in SelectedItems)
        {
            <li>
                @employee.Id
            </li>
        }
    </ul>
}

@code {
    void SelectAll()
    {
        SelectedItems = GridData.AsEnumerable();
    }

    public List<SampleData> GridData { get; set; }
    public IEnumerable<SampleData> SelectedItems { get; set; } = Enumerable.Empty<SampleData>();

    protected override async Task OnInitializedAsync()
    {
        GridData = await GetData();
    }

    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 1000).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category