jquery - Kendo UI Treeview's JSON is not updated. Loading in progress -

i using kendo ui tree view. in click event call method(for createjson data), updated json data , feed tree view data.

whenever create json data. if times(2, 4,8..), treeview showing correctly. if odd, tree view not loading still shows loading message

net=[] $(function(){ treeform(net);     $(document).on("click", "#sitecreation", function(event){         addsite(net);        }); }); 

in function of update json

function addsite(net){ // update json treeform(net) } 

creation of tree is

function treeform(net){         var viewmodel = new kendo.data.hierarchicaldatasource({             data:net,            });          var treeview = $("#tree").kendotreeview({             datasource: viewmodel,             datatextfield: ["uid"],             loadondemand: false         }).data("kendotreeview");     } 

here time updation of json working not in odd time.

the problem initializing multiple times kendotreeview on same dom element , not correct.

since thing need updating data, should query if there kendotreeview in element tree , if update data.

something like:

  function treeform(net){     // kendo treeview object     var treeview = $("#tree").data("kendotreeview");     // check if exists     if (treeview) {       // if exists update data       treeview.datasource.data(net);     } else {       // if not exist create hierarchicaldatasource , treeview       var viewmodel = new kendo.data.hierarchicaldatasource({         data:net,       });        treeview = $("#tree").kendotreeview({         datasource: viewmodel,         datatextfield: ["uid"],         loadondemand: false       }).data("kendotreeview");     } 

a runnable snippet showing solution

$(document).ready(function() {    net=[      { uid : "node1" },      { uid : "node2" },      { uid : "node3" }    ];    treeform(net);    $(document).on("click", "#sitecreation", function(event){      addsite(net);       });      function addsite(net){      // update json      net=[        { uid : "node1" },        { uid : "node2" },        { uid : "node3" },        { uid : "node4" }      ];      treeform(net)    }      function treeform(net){      var treeview = $("#tree").data("kendotreeview");        if (treeview) {        treeview.datasource.data(net);      } else {        var viewmodel = new kendo.data.hierarchicaldatasource({          data:net,        });          treeview = $("#tree").kendotreeview({          datasource: viewmodel,          datatextfield: ["uid"],          loadondemand: false        }).data("kendotreeview");      }    }  });

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>    <button id="sitecreation" class="k-button">create</button>  <div id="tree"></div>