Tree List - Filter Modes

Filter and search results depend on the filterMode property.

The TreeList supports the following modes:

"matchOnly"
The results include only rows that meet the filter condition.
"withAncestors"
The results include rows that meet the filter condition and their ancestors.
"fullBranch"
The results include rows that meet the filter condition and their ancestors and descendants.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().TreeList() .ID("employees") .DataSource(new JS("employees")) .KeyExpr("ID") .ParentIdExpr("Head_ID") .Columns(columns => { columns.Add() .DataField("Title") .Caption("Position") .DataType(GridColumnDataType.String); columns.Add() .DataField("Full_Name") .DataType(GridColumnDataType.String); columns.Add() .DataField("City") .DataType(GridColumnDataType.String); columns.Add() .DataField("State") .DataType(GridColumnDataType.String); columns.Add() .DataField("Mobile_Phone") .DataType(GridColumnDataType.String); columns.Add() .DataField("Hire_Date") .DataType(GridColumnDataType.Date); }) .SearchPanel(s => s.Visible(true) .Text("Manager") ) .ShowRowLines(true) .ShowBorders(true) .ColumnAutoWidth(true) .FilterMode(TreeListFilterMode.MatchOnly) ) <script src="~/Scripts/data/employees.js"></script> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Filter Mode</span> @(Html.DevExtreme().SelectBox() .Value(TreeListFilterMode.MatchOnly) .InputAttr("aria-label", "Filter Mode") .DataSource(new[] { "matchOnly", "withAncestors", "fullBranch" }) .OnValueChanged(@<text> function(data) { var treeList = $("#employees").dxTreeList("instance"); treeList.option("filterMode", data.value); } </text> ) ) </div> </div>

using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class TreeListController : Controller { public ActionResult FilterModes() { return View(); } } }

#employees { height: 440px; } .options { margin-top: 20px; padding: 20px; background: #f5f5f5; } .options .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; display: flex; align-items: center; } .option > span { width: 120px; display: inline-block; } .option > .dx-widget { display: inline-block; vertical-align: middle; width: 100%; max-width: 350px; }