Filtering in Treelist and resetting the selected item

[Arvind]

Hi,

Based on the demo in http://demos.telerik.com/aspnet-mvc/dialog/treeview-integration. 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();">

   @(Html.Kendo().TreeView().Name("TreeViewDropDown")
    .AutoBind(false).Events(ev => ev.DataBound("treeViewDataBound"))
    .DataTextField("text")
   .BindTo(Model.LocationList).Events(e=>e.Select("onSelection"))
    )
</div >

<script>
    $(document).ready(function () {
        $("#LocationName").on("input", function () {
            $('#divLocationId').slideDown(200);
            var query = this.value.toLowerCase();
            var dataSource = $("#TreeViewDropDown").data("kendoTreeView").dataSource;
            filter(dataSource, query);
            matchColors(query);
        });
    });

    function onSelection(e)
    {
        if (e.node.childElementCount > 1) {
            e.preventDefault();
            return;
        }
        $("#LocationName").val(e.node.innerText);
        $("#locationId").val(e.node.innerText);
    }

    function ShowAll()
    {
        $('#divLocationId').slideDown(200);
        var dataSource = $("#TreeViewDropDown").data("kendoTreeView").dataSource;
        filter(dataSource, "");
    }

     function treeViewDataBound(e) {
        e.sender.expand(e.node);
    }

    function filter(dataSource, query) {
        var hasVisibleChildren = false;
        var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();

        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>");
            $(this).html(newText);
        });
    }

    $.expr[':'].containsIgnoreCase = function (n, i, m) {
        return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function hideAll() {
        $('#divLocationId').slideUp('fast');
    }
    $(document).ready(function () {
        var grid = $("#Feedback").data("kendoGrid");
        if (grid != undefined || grid != null)
            DisplayNavigationMessage("Feedback");
        grid = $("#FeedbackQuestions").data("kendoGrid");
        if (grid != undefined || grid != null)
            DisplayNavigationMessage("FeedbackQuestions");
    });
    $("body").click(function (e) {
        if (e.target.className != "dropdowndiv" && e.target.className != "k-icon k-i-expand" &&
            e.target.className != "k-icon k-i-collapse" && e.target.className != "k-button AllLoad")
        {
            hideAll();
        }
    });
</script>

 

[Konstantin Dikov]

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:

• http://demos.telerik.com/aspnet-mvc/dialog/treelist-integration

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.


Regards,
Konstantin Dikov
Telerik by Progress