Multiple row drag and drop in Kendo UI Grid

[Gregor]

Is there any way to get this working? tried a few ideas but nothing worked - if its not possible whens this likely to be available?

Thanks
Gregor

[Iliana Dyankova]

Hello Gregor,

This functionality is not supported out of the box, but you could try to implement it using custom code. Please note however that the events of the grid selection will interfere with the drag and drop functionality.
As an alternative approach I would suggest to use a checkbox column in your Grid, where to check the rows you would like to move. Hence when dragging starts you could collect the checked rows and move them. 

Also, I believe you might find this forum thread very useful - it discusses the drag and drop reordering of the rows in Kendo UI Grid.


Kind regards,
Iliana Nikolova
the Telerik team

[Anto (DLL Version : 2008.3.1314.35)]

Hi Iliana Nikolova,


     I have downloaded KendoUI v 2012.2.710  trial version and trying out few samples.
    
     My Requirement is as follows:

    1. I have two Kendo UI grids.
        a. Left Grid contains data from database.
        b. Right grid Empty.
        c. A button in between two grids.

   Scenario 1:

   I need to drag rows from left grid and drop in right grid,
   on right grid drop, the dropped data should be available only in the right grid, and should not be available in the left grid.

 Scenario 2:
 
  select multiple rows in the left grid.
  Click on the button between the two grids should populate the right grid and the selected data should not be available in the left grid.

Scenario 3:

  on double clicking a row in left grid the data should be moved to the right grid.

And the same should be done right to left also.

Is this possible using kendo grid?
Please give me suggestions ASAP.

Thank You,
Kalidhas.P
KendoUI v 2012.2.710

  
 
   
   

[Habib]

hi ,
did you get this Example

[Samuel]

I literally need this exact same thing. Please post your code of any solution you found!

[Bibin]

I had a different requirement, so that the rows get stacked instead of swapping rows. Here is the modified code from the jsFiddle for that:

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",
  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.get($(e.draggable.currentTarget).data("id")),
      dest = $(e.target);

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

    //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") - 1);
      dest.set("position", dest.get("position"));

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

[Josh]

@Gregor,
See my post in the other thread for a solution of this: other thread