Filtering in ASP.Net Core Grid Component
29 Mar 20238 minutes to read
Filtering allows you to view particular records based on filter criteria. To enable filtering in the Grid, set the allowFiltering
to true. Filtering options can be configured through e-grid-filterSettings
tag helper.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true" >
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Shio City" width="100"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
NOTE
- You can apply and clear filtering by using filterByColumn and clearFiltering methods.
* To disable filtering for a particular column, setallowFiltering
property of e-grid-column as false.
Initial filter
To apply the filter at initial rendering, set the filter Predicate object in columns
property of e-grid-filterSettings tag helper.
@{
List<object> filterColumns = new List<object>();
filterColumns.Add(new { field = "ShipCity", matchCase = false, @operator = "startswith", predicate = "and", value = "Berlin" });
filterColumns.Add(new { field = "ShipName", matchCase = false, @operator = "startswith", predicate = "and", value = "Simons bistro" });
}
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true" height="273">
<e-grid-filterSettings columns="filterColumns"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Filter operators
The filter operator for a column can be defined in the operator in columns
property of e-grid-filterSettings tag helper.
The available operators and its supported data types are:
Operator | Description | Supported Types |
---|---|---|
startswith | Checks whether the value begins with the specified value. | String |
endswith | Checks whether the value ends with the specified value. | String |
contains | Checks whether the value contains the specified value. | String |
doesnotstartwith | Checks whether the value does not begin with the specified value. | String |
doesnotendwith | Checks whether the value does not end with the specified value. | String |
doesnotcontain | Checks whether the value does not contain the specified value. | String |
equal | Checks whether the value is equal to the specified value. | String | Number | Boolean | Date |
notequal | Checks for values not equal to the specified value. | String | Number | Boolean | Date |
greaterthan | Checks whether the value is greater than the specified value. | Number | Date |
greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Number | Date |
lessthan | Checks whether the value is less than the specified value. | Number | Date |
lessthanorequal | Checks whether the value is less than or equal to the specified value. | Number | Date |
isnull | Returns the values that are null. | String | Number | Date |
isnotnull | Returns the values that are not null. | String | Number | Date |
isempty | Returns the values that are empty. | String |
isnotempty | Returns the values that are not empty. | String |
between | Filter the values based on the range between the start and end specified values. | Number | Date |
Wildcard and LIKE operator filter
Wildcard and LIKE filter operators filters the value based on the given string pattern, and they apply to string-type columns. But it will work slightly differently.
Wildcard filtering
The Wildcard filter can process one or more search patterns using the “*” symbol, retrieving values matching the specified patterns.
- The Wildcard filter option is supported for the DataGrid that has all search options.
For example:
Operator | Description |
---|---|
a*b | Everything that starts with “a” and ends with “b”. |
a* | Everything that starts with “a”. |
*b | Everything that ends with “b”. |
a | Everything that has an “a” in it. |
ab* | Everything that has an “a” in it, followed by anything, followed by a “b”, followed by anything. |
LIKE filtering
The LIKE filter can process single search patterns using the “%” symbol, retrieving values matching the specified patterns. The following Grid features support LIKE filtering on string-type columns:
- Filter Menu
- Filter Bar with the
filterSettings.showFilterBarOperator
property enabled on the GridfilterSettings
. - Custom Filter of Excel filter type.
For example:
Operator | Description |
---|---|
%ab% | Returns all the value that are contains “ab” character. |
ab% | Returns all the value that are ends with “ab” character. |
%ab | Returns all the value that are starts with “ab” character. |
NOTE
By default, the operator value is equal in
columns
property of e-grid-filterSettings tag helper.