How to drag and drop rows between two kendo grids

Author: | Posted in .NET, C#, Kendo No comments

Step 1: Consider two grids, a source grid from which you want to drag the rows and a target grid to which you want to drop the rows.

For example,

var sourceGrid = $("#sourceGrid").data('kendoGrid');
 var sourceGridDataSource = sourceGrid.dataSource;
 var targetGrid = $("#targetGrid").data('kendoGrid');
 var targetGridDataSource = targetGrid.dataSource;

Step 2: Making the sourceGrid draggable.

$(sourceGrid.element).kendoDraggable({
          filter: "tr",
          group: "gridGroup", 
});

Step 3: Making the targetGrid droppable.

targetGrid.wrapper.kendoDropTarget({
     drop: function (e) {
              var dataItem = sourceGridDataSource.getByUid(e.draggable.currentTarget.data("uid"));
              sourceGridDataSource.remove(dataItem);
              targetGridDataSource.add(dataItem);
     },
    group: "gridGroup",
});

Add Your Comment