# grid-default-filtering

> Product grid combines paging with configurable filter-bar operators and filter modes across category, product, and quantity columns.

**Framework:** blazor  **Component:** Grid  **Variant:** default-filtering

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/grid-default-filtering.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Grids
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-default-filtering/DataSource.cs

```cs
namespace BlazorDemos.Pages.Grid
{
    public class Category
    {

        public Category()
        {

        }
        public Category(string CategoryName, string ProductName, string QuantityPerUnit, bool Discontinued, short UnitsInStock)
        {

            this.CategoryName = CategoryName;
            this.ProductName = ProductName;
            this.QuantityPerUnit = QuantityPerUnit;
            this.UnitsInStock = UnitsInStock;
            this.Discontinued = Discontinued;
        }

        public static IReadOnlyList<Category> GetAllRecords()
        {
            List<Category> category = new List<Category>();
            category.Add(new Category("Beverages", "Chai", "10 boxes x 20 bags", true, 39));
            category.Add(new Category("Condiments", "Chef Anton's Cajun Seasoning", "48 - 6 oz jars", false, 53));
            category.Add(new Category("Dairy Categories", "Raclette Courdavault", "5 kg pkg.", false, 79));
            category.Add(new Category("Grains/Cereals", "Wimmers gute Semmelkndel", "20 bags x 4 pieces", true, 22));
            category.Add(new Category("Meat/Poultry", "Pt chinois", "24 boxes x 2 pies", false, 115));
            category.Add(new Category("Seafood", "Spegesild", "4 - 450 g glasses", true, 95));
            return category;
        }

        public string? CategoryName { get; set; }
        public string? ProductName { get; set; }
        public string? QuantityPerUnit { get; set; }
        public short UnitsInStock { get; set; }
        public bool Discontinued { get; set; }
    }
}

```

### src/components/grid-default-filtering/Grid.razor

```razor
@page "/datagrid/filtering"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using BlazorDemos.Pages.Grid

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid @ref="Grid" DataSource="@GridData" AllowFiltering="true" AllowPaging="true">
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridFilterSettings ShowFilterBarOperator="@showFilterBarOperator" Mode="@filterMode"></GridFilterSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(Category.CategoryName) HeaderText="Category Name" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Category.ProductName) HeaderText="Product Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(Category.QuantityPerUnit) HeaderText="Quantity per Unit" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Category.UnitsInStock) HeaderText="Units in Stock" Width="150" TextAlign="TextAlign.Right"></GridColumn>
                    <GridColumn Field=@nameof(Category.Discontinued) HeaderText="Discontinued" Width="150" TextAlign="TextAlign.Center" Type="ColumnType.Boolean">
                        <FilterTemplate>
                            @{
                                var FilterContext = (context as PredicateModel);
                                bool? fValue = string.IsNullOrEmpty(FilterContext?.Value?.ToString()) ? null : (bool?)FilterContext.Value;
                            }
                            <SfCheckBox Checked="@fValue"  EnableTriState="true" ValueChange="OnValueChange" TChecked="bool?"></SfCheckBox>
                        </FilterTemplate>
                    </GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
@code{
    public SfGrid<Category>? Grid { get; set; }
    public List<Category>? GridData { get; set; }
    private bool showFilterBarOperator { get; set; }
    private bool isChecked = false;
    private FilterBarMode filterMode = FilterBarMode.OnEnter;
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        if (args.Value != null)
        {
            showFilterBarOperator = (bool)args.Value;
            filterMode = showFilterBarOperator ? FilterBarMode.Immediate : FilterBarMode.OnEnter;
        }
    }
    protected override void OnInitialized()
    {
        GridData = Category.GetAllRecords().ToList();
    }
    private async Task OnValueChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)
    {
        if(Grid != null){
        if (args.Checked != null)
            await Grid.FilterByColumnAsync("Discontinued", "equal", args.Checked); //Perform filtering while check/uncheck the checkbox
        else
            await Grid.ClearFilteringAsync("Discontinued");
        }
    }
}
```