Excel Like Filter in ASP.NET CORE Tree Grid Component

21 Dec 20222 minutes to read

You can enable Excel like filter by defining. The type as Excel using e-treegrid-filterSettings tag helper .The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="Excel"></e-treegrid-filtersettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="80"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" actionBegin="actionBegin" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="Excel"></e-treegrid-filtersettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="80"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<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 Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.