Expand TreeView Items Sequentially with loadOnDemand

Environment

Product Version	2018.2.516
Product	Progress® Kendo UI® TreeView for jQuery

Description

How can I sequentially expand all TreeView items when loadOnDemand is set to true?

Solution

Subscribe to the dataBound event of the TreeView and expand() all currently loaded nodes.

<div id="content">
    <div id="treeview"></div>
    <button id="expandItems" class="k-button k-primary">Expand all items</button>
</div>

<script>
$(document).ready(function() {
    var OrderDetails = {
        type: "odata",
        transport: {
            read: {
                url: function(options) {
                    return kendo.format(
                        "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details",
                        options.ProductID
                    );
                }
            }
        },
        schema: {
            model: {
                hasChildren: function() {
                    return false;
                }
            }
        }
    };

    var Products = {
        type: "odata",
        schema: {
            model: {
                id: "ProductID",
                hasChildren: "Order_Details",
                children: OrderDetails
            }
        },
        transport: {
            read: {
                url: function(options) {
                    return kendo.format(
                        "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories({0})/Products",
                        options.CategoryID
                    );
                }
            }
        }
    };

    var Categories = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
            }
        },
        schema: {
            model: {
                hasChildren: "Products",
                id: "CategoryID",
                children: Products
            }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: Categories,
        dataBound: function(e){
            if (e.node) {
                this.expand(e.node.find('.k-item'));
            }
        },
        dataTextField: ["CategoryName", "ProductName", "OrderID"]
    });

    $("#expandItems").on("click", function(e) {
        $("#treeview").data().kendoTreeView.expand($('.k-item'));
    });
});
</script>

See Also

• API Reference of the TreeView.