Blazorise DataGrid: Filtering
Filtering allows you to view particular records based on filter criteria.
Overview
Filtering in the Blazorise DataGrid can be done using the built-in filtering functionality or by using a custom filter component. The built-in filter allows you to quickly filter data by a specific column using a text box. You can also specify the filter mode, such as "contains" or "starts with".
Examples
Filtering
Use an attribute Filterable
to enable or disable automatic filtering in grid component.
Default method for filtering is Contains
. If you want to change it you can set the FilterMethod
attribute on data grid. Supported methods are:
Contains
search for any occurrence (default)StartsWith
search only the beginningEndsWith
search only the endingEquals
search must match the entire valueNotEquals
opposite of Equals
<DataGrid TItem="Employee" Data="" Filterable FilterMethod="DataGridFilterMethod.StartsWith" Responsive> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn> </DataGrid>
@code{ private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "Mladen" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } }; }
Column Filtering
Similar to the DataGrid filtering, it is also possible to use filtering on a per-column basis by specifying FilterMethod
on DataGridColumn
.
The following example sets the column filtering to FilterMethod.StartsWith
.
<DataGrid @ref="dataGrid" TItem="Employee" Data="" Responsive Filterable> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false" FilterMethod="DataGridFilterMethod.StartsWith"></DataGridColumn> </DataGrid>
@code{ private DataGrid<Employee> dataGrid; private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "MLaden" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } }; }
Menu Mode Filtering
Similar to the previous Column Filtering example, we can enable the DataGridFilterMode.Menu
to visually show the column filtering.
<DataGrid @ref="dataGrid" TItem="Employee" Data="" Responsive Filterable FilterMode="DataGridFilterMode.Menu"> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable="false" FilterMethod="DataGridFilterMethod.StartsWith"></DataGridColumn> <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable="false"></DataGridColumn> <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" /> </DataGrid>
@code{ private DataGrid<Employee> dataGrid; private List<Employee> employeeList = new() { new() { FirstName = "David", LastName = "Moreira", Gender = "M" }, new() { FirstName = "MLaden", LastName = "Macanovic", Gender="M" }, new() { FirstName = "John", LastName = "Doe", Gender = "M" }, new() { FirstName = "Ana", LastName = "Chamberlain", Gender = "F" }, new() { FirstName = "Jessica", LastName = "Winston", Gender="F" } }; }
Menu Mode Filtering : Template
When using Menu Mode Filtering you may also use the FilterTemplate
to customize the filter input to your liking.
<DataGrid @ref="dataGrid" TItem="Employee" Data="" Responsive Filterable FilterMode="DataGridFilterMode.Menu"> <DataGridColumns> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable="false" FilterMethod="DataGridFilterMethod.StartsWith"></DataGridColumn> <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable="false"></DataGridColumn> <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" /> </DataGridColumns> <FilterMenuTemplate> <Row> <Column ColumnSize="ColumnSize.Is4"> <Select TValue="DataGridFilterMethod" SelectedValue="@context.GetFilterMethod()" SelectedValueChanged="e => { context.FilterMethodChanged.InvokeAsync(e); }"> <SelectItem TValue="DataGridFilterMethod" Value="@DataGridFilterMethod.Contains">Contains</SelectItem> <SelectItem TValue="DataGridFilterMethod" Value="@DataGridFilterMethod.StartsWith">Starts With</SelectItem> <SelectItem TValue="DataGridFilterMethod" Value="@DataGridFilterMethod.EndsWith">Ends With</SelectItem> <SelectItem TValue="DataGridFilterMethod" Value="@DataGridFilterMethod.Equals">Equals</SelectItem> <SelectItem TValue="DataGridFilterMethod" Value="@DataGridFilterMethod.NotEquals">Not Equals</SelectItem> </Select> </Column> <Column ColumnSize="ColumnSize.Is4"> <TextEdit Text="@context.GetSearchValue()?.ToString()" TextChanged="@((newValue) => context.Column.Filter.SearchValue = newValue)" /> </Column> <Column ColumnSize="ColumnSize.Is4"> <Button Clicked="context.Filter" Color="Color.Primary"><Icon Name="IconName.Filter"></Icon> Filter</Button> <Button Clicked="context.ClearFilter" Color="Color.Light"><Icon Name="IconName.Clear"></Icon> Clear</Button> </Column> </Row> </FilterMenuTemplate> </DataGrid>
@code { private DataGrid<Employee> dataGrid; private List<Employee> employeeList = new() { new() { FirstName = "David", LastName = "Moreira", Gender = "M" }, new() { FirstName = "MLaden", LastName = "Macanovic", Gender = "M" }, new() { FirstName = "John", LastName = "Doe", Gender = "M" }, new() { FirstName = "Ana", LastName = "Chamberlain", Gender = "F" }, new() { FirstName = "Jessica", LastName = "Winston", Gender = "F" } }; }
Custom Filtering
Regular filter works on per field basis. To enable advanced search capabilities you can use an attribute CustomFilter
.
Filter API is fairly straightforward. All you need is to attach CustomFilter
to a function and bind search value to TextEdit
field. DataGrid will automatically respond to entered value.
Custom Filter: <TextEdit Text="" TextChanged=""></TextEdit> <DataGrid @ref="dataGrid" TItem="Employee" Data="" CustomFilter="" Responsive> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn> </DataGrid>
@code{ private DataGrid<Employee> dataGrid; private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "MLaden" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } }; private string customFilterValue; private Task OnCustomFilterValueChanged( string e ) { customFilterValue = e; return dataGrid.Reload(); } private bool OnCustomFilter( Employee model ) { // We want to accept empty value as valid or otherwise // datagrid will not show anything. if ( string.IsNullOrEmpty( customFilterValue ) ) return true; return model.FirstName?.Contains( customFilterValue, StringComparison.OrdinalIgnoreCase ) == true; } }
Custom Column Filtering
Similar to the DataGrid custom filtering, it is also possible to use custom filtering on a per-column basis.
You can define your editor with custom filtering to filter column values. You can see the dropdown menu to filter by gender in the following example by specifying <FilterTemplate>
on DataGridColumn
.
<DataGrid TItem="Employee" Data="" Filterable Responsive> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn> <DataGridSelectColumn CustomFilter="" TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" /> </DataGrid>
@code{ private List<Employee> employeeList = new() { new() { FirstName = "David", Gender = "M" }, new() { FirstName = "Mladen", Gender = "M" }, new() { FirstName = "John", Gender = "M" }, new() { FirstName = "Ana", Gender = "F" }, new() { FirstName = "Jessica", Gender = "F" } }; private bool OnGenderCustomFilter( object itemValue, object searchValue ) { if ( searchValue is string genderFilter ) { return genderFilter == "*" || genderFilter == itemValue?.ToString(); } return true; } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.