Filtering is an essential feature in the DataGrid control. It lets us view the rows based on our required criteria. Excel-like filtering support provides users more flexibility to filter the rows as needed, easily. We are happy to announce that we have provided Excel-like filtering support to our Flutter DataGrid in the Essential Studio 2022 Volume 3 release.
In this blog, we will walk through filtering in columns using the new Excel-like filtering feature.
Getting started
You can enable excel-like filtering by just setting the SfDataGrid.allowFiltering property to true. By enabling this property, you can see the filter icons in the column header.
When clicking the filter icon, the Excel-like filtering pop-up will appear.
Filtering options
The Excel-like filtering pop-up depicts most of the options from Excel, being inspired by the Excel filter pop-up.
The filter pop-up consists of the following UI parts:
- Sorting (both directions)—Easily sort the data in ascending or descending order.
- Clear filter—Clear the filter applied to the column.
- Advanced filter option.
- Checkbox filtering.
Checkbox filtering
Checkbox filtering is a straightforward approach to searching for the required data from the available data in a column. You can choose the data through the checked ListBox in the filter pop-up. A blank item is added automatically if the column has null or empty data.
The following .gif image depicts how to apply the filtering using the checked ListBox option.
Advanced filter option
The advanced filter options are available based on the data type of the columns. The data types with the advanced filtering option are:
- Text
- Number
- Date
The advanced filter option helps us to apply multiple filter conditions with the required filter criteria. Each type of filter has its own set of filter conditions to apply filtering with ease. The following table shows the list of filter conditions that are supported in advanced filter options.
| Text | Number | Date |
|
|
|
You can also choose whether the AND or OR logical operator should be applied between the two filter conditions you applied in the advanced filter options.
The following GIF depicts how to apply multiple filter conditions to a column.
You can retrieve just the filtered rows using the DataGridSource.effectiveRows property.
Callbacks
The following callbacks are implemented to listen when filtering is applied through an Excel-like filter pop-up:
- onFilterChanging—This is invoked when the filtering is being applied to a specific column.
- onFilterChanged—This is invoked after the filtering is applied to the specific column.
Programmatic filtering
DataGrid also lets users apply filtering programmatically without using Excel-like UI filtering. This can be done by adding the filter conditions along with the respective column name to the DataGridSource.filterConditions map collection. In the map collection, the key defines the columnName and the values define the list of FilterCondition.
The following methods can be used to do the filtering programmatically:
- DataGridSource.addFilter—Adds the filter conditions to a specific column.
- DataGridSource.removeFilter—Removes the filter condition from a specific column.
- DataGridSource.clearFilters—Clears all the filter conditions from all the columns or specific columns.
The following example shows how to add a filter condition programmatically.
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: SfDataGrid(source: _employeeDataSource, columns: [
GridColumn(
columnName: 'ID',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Name',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Designation',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Salary',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
))),
]),
),
MaterialButton(
child: Text('Add Filter'),
onPressed: () {
_employeeDataSource.addFilter('ID',
FilterCondition(type: FilterType.lessThan, value: 1005));
}),
],
);
}Resource
For more details, refer to the project Excel-like filtering in Flutter DataGrid.
Conclusion
I hope you found this blog interesting. You may browse Excel-like filtering in Flutter DataGrid UG for more information on filtering features and examples.
Existing customers can obtain the most recent version of Essential Studio by visiting the License and Downloads page. If you are not already a Syncfusion customer, you may sign up for a 30-day free trial to explore what features are available.
Also, you can contact us via our support forums, support portal, or feedback portal with any questions. We are always happy to help you!
