Filtering in ASP.NET CORE Tree Grid Component
21 Dec 20228 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 e-treegrid-filtersettings
tag helper.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="true" allowPaging="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
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, setallowFiltering
property ofe-treegrid-column
tag helper to false.
Filter hierarchy modes
TreeGrid provides support for a set of filtering modes with hierarchyMode
property of e-treegrid-filterSettings
tag helper.
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.
<ejs-dropdownlist id="mode" dataSource="@ViewBag.dropdata" placeholder="Select a Mode" change="onModeChange" index="0" popupHeight="220px">
<e-dropdownlist-fields text="mode" value="id"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function onModeChange(e) {
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
var mode = e.value;
treegrid.filterSettings.hierarchyMode = mode;
treegrid.clearFiltering();
}
</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 e-treegrid-filterSettings
tag helper.
@{
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 });
}
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="true">
<e-treegrid-filterSettings columns="filterColumns"></e-treegrid-filterSettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
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 operators
property of e-treegrid-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 |
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
operators
value is equal.
NOTE
You can refer to our
ASP.NET Core Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid exampleASP.NET Core Tree Grid example
to knows how to present and manipulate data.