Kendo UI grid drag&drop placeholder -
i have grid drag&drop functionality:
var data = [ { id: 1, text: "text 1", position: 0 }, { id: 2, text: "text 2", position: 1 }, { id: 3, text: "text 3", position: 2 } ] var datasource = new kendo.data.datasource({ data: data, schema: { model: { id: "id", fields: { id: { type: "number" }, text: { type: "string" }, position: { type: "number" } } } } }); var grid = $("#grid").kendogrid({ datasource: datasource, scrollable: false, columns: ["id", "text", "position"] }).data("kendogrid"); grid.table.kendodraggable({ filter: "tbody > tr", group: "gridgroup", threshold: 100, hint: function(e) { return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>'); } }); grid.table.kendodroptarget({ group: "gridgroup", drop: function(e) { e.draggable.hint.hide(); var target = datasource.getbyuid($(e.draggable.currenttarget).data("uid")), dest = $(document.elementfrompoint(e.clientx, e.clienty)); if (dest.is("th")) { return; } dest = datasource.getbyuid(dest.parent().data("uid")); //not on same item if (target.get("id") !== dest.get("id")) { //reorder items var tmp = target.get("position"); target.set("position", dest.get("position")); dest.set("position", tmp); datasource.sort({ field: "position", dir: "asc" }); } } });
(working example: http://jsfiddle.net/jbeqn/ )
is possible show placeholder row dropped? current implementation it's not obvious. make this: http://demos.telerik.com/kendo-ui/sortable/events
or this:
http://jsfiddle.net/bgrins/tzybu/
in demo above placeholder showed , it's quite easy understand row dropped.
so ideas?
Comments
Post a Comment