Filter Menu in ASP.NET MVC Tree Grid Component
21 Dec 20226 minutes to read
You can enable filter menu by setting the Type
of FilterSettings
as Menu. The filter menu UI will be rendered based on its column type, which allows you to filter data.
You can filter the records with different operators.
@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.TreeGrid.FilterType.Menu)).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();
}
NOTE
AllowFiltering
must be set as true to enable filter menu.
SettingAllowFiltering
property ofColumn
as false will prevent filter menu rendering for a particular column.
Custom component in filter menu
The Filter.ui
property of Column
is used to add custom filter components to a particular column. To implement custom filter ui, define the following functions:
- create: Creates custom component.
- write: Wire events for custom component.
- read: Read the filter value from custom component.
In the following sample, dropdown is used as custom component in the duration column.
@{
var filteruiTemplate = new
{
ui = new
{
create = "create",
write = "write",
read = "read"
}
};
}
@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.TreeGrid.FilterType.Menu)).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").Filter(filteruiTemplate).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();
}).ChildMapping("Children").TreeColumnIndex(1).AllowPaging().Render()
<script>
var dd = document.createElement("input");
dd.setAttribute('id', 'Duration');
function create(args) {
var dataSource = ['All', '1', '3', '4', '5', '6', '8', '9', '11', '12'];
dd = new ej.dropdowns.DropDownList({
dataSource: dataSource,
value: 'All',
change: function (e) {
var valuenum = +e.value;
var id = this.element.id;
let value = e.value;
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
if (value !== 'All') {
treegrid.filterByColumn(id, 'equal', valuenum);
} else {
treegrid.removeFilteredColsByField(id);
}
}
});
var input = ejs.base.createElement('input', { id: 'Duration' });
args.target.prepend(input)
dd.appendTo(args.target.querySelector('#Duration'));
}
function write(args) {
dd.value = args.filteredValue;
}
function read(args) {
args.fltrObj.filterByColumn(args.column.field, args.operator, parseInt(dd.value));
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.dataSource = tree;
return View();
}
Enable different filter dialog for a column
You can use both Menu and Excel filter in a same TreeGrid. To do so, set the type as Menu or Excel using Filter
property of Column
.
In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the Filter
property of Column
.
@Html.EJS().TreeGrid("TreeGrid").Height(275).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.TreeGrid.FilterType.Menu)).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).Filter(new { type = "Excel" }).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 ActionResult 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 ourASP.NET MVC Tree Grid example
to knows how to present and manipulate data.