Filter Chain in Blazor Grid
One way to filter the grid data is by creating a filter chain. When filtering is enabled in Blazor Grid component, a filtering panel will appear above grid header. Within this panel you can add multiple filters for each column present in the Grid. Depending on the chosen filter type and conditions set, you can filter the grid data on demand.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This sample shows how to filter the Grid data using Filter Chain with multiple different conditions. Each column can have a filter type specified: Date, Numeric, String or Custom.
By clicking on the filter panel (above the grid header), a pop-up window will appear listing all columns that have filtering enabled. In this example, there are multiple columns with different filtering options. Depending on the FilterType property value, a different set of filtering conditions becomes available.
Once filter condition is set, comparison operator and matching value, clicking on Apply button will filter the Grid data. To change the matching value, click on filter label. The filter label will change stating the column name, comparison operator and matching value. You can add multiple filters in a chain, which are processed from left to right. To remove a filter, click on delete button (x), shown after the filter label.
How to Create a Filter Chain in Blazor Grid
At first, you need to enable filtering in the IntegralUI Grid component by setting the AllowFilter property to true. This allows filtering to take place on general level. Next, you need to specify which columns will have filtering by setting these properties for specific column:
- AllowFilter - determines whether column has filtering enabled, by default is false
- FilterType - specifies the type of filter in use, can be: Date, Numeric, String or Custom
- FilterParameters - specifies different filter parameters in use, like: CaseSensitive, Conditions, Filter etc.
Setting the FilterParameters is required for creation of custom filtering where you need to provide your own Filter method by which grid data is filtered.
Not all columns can have filtering enabled. You can chose by which column you want to use the filtering option. Once filtering is enabled, clicking anywhere in filtering panel, a list of available columns will appear, to chose from. Depending on previously set filter type for chosen column, a different window will appear where you can set the condition by selection the comparison operator and filter value.
Clicking on Apply button will confirm the creation of the filter item, which will appear inside the filtering panel. This item consist of a label stating the column name, condition and filter value, and a close button for removal from the filter chain. Each subsequent filter will appear next in line, in this way creating a filter chain. To change the current filter settings, you can click again on filter label and modify the condition and value.
The Grid data is filtered by each filter item in the chain. Filters are applied from left to right, starting with the first item in filtering panel. To remove a filter from the chain, simply click on delete button (x).
For filtering operations, internally the IntegralUIFilterService is in use, which provides many ways to filter data based on date, numeric or string values using multiple conditions with AND / OR combinations.
Different Filter Types
There are three built-in filter types to choose from:
- Date - used to filter the grid data by selecting a DateTime value
- Numeric - used to filter the grid data by numeric value
- String - used to filter the grid data by entering a matching string value
There is also an option to create a Custom filter type, where you can set your own conditions by creation a custom action method with specifying the comparison operator and filter value. More information is available below, under Custom Filter section.
By default, if column's FilterType property is not specified it is presumed it is set to String. Also, the case sensitive is set by default to false. If you want to enable it, set the CaseSensitive property within FilterParameters, to true.
Date Filter
The Date filtering window allows you to create a condition by choosing the comparison operator and a DateTime value from a DatePicker component. You can select one of these available operators:
- GreaterThan - checks whether the grid data value is greater than the filter value
- GreaterThanOrEqual - checks whether the grid data value is greater than or equal to the filter value
- LessThan - checks whether the grid data value is less than the filter value
- LessThanOrEqual - checks whether the grid data value is less than or equal to the filter value
- Equal - checks whether the grid data value is equal to the filter value
- NotEqual - checks whether the grid data value is not equal to the filter value
Numeric Filter
The Numeric filtering window has the same selection of comparison operators available, like previously for the Date filter, only the filter value is of numeric type. An input box is available where you can enter a number by which filtering is processed.
String Filter
The String filtering window allows you to create a condition by choosing the comparison operator and a string value inside an input box. You can select one of these available operators:
- BeginsWith - checks whether the grid data value begins with the filter value
- Contains - checks whether the grid data value contains the filter value as substring
- DoesNotContain - checks whether the grid data value does not contains the filter value
- EndsWith - checks whether the grid data value ends with the filter value
- Equal - checks whether the grid data value is equal to the filter value
- NotEqual - checks whether the grid data value is not equal to the filter value
By default, case sensitive is not enabled for this filter. To enable it, you need to set the CaseSensitive property within FilterParameters for specific column, to true.
Custom Filter
With custom filtering you can provide your own UI content and functionality using the FilterTemplate and custom logic set in your own Filter function.
In you can'’'t use any of available built-in filters, you can create your own custom filter. For this purpose, you need to:
- Set the FilterType to Custom
- Add your own HTML content inside the FilterTemplate for specified column
- Create a custom action method and apply it to the Filter property of the FilteringParameters
In this example, "ShipMode" column uses a custom filter. Inside the FilterTemplate, a checked list is created showing all options available using the IntegralUI List component. The filter in this way will consist of multiple values, the ones that are checked in the list.
Now the action method used for filtering will check whether the grid data value is of DeliveryOption type (for this example), and whether that option is checked inside the list. If this condition is fulfilled, the method will return true, otherwise false.
Based on this method, when filtering is processed by the Grid component, it will determine whether a row passes the condition set. If true, the row will remain visible inside the Grid, otherwise it will be excluded from the current view.
Filter Events in Blazor Grid
Whenever filtering is processed, the Filtered event is fired. You can handle this event in your code, and set custom actions based on data that is currently present in the Grid. To get a list of all records that passes the filter conditions, you can use the GetFullList method.
Filtering Manually from Code
Using the Filter Chain feature provides a convenient and user friendly way to filter the Grid data. In addition, the IntegralUI Grid component allows you to filter the data directly from code, by calling the Filter method where you set your own filtering parameters and specifying the column by which you want to filter the data.
You can create multiple conditions and provide a formula where you can combine them using logical AND/OR operators. Internally, calling the Filter method uses the IntegralUIFilterService for filtering purposes.
Conclusion
You can filter the data n Blazor Grid component by creating a Filter Chain. This feature allows you to apply multiple different filters by clicking on filtering panel. Depending on specified filter type, a corresponding filtering window will appear where you can chose the comparison operator and filter value.
In addition, you can create your own custom filtering operation by providing the layout composed of custom HTML elements or other Blazor components and the logic by creating your own filter method.
Grid component is part of IntegralUI for Blazor, a suite of native Blazor components that you can use to develop applications in Blazor .NET framework.