Free Trial Buy
    Your search did not match any results.
    Tree List

    Filter Modes

    Filter and search results depend on the filterMode option. The TreeList supports the following modes:

    • "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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    @(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.FullBranch) ) <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.FullBranch) .DataSource(new string[] { "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; } .option > span { width: 120px; display: inline-block; } .option > .dx-widget { display: inline-block; vertical-align: middle; width: 100%; max-width: 350px; }