Which one is better suited for binding KendoUI TreeView - kendo.observableHierarchy or kendo.data.HierarchicalDataSource?

Question

I am working on optimizing an application which is using Kendo TreeView to show lots of hierarchical data. Currently it is coming really slow as the number of elements are high. Current implementation is based on MVVM approach of KendoUI utilizing kendo.observableHierarchy. I want to know if I switch over to kendo.data.HierarchicalDataSource. Will I have any performance benefit? In general what is the recommended approach?

I have used following type of code for current implementation.

 var viewModel = kendo.observable({
    isVisible: true,
    onSelect: function(e) {
        var treeView = e.sender;
        var text = treeView.text(e.node);
        kendoConsole.log("event :: select (" + text + ")");
    },
    files: kendo.observableHierarchy([
        { name: "My Web Site", type: "folder", expanded: true, items: [
            { name: "images", type: "folder", expanded: true, items: [
                { name: "logo.png", type: "image" },
                { name: "my-photo.jpg", type: "image" }
            ] },
            { name: "resources", type: "folder", expanded: true, items: [
                { name: "resources", type: "folder" },
                { name: "zip", type: "folder" }
            ] },
            { name: "about.html", type: "html" },
            { name: "index.html", type: "html" }
        ] }
    ]),
    printFiles: function() {
        // helper function that prints the relevant data from the hierarchical model
        var items = this.get("files").toJSON();

        function removeFields(item) {
            delete item.index;

            if (item.items.length == 0) {
                delete item.items;
            } else {
                item.items = $.map(item.items, removeFields);
            }

            return item;
        }

        $.map(items, removeFields);

        var jsonString = JSON.stringify(items, null, 2);

        return jsonString.replace(/\n/gi, "\n    ")
                    .replace(/\n\s*("name)/gi, " $1")
                    .replace(/\n\s*("type)/gi, " $1")
                    .replace(/\n\s*("expanded)/gi, " $1")
                    .replace(/\n\s*("selected)/gi, " $1")
                    .replace(/\n\s*("items)/gi, " $1")
                    .replace(/\s*\n\s*(})/gi, " $1")
                    .replace(/(\s*)]\n\s*}/gi, "] }");
    }
});
kendo.bind($("#example"), viewModel);

Answer 1

An ObservableHierarchy is using a HierarchicalDataSource for its implementation, so switching from one to the other may not change much. Regarding performance problems, there are three concerns: the amount of DOM elements to render, the amount of requests to the server and the size of the transferred data.

If the problem is that rendering the elements is taking too long, this could be addressed by setting the loadOnDemand option to true, which would cause elements to be rendered when you expand them (if you're using local data, this defaults to false).

If you're using remote binding and are concerned about how responsive it is after loading, this issue could be improved by getting all data in one request instead of issuing a separate request for each level (but if you're already using local data, this doesn't apply). If on the other hand you care about how long it takes to set it up initially, you should use loadOnDemand: true so the widget only requests the data it needs to show from the server.