Data Grids / Data Management ▸ 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.

Options

Filter Mode

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