Filtering in Treelist and resetting the selected item

2 posts, 0 answers
  1. Arvind
    Arvind avatar
    7 posts
    Member since:
    Aug 2016

    Posted 19 Sep 2016 Link to this post


    Based on the demo in i am trying to achieve a filter in the treelist control. But the data i am binding in the treelist has about 5000 records, hence the filtering takes about 7 seconds, please advise if the code provided in the demo is suitable for this scenario or do i need to use a different approach.

    Also i am using the selected property of the item to decide on the selection in the treelist, and setting the selected item text to a textbox, if i change the textbox would want to unselect the selected item in the treelist, is this possible.

    @Html.Kendo().TextBoxFor(t => t.Name).Name("LocationName")<button id="ShowAll" class="k-button AllLoad" onclick="ShowAll();">Show all</button>
    <div class="dropdowndiv" id="divLocationId" style="display:none; overflow:auto; text-align: left; z-index:999999; position:absolute;background-color:white;border:1px solid #c3d9f9;width:488px;padding-left:2px" onblur="hideAll();">
        .AutoBind(false).Events(ev => ev.DataBound("treeViewDataBound"))
    </div >
        $(document).ready(function () {
            $("#LocationName").on("input", function () {
                var query = this.value.toLowerCase();
                var dataSource = $("#TreeViewDropDown").data("kendoTreeView").dataSource;
                filter(dataSource, query);
        function onSelection(e)
            if (e.node.childElementCount > 1) {
        function ShowAll()
            var dataSource = $("#TreeViewDropDown").data("kendoTreeView").dataSource;
            filter(dataSource, "");
         function treeViewDataBound(e) {
        function filter(dataSource, query) {
            var hasVisibleChildren = false;
            var data = dataSource instanceof &&;
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                var text = item.text.toLowerCase();
                var itemVisible =
                    query === true // parent already matches
                    || query === "" // query is empty
                    || text.indexOf(query) >= 0; // item text matches query
                var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches
                hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible;
                item.hidden = !itemVisible && !anyVisibleChildren;
            if (data) {
                // re-apply filter on children
                dataSource.filter({ field: "hidden", operator: "neq", value: true });
            return hasVisibleChildren;
        function matchColors(query, element) {
            $("#TreeViewDropDown .k-in:containsIgnoreCase('" + query + "')").each(function () {
                var index = $(this).html().toLowerCase().indexOf(query.toLowerCase());
                var length = query.length;
                var original = $(this).html().substr(index, length);
                var newText = $(this).html().replace(original, "<span class='query-match'>" + original + "</span>");
        $.expr[':'].containsIgnoreCase = function (n, i, m) {
            return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
        function hideAll() {
        $(document).ready(function () {
            var grid = $("#Feedback").data("kendoGrid");
            if (grid != undefined || grid != null)
            grid = $("#FeedbackQuestions").data("kendoGrid");
            if (grid != undefined || grid != null)
        $("body").click(function (e) {
            if ( != "dropdowndiv" && != "k-icon k-i-expand" &&
       != "k-icon k-i-collapse" && != "k-button AllLoad")


  2. Konstantin Dikov
    Konstantin Dikov avatar
    2126 posts

    Posted 21 Sep 2016 Link to this post

    Hello Arvind,

    Since there is no built-in filtering for the TreeView and since it will traverse the child node to determine whether or not to hide the parent nodes, with too many records this will be indeed a slow operation. To speed things up a little you can remove the call to the matchColors method, although that it is a fast operation, on too many records it might cause some delay. 

    I would personally recommend that you use the TreeList approach with its built-in filtering mechanism:
    As for resetting the selection, you can clear the selected items in the TreeView/TreeList within the Open event of the Dialog, where you could use the value of the TextBox to determine whether or not to remove the selection. You can also use the value of the TextBox to select an item with matching value within the control.

    Hope this helps.

    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top