Filter checkbox with custom List Items predefined to filter inside

[Matias Paco Viscarra]

I was dealing with some slow beahviour to load the checkbox of the filtering so was requested to use a static list of items to provide to the checkbox instead of perform the request that is slow. Do you have a way to provide this static List of items to the filterSettings checkbox?

<DataGrid @[email protected]

                  TItem="TransactionModel"

                  [email protected]

                  AllowPaging=true

                  ShowColumnChooser=true

                  CheckboxOnly=true

                  AllowSelection=true

                  AllowResizing=true

                  EnablePersistence=true

                  OnSelection=BindingContext.OnSelection>

    <DataGridColumns>

        <DataGridColumn Field=@nameof(TransactionModel.direction)

                                MinWidth="80px" />

        <DataGridColumn Field=@nameof(TransactionModel.status)

                                MinWidth="120px"

                                FilterSettings=@(new Syncfusion.Blazor.Grids.FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox})>

        </DataGridColumn>

    </DataGridColumns>

</DataGrid>

  

@code{

    private List<string> GetStatusList()

    {

        var statusList = new List<string> { "processed", "Error", "Recovered" };

        return statusList;

    }

[Monisha Saravanan]

Hi Matias,

Greetings from Syncfusion.

Query: “I was dealing with some slow behavior to load the checkbox of the filtering so was requested to use a static list of items to provide to the checkbox instead of perform the request that is slow. Do you have a way to provide this static List of items to the filterSettings checkbox?”

We suspect that you are expecting to customize the checkboxlist data. If so we suggest you to try using the below customized solution and check the below attached sample and code snippet for your reference.

Here we have assigned custom list data to the CheckBoxListData inside the FilterDialogOpening event argument. By this way we can assign the customized list data to the filter dialog.

Sample: https://blazorplayground.syncfusion.com/embed/BNBTNFNrrmVtQXmT?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<SfGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true">

    <GridEvents FilterDialogOpening="FilterDialogOpeningHandler" TValue="Order"></GridEvents>

    <GridFilterSettings Type="FilterType.CheckBox"></GridFilterSettings>

    <GridColumns>

    </GridColumns>

</SfGrid>

 

@code {

 

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

 

    public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args)

    {

       List<OrderData> newList = new List<OrderData>();

 

       newList.Add(new OrderData(10248, "VINET", new DateTime(1996, 07, 04), 32.38));

 

       args.CheckboxListData = newList;    

    }

}

Kindly get back to us if you have further queries.

Regards,

Monisha

[Matias Paco Viscarra]

Hi,

I appreciate the help in your example it's providing the checkbox filled for all the columns I required to just fill the filter checkbox with different items (static list) for one column since the remaining columns will use a different filter.

 What is required it's to provide a static list of items to the Filter checbox, the current behaviour is displaying the checbox filter with the values contained in the column but that process is too slow so I need to know if we have another option to provide a static List to the filter checkbox so it can display those items of the static list faster. 

The Filter checkbox is being implemented in just one column that is the reazon why I'm using the filterSettings inside the DataGridColumn please consider this. 

<DataGridColumn Field=@nameof(ExampleModel.status)

                                FilterSettings=@(new Syncfusion.Blazor.Grids.FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox})>

</DataGridColumn>

[Prathap Senthil]

Based on your requirement, we suggest using the following approach to check the condition for columnName and apply the checkbox list data to a specific column. This is the only way to replace the checkbox list data. Please refer to the code snippet and sample provided below for your reference.

<SfGrid @ref="Grid" TValue="OrderData" AllowFiltering="true" AllowSorting="true" AllowPaging="true" DataSource="@GridData">

    <GridPageSettings PageSize="6"></GridPageSettings>

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

    <GridEvents FilterDialogOpening="FilterDialogOpening" TValue="OrderData"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>

        <GridColumn Field=@nameof(OrderData.CustomerID) FilterSettings=@(new Syncfusion.Blazor.Grids.FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox}) HeaderText="Customer Name" Width="120"></GridColumn>

------

    </GridColumns>

</SfGrid>

 

@code {

 

    public List<OrderData> GridData { get; set; }

    SfGrid<OrderData>? Grid { get; set; }

    public void FilterDialogOpening(FilterDialogOpeningEventArgs args)

    {

        // here we have added a custom list for example

 

        if (args.ColumnName == "CustomerID")

        {

            List<OrderData> newList = new List<OrderData>();

 

            newList.Add(new OrderData(10248, "VINET", new DateTime(1996, 07, 04), 32.38));

 

            args.CheckboxListData = newList;

        }

 

 

    }

}

Sample: https://blazorplayground.syncfusion.com/embed/BtrTDvjIAmJnIxoX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regarding your query about the process being too slow, we need more information to assist you effectively. Could you please provide the following details:

• How many records are you using in the grid?
• Could you provide more details on how you define and manage the static list of items you want to use for the filter checkbox? Are there specific requirements or constraints for this list?

[Matias Paco Viscarra]

Hi, 

Thanks for your reply finally I was able to solve it using the FilterDialogOpening event as you proposed I was able to provide the list in this way:

<DataGrid @[email protected]

                  TItem="TransactionModel"

                  [email protected]

                  AllowPaging=true

                  ShowColumnChooser=true

                  CheckboxOnly=true

                  AllowSelection=true

                  AllowResizing=true

                  EnablePersistence=true

                  OnSelection=BindingContext.OnSelection>

    <DataGridColumns>

        <DataGridColumn Field=@nameof(TransactionModel.direction)

                                MinWidth="80px" />

        <GridEvents FilterDialogOpening=FilterDialogOpeningHandler TValue="TransactionModel"/>

        <DataGridColumn Field=@nameof(TransactionModel.status)

                                MinWidth="120px"

                                FilterSettings=@(new Syncfusion.Blazor.Grids.FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox})>

        </DataGridColumn>

    </DataGridColumns>

</DataGrid>

@code { 

    public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args)

    {

       List<TransactionModel> newList = new<TransactionModel>

       {

        new TransactionModel

               {

                   status = "status 1"

               }

      new TransactionModel

               {

                  status = "status 2"

               }

       };

       args.CheckboxListData = newList;    

    }

}

Kind regards.

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided solution was helpful. We are closing the thread now.