[Solved] Reload/Refresh Tree w/ New Parameters

[Ashleigh L]

I've got an existing tree we're looking to replace w/ the Kendo TreeView. I've got most of it working, but I'm having issues w/ one particular use case.

Referring to the attached image, we load a tree view by default when the page is loaded. Then the user can choose to change the context of the tree - for example, showing items w/ various statuses, as shown in the filter button dropdown. In our current solution we remove the tree (the entire div) completely and re-create it from scratch by appending on a new, empty div and calling the tree init again.

I'm hoping we won't need to do this w/ the Kendo version, but I can't figure out how to refresh the tree while modifying the parameters passed to the datasource. I was able to get the general refresh button (bottom left) working by doing a read on the datasource, but it keeps the original parameters. We have similar functionaly tied to the dropdown above the tree (Users [by surname]), where they can change the whole tree, rather than just the parameters. For example, they could switch it to Users [by organization] or Users [by given name].

My current init for the TreeView:

function getTree(type, status) {
    var url = page_init[type].tree_data;

    //if status is passed in, append it to the url
    if (typeof(status) != 'undefined') {
        url += status;
    }

    //set up the tree
    var tree_datasource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: url,
                dataType: "json"
            }
        },
        schema: {
            type: "json",
            data: "Entries",
            model: {
                id: "ID"
            }
        }
    });

    $("#nav_tree").kendoTreeView({
        loadOnDemand: false,
        dataSource: tree_datasource,
        dataTextField: "Text"
    });
}

And the existing function calls for changing the full tree (dropdown, #tree_select) and filter (button, #tree_filter)

$("#tree_select").on("change", function (event) {
    event.preventDefault();
    getTree(this.value, 'active');
});

<ul id="tree_filter" class="dropdown-menu dropdown-menu-filter">
    <li onclick="getTree($('##tree_select').val(), 'active')">Active</li>
    <li onclick="getTree($('##tree_select').val(), 'inactive')">Inactive</li>
    <li onclick="getTree($('##tree_select').val(), 'all')">All</li>
</ul>

[Ashleigh L]

FYI I've created a support ticket for this issue, so no response is required to this post.

[Dimo]

Hello Shimmoril,

You can use the .data() method of the DataSource (the HierarchicalDataSource inherits all of the methods of the DataSource) to change the data set, based on some conditions and/or events. In the described scenario execute the data() method on changing of the Active/Inactive/All filter value.

$("#treeview").data("kendoTreeView").dataSource.data(data1);

I hope this helps.

Regards,
Dimo
Telerik

[Ashleigh L]

Sorry, I'm not following how this is supposed to work.

When the Active/Inactive/All options are clicked, it executes the getTree() function, included in my original post. Based on the type and/or status passed in to the function, the URL for the datasource is created, and then the datasource is initialized.

The set example in the API link you provided shows how to set the data items, without calling a function, which is not what I need.

[Dimo]

Hello shimmoril,

Sorry about the misunderstanding.

If the read url will change, then use the setDataSource() method of the TreeView and pass all the new DataSource configuration options there.

https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/treeview.md#setdatasource

If the URL will not change and you only need to pass custom parameters, then use the data configuration property of read to define a function, which will pass these parameters. When the TreeView needs to be reloaded, call the read() method of its DataSource instance.

https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/data/datasource.md#transportreaddata-objectfunction

$("#treeview").data("kendoTreeView").dataSource.read();

In both cases described above, there will be no need to completely destroy and recreate the TreeView.

Regards,
Dimo
Telerik

[Ashleigh L]

That works perfectly, thanks Dimo.

For reference, I removed the datasource from the tree init and set it afterwards instead:

tree_datasource = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: url,
            dataType: "json"
        }
    },
    schema: {
        type: "json",
        data: "Entries",
        model: {
            id: "ID"
        }
    }
});

$("#nav_tree").kendoTreeView({
    loadOnDemand: false,
    dataTextField: "Text",
});

$("#nav_tree").data("kendoTreeView").setDataSource(tree_datasource);