Syncfusion AI Assistant

How can I help you?

Filtering in ASP.NET MVC Tree Grid Component

21 Dec 20226 minutes to read

Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the AllowFiltering to true. Filtering options can be configured through FilterSettings.

@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
   col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();

}).ChildMapping("Children").TreeColumnIndex(1).AllowPaging().Render()
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

You can apply and clear filtering by using filterByColumn and clearFiltering methods.

To disable filtering for a particular column, set AllowFiltering property of Column to false.

Filter hierarchy modes

TreeGrid provides support for a set of filtering modes with HierarchyMode of FilterSettings property.
The below are the type of filter mode available in TreeGrid.

  • Parent : This is the default filter hierarchy mode in TreeGrid. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered records only displayed.

  • Child : The filtered records are displayed with its child record, if the filtered records not have any child record then the filtered records only displayed.

  • Both : The filtered records are displayed with its both parent and child record, if the filtered records not have any parent and child record then the filtered records only displayed.

  • None : The filtered records are only displayed.

@Html.EJS().DropDownList("FilterMode").DataSource((IEnumerable<object>)ViewBag.dropdata).Value("Parent").Width("100").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "id", Value = "mode" }).Change("onChange").Render()


@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
   col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();

}).ChildMapping("Children").AllowPaging().TreeColumnIndex(1).Render()

<script>
    function onChange(e) {
        var mode = e.value;
        var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
        treegrid.filterSettings.hierarchyMode = mode;
    }
</script>
public ActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    ViewBag.dropdata = new List<object>() {
        new { id= "Parent", mode= "Parent" },
        new { id= "Child", mode= "Child" },
        new { id= "Both", mode= "Both" },
        new { id= "None", mode= "None" },
    };
    return View();
}

Initial filter

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

@{
    List<object> filterColumns = new List<object>();
    filterColumns.Add(new { field = "TaskName", matchCase = false, @operator = "startswith", predicate = "and", value = "plan" });
    filterColumns.Add(new { field = "Duration", matchCase = false, @operator = "equal", predicate = "and", value = 5 });
}

@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().FilterSettings(filter => filter.Columns(filterColumns)).DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
   col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();

}).ChildMapping("Children").AllowPaging().TreeColumnIndex(1).Render()
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Filter operators

The filter operator for a column can be defined in the Operator property of Columns in 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
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

NOTE

By default, the Operator Columns value is equal.

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.