javascript - Why does the Kendo TreeView delete nodes after drag and drop? -
i have kendo treeview bound datasource connected crud api via transport object.
i want re-order nodes in tree using drag , drop , save these changes db.
i calling .sync()
on datasource in dragend
event handler of treeview.
var commandstreeview = $("#commandgroups-treeview").kendotreeview({ datasource: mydatasource, draganddrop: true, dragend: function(e) { // sync changes db mydatasource.sync(); }
});
however create 2 ajax calls:
put
updatesdelete
on node has been dragged , dropped.
in api react on changes in put request , re-organize object relations in tha database object gets deleted afterwards.
this bad in database there bunch of other tables have foreign keys on object , deleted on cascade, well.
this confusing me.
- why dragged object deleted?
- how can prevent happening?
edit: here's workaround
- gather information need service
- calling service manually
- remember nodes expanded
- cancel changes kendo stored in datasource
- re-read data service (the data has been manupulated drag , drop service call earlier, reflects new order already)
- re-expand remembered nodes, read call close tree nodes
some code
//… dragend: function(e) { var draganddropdata = {}; draganddropdata.dropposition = e.dropposition; draganddropdata.sourcenode = json.parse(kendo.stringify(mydatasource.getbyuid($(e.sourcenode).attr('data-uid')))); draganddropdata.destinationnode = json.parse(kendo.stringify(mydatasource.getbyuid($(e.destinationnode).attr('data-uid')))); $.ajax({ url: myserviceurl, type: 'get', datatype: 'html', contenttype: "application/json", data: draganddropdata }) .done(function(data) { // remember expanded nodes var expandeditemsids = []; commandstreeview.element.find(".k-item").each(function (index, value) { var item = commandstreeview.dataitem(this); if (item.expanded) { expandeditemsids.push( item.id ); } }); // cancel kendo widget has done wrong // e.g. wrong indexes or items marked delete mydatasource.cancelchanges(); // re-read (correct) data server var promise = mydatasource.read(); // reset expanded nodes promise.done(function() { $(expandeditemsids).each(function(index, value) { var nodetoexpand = commandstreeview.findbyuid(mydatasource.get(value).uid); commandstreeview.expand(nodetoexpand); }); }); }) }
Comments
Post a Comment