Question

I want to show my Kendo UI TreeView expanded at all time, but it will only show collapsed. When reloading the datasource, I can see a flash of the expanded tree, but then it collapses.

var locationTreeView = $("#treeViewLocations").kendoTreeView({
checkboxes: {
    checkChildren: false,
    template: "# if(item.showCheckbox){# <input type='checkbox' name='selectedLocations' value='#= item.value #' />#}#"
},
dataTextField: "text",
dataSource: {
    transport: {
        read: {
            url: window.location.origin + "/api/v1/bookingrequestlocation",
            dataType: "json",
            type: "GET",
            data: { bookingSeasonPeriodId: bookingSeasonPeriod.value() },
        }
    },
    schema: {
        model: {
            id: "value",
            children: "items",
            hasChildren: "hasChildren",
        }
    }
}}).data("kendoTreeView");

expandTreeView();

function changeSeason() {
    locationTreeView.dataSource.read();
    expandTreeView();}

function expandTreeView() {
    locationTreeView.expand(".k-item");}
Was it helpful?

Solution

Fire expandTreeView() function in databound event

OTHER TIPS

It's Working For Me...Thanks...I have added A DataBound Event Like this

.Events(e => e.DataBound("ExpandAllTree"))

and In that Method

function ExpandAllTree() {
        var treeview = $("#TreeView").data("kendoTreeView");
        treeview.collapse(".k-item");
    }

and It's Working Perfectly...

Add the following code right after creating the treeview 

 var tree = $("#TREEVIEWID").data("kendoTreeView");
        function expandTreeNodes() {
            if ($('.k-item').length) {
                var expandedLength = $('.k-item').length;
                tree.expand(".k-item");
                if (expandedLength < $('.k-item').length) {
                    expandTreeNodes();
                }
            }
        }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top