Kendo grid drag and drop issue

Question

We are using kendo drag and drop functionality inside the kendo grid table.

1) If the user provide data on any editable fields and without saving the data, if user click/jump to other field for edit. User is loosing his updated data.

2) If the user update any records, we are refresh/regenerate table again Or if we refresh/regenerate outside from the function Or we added new records using outside the function. After that user are not able to drop row to replace with other.

Jsfiddel file

var data = [
                    { Id: 1, Name: "data 1", Position: 1 },
                    { Id: 2, Name: "data 2", Position: 2 },
                    { Id: 3, Name: "data 3", Position: 3 }
                ];

                var dataSource = new kendo.data.DataSource({
                        data: data,        
                        schema: {
                            model: {
                                Id: "Id",
                                fields: {
                                    Id: { type: "number" },
                                    Name: { type: "string" },
                                    Position: { type: "number" }
                                }
                            }
                        }
                    });

                var grid= $("#grid").kendoGrid({
                    dataSource: dataSource,  
                    scrollable: false,    
                    editable : true,
                    toolbar:  ["save","cancel", "create"],
                   columns: ["Id", "Name", "Position"]            
                }).data("kendoGrid");

            grid.table.kendoDraggable({
                    filter: "tbody > tr:not(.k-grid-edit-row)",
                    group: "gridGroup",
                cursorOffset: { top: 10, left: 10 },
                    hint: function(e) {

                        return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
                    }
                });


            grid.table/*.find("tbody > tr")*/.kendoDropTarget({

                  group: "gridGroup",
                  drop: function (e) {

                    var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
                          dest = $(e.target);

                    if (dest.is("th")) {
                      return;
                    }
                    dest = dataSource.getByUid(dest.parent().data("uid"));

                    //not on same item
                    if (target.get("Id") !== dest.get("Id")) {
                      //reorder the items
                      var tmp = target.get("Position");
                      target.set("Position", dest.get("Position"));
                      dest.set("Position", tmp);

                      dataSource.sort({ field: "Position", dir: "asc" });
                    }
                  }
                });

Answer 1

I was having similar issues using the newer kendoSortable with an editable grid to achieve drag/drop row sorting.

This fiddle http://jsfiddle.net/UsCFK/273/ works.

It uses a column with a drag handle as mentioned above to prevent cell edits being lost - the other cells are ignored in the setup:

grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: $.noop,
    cursor: "move",
    ignore: "TD, input",
    placeholder: function (element) {
      return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    },
    container: '#grid tbody',
    change: onGridRowChange
});

It also updates the position field in the datasource, rather than removing, then re-inserting the row as in some other examples - as this will cause a delete request request to the server for each row that is moved - which can cause issues when clicking the batch-editing cancel button. The position field is only shown for demonstration purposes - it should not be exposed for manual editing.

Answer 2

1. I've run into similar issue some time ago. And also I found the following thread on their forum - http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ

   So if you add one more additional column to the table and put an image there or some other element, then you'll be able to use that element as draggable target like:

   grid.table.kendoDraggable({
       filter: "tbody > .draggableTarget".....
   

2. The table is completely recreated in the DOM in the case when you refresh it, so you have to resubscribe your drag and drop functionality.