Excel Like Filter in ASP.NET MVC Tree Grid Component

21 Dec 20221 minute to read

You can enable Excel like filter by defining.
Type of FilterSettings as Excel.The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.

@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.TreeGrid.FilterType.Excel)).DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(140).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();
   col.Field("Progress").HeaderText("Progress").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();
}

Change default excel filter operator

You can change the default excel-filter operator by changing the column operator as contains from startsWith in the actionBegin event.

@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.TreeGrid.FilterType.Excel)).DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(140).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();
   col.Field("Progress").HeaderText("Progress").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();

}).ChildMapping("Children").AllowPaging().TreeColumnIndex(1).actionBegin("actionBegin").Render()
<script>
function actionBegin(args){
if(args.requestType === 'filtersearchbegin' && args.column.type === "string"){
args.operator = 'contains';
}
}
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

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.