Filtering in ASP.Net MVC Grid Component

29 Mar 20237 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 FilterSettings property.

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowFiltering(true).Columns(col =>
{
  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
  col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

}).AllowPaging().Render()
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, set AllowFiltering of Column to false.

Initial filter

To apply the filter at initial rendering, set the filter Predicate object in FilterSettings property of Column.

@{
    List<object> filterColumns = new List<object>();
    filterColumns.Add(new { field = "EmployeeID", matchCase = false, @operator = "equal", predicate = "and", value = 1 });
    filterColumns.Add(new { field = "ShipCountry", matchCase = false, @operator = "startswith", predicate = "and", value = "Denmark" });
}

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowFiltering(true).Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
   col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

}).FilterSettings(filter => filter.Columns(filterColumns)).AllowPaging().Render()
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 Operators property of FilterSettings.

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.

WildcardFilter

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 Grid filterSettings.
  • 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.

LIKEFilter

NOTE

By default, the Operators value is equal.

See Also