Filtering

Smart.Grid provides multiple ways to filter grid data programmatically or by using visual menu.

Most of the filtering properties are set using the GridFiltering() object.

Enable Filtering

To enable filtering, set the Enabled property of the GridFiltering() object to true.
To set filtering rules programmatically, use the Filtering array property of the GridFiltering() object.

The filtering rules can also be set by clicking on the 'filter' icon in the Column Header

@inject WeatherForecastService ForecastService

<Grid DataSource="@forecast"  Filtering="@filtering">
  <Columns>
    <Column DataField="Date" Label="Date" AllowReorder="true"> </Column>
    <Column DataField="TemperatureC" Label="Temp. (C)" AllowReorder="true"> </Column>
    <Column DataField="TemperatureF" Label="Temp. (F)" AllowReorder="true"> </Column>
    <Column DataField="Summary" Label="Summary" AllowReorder="true"> </Column>
  </Columns>
</Grid>

@code{
  GridFiltering filtering = new GridFiltering(){
    Enabled = true,
    Filter = new string[][]
    {
        new string[] { "Summary", "contains Freezing or contains Warm" }
    }
  };

  private WeatherForecast[] forecast;

  protected override async Task OnInitializedAsync()
  {
      forecast = await ForecastService.GetForecastAsync(DateTime.Now);
  }
}

Filtering with Filter Row

The built-in Filter Row allows users to easily set multi-column filtering rules and search the grid

        GridFiltering filtering = new GridFiltering(){
          Enabled = true,
          FilterRow = new GridFilteringFilterRow(){ Visible = true, AutoApplyModeDelay=50}
        };
      

Filtering with Grid Header

Another way to allows users to set filtering rules is set the built-in Grid Header Menu, which contains its own Filter Panel.

<Grid DataSource="@forecast"  Filtering="@filtering" Header="@header">
  ....
</Grid>

@code{
  GridHeader header = new GridHeader() { Visible = true };
  ....
}