Your search did not match any results.

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.

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; }