Refresh treeview

[Sven]

Hi,
I load a complex treeview via ajax because I need to load the tree with one request (works fine):

$(document).ready(function() {    
    buildTree();        
});

function buildTree(){
    $.getJSON("admin_get_treedata.php", function (data) {
        $("#treeview").kendoTreeView({
            select: function(item) { editTreeElement(item,'tree'); },
            dataSource: data
        });
    })
}

If I try to reload the complete tree after changing some data via ajax  the new build tree does not work correct and does not update the text.

        $.ajax({
            type: 'POST',
            url: 'ajax/ajax_update_layer.php',
            data: {
                layerid:id,
                ...
            },
            success: function(data){
                          buildTree();
                    }
            });   

What can Ido?
Thanks
Sven

[Alex Gyoshev]

Hello Sven,

When updating an existing treeview, simply set its datasource data:

success: function(data) {
    $("#treeview").data("kendoTreeView").dataSource.data(data);
}

Regards,
Alex Gyoshev
Telerik

[Sven]

Hi,
I tried this already, but it doesen't work. My data is json and it looks like this:

{"data": [{
"id": 127,
"mapname": "",
"text": "Basiskarten (Overlays)",
"expanded": true,
"isnocheck": false,
"spriteCssClass": "folder",
"items": [{
"id": 132,
"mapname": "fnp_ov",
"text": "Flächennutzungsplan",
"isChecked": false,
"isPoi": false,
"spriteCssClass": "html"},{
"id": 131,
"mapname": "luftbilder_hist_ov",
"text": "Luftbilder 1929",
"isChecked": false,
"isPoi": false,
"spriteCssClass": "html"},{
"id": 128,
"mapname": "luftbilder2011_ov",
"text": "Luftbilder 2011",
"isChecked": false,
"isPoi": false,
"spriteCssClass": "html"},
....

If I make the initial call it works:
buildTree("init");

But if I want to update the tree the div is emty:
buildTree('update');

And here is the function:

function buildTree(typ){
    var rnd = parseInt(Math.random()*99999999);   
    var ajaxurl = "admin_get_tree.php?id=" + rnd;
    $.getJSON(ajaxurl, function (data) {
    if(typ === "init"){
        $("#treeview").kendoTreeView({
            select: function(item) { editTreeElement(item,'tree'); },
            dataSource: data
        });
        }
        else if (typ === "update"){
           $("#treeview").data("kendoTreeView").dataSource.data(data);
        }
    })    
}
Any idea?
Thanks Sven

[Alex Gyoshev]

Hello Sven,

Since the data is stored in the data field, when updating the statement should be:

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

Regards,
Alex Gyoshev
Telerik