This is a migrated thread and some comments may be shown as answers.

Multiple row drag and drop in Kendo UI Grid

6 Answers 834 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gregor
Top achievements
Rank 1
Gregor asked on 24 May 2012, 01:54 PM
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

6 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 28 May 2012, 03:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anto (DLL Version : 2008.3.1314.35)
Top achievements
Rank 2
answered on 08 Aug 2012, 01:57 PM
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

  
 
   
   


1
Habib
Top achievements
Rank 1
answered on 26 Sep 2012, 08:28 AM
hi ,
did you get this Example
0
Samuel
Top achievements
Rank 1
answered on 22 Oct 2012, 09:39 PM
I literally need this exact same thing. Please post your code of any solution you found!
1
Bibin
Top achievements
Rank 1
answered on 10 Jan 2013, 04:25 PM
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"
      });
    }
  }
});
0
Josh
Top achievements
Rank 1
answered on 30 May 2013, 06:24 PM
@Gregor,
See my post in the other thread for a solution of this: other thread
Tags
Grid
Asked by
Gregor
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Anto (DLL Version : 2008.3.1314.35)
Top achievements
Rank 2
Habib
Top achievements
Rank 1
Samuel
Top achievements
Rank 1
Bibin
Top achievements
Rank 1
Josh
Top achievements
Rank 1
Share this question
or