Filter Nodes

To filter TreeView nodes, assign a filtering string to the searchValue option. The following code shows an example of the TreeView widget whose nodes can be filtered using the TextBox widget.

jQuery

HTML
<div id="textBoxContainer"></div>
<div id="treeViewContainer" style="display:block;"></div>
JavaScript
var fruitsVegetables = [{
    name: 'Fruits',
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: fruitsVegetables,
        keyExpr: 'name',
        displayExpr: 'name'
    });

    $("#textBoxContainer").dxTextBox({
        width: 300,
        mode: 'search',
        valueChangeEvent: 'keyup',
        onValueChanged: function (e) {
            $("#treeViewContainer").dxTreeView("option", "searchValue", e.value)
        }
    });
});

AngularJS

JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.filteringString = '';
        $scope.fruitsVegetables = [{
            name: 'Fruits',
            items: [
                { name: 'Apples' },
                { name: 'Oranges' }
            ]
        }, {
            name: 'Vegetables',
            items: [
                { name: 'Cucumbers' },
                { name: 'Tomatoes' }
            ]
        }];
    });
HTML
<div ng-controller="DemoController">
    <div dx-text-box="{
        width: 300,
        mode: 'search',
        valueChangeEvent: 'keyup',
        bindingOptions: {
            value: 'filteringString'
        }
    }"></div>
    <div dx-tree-view="{
        dataSource: fruitsVegetables,
        keyExpr: 'name',
        displayExpr: 'name',
        bindingOptions: {
            searchValue: 'filteringString'
        }
    }" style="display:block;"></div>
</div>

Knockout

JavaScript
var viewModel = {
    filteringString: ko.observable(''),
    fruitsVegetables: [{
        name: 'Fruits',
        items: [
            { name: 'Apples' },
            { name: 'Oranges' }
        ]
    }, {
        name: 'Vegetables',
        items: [
            { name: 'Cucumbers' },
            { name: 'Tomatoes' }
        ]
    }]
};

ko.applyBindings(viewModel);
HTML
<div data-bind="dxTextBox: {
    width: 300,
    mode: 'search',
    valueChangeEvent: 'keyup',
    value: filteringString
}"></div>
<div data-bind="dxTreeView: {
    dataSource: fruitsVegetables,
    keyExpr: 'name',
    displayExpr: 'name',
    searchValue: filteringString
}" style="display:block;"></div>
See Also