Grid select all or visible filter

[Gordon]

Hi - Has anyone come across this use-case and have a solution for adding a filter to a grid that allows for selecting all or only visible items (see screenshot below)?

[Vignesh Natarajan]

Hi Gordon, 

 

Thanks for contacting Syncfusion support. 

 

Query: “Has anyone come across this use-case and have a solution for adding a filter to a grid that allows for selecting all or only visible items (see screenshot below)?” 

 

We have analyzed your query and we have achieved your requirement by rendering a custom component in column header of checkbox column and based on the item selected, we have selected the records in Grid using SelectRowsByRange() method of Grid. When selecting the Select All option, we have enabled a Boolean variable to select the records while navigating. 

 

Refer the below code example for your reference.  

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.SplitButtons 

  

<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true"> 

    <GridEvents OnActionComplete="Complete" TValue="Order"></GridEvents> 

    <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 

    <GridColumns> 

        <GridColumn Type="ColumnType.CheckBox" Width="50"> 

            <HeaderTemplate> 

                <SfDropDownButton> 

                    <DropDownButtonEvents ItemSelected="OnSelected"></DropDownButtonEvents> 

                    <DropDownMenuItems> 

                        <DropDownMenuItem Text="Select Visible"></DropDownMenuItem> 

                        <DropDownMenuItem Text="Select All"></DropDownMenuItem> 

                    </DropDownMenuItems> 

                </SfDropDownButton> 

            </HeaderTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

    public bool IsSelectAll { get; set; } 

    public async Task OnSelected(MenuEventArgs Args) 

    { 

        if (Args.Item.Text == "Select Visible") 

        { 

            IsSelectAll = false; 

            var CurrentViewRecords = await Grid.GetCurrentViewRecords(); 

            await Grid.SelectRowsByRange(0, CurrentViewRecords?.Count - 1); 

        } 

        else if (Args.Item.Text == "Select All") 

        { 

            IsSelectAll = true; 

            await Grid.SelectRowsByRange(0, Orders?.Count - 1); 

        } 

    } 

    public async Task Complete(ActionEventArgs<Order> Args) 

    { 

        //to select the next set of records when select all option is choosed 

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Paging && IsSelectAll) 

        { 

            var CurrentViewRecords = await Grid.GetCurrentViewRecords(); 

            await Grid.SelectRowsByRange(0, CurrentViewRecords?.Count - 1); 

        } 

    } 

 

   

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/164994/ze/DataGrid_Server1335525568  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#header-template 

https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

 

 

 

[Gordon]

I will give that a try...Thank you very much!

[Vignesh Natarajan]

Hi Gordon,  

Thanks for the update.  

Kindly validate the provided solution to select the visible records and all the records while using CheckBox column in Grid.  

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan