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>
Comments
Post a Comment