0

I'm filling up the kendo grid with a couple of rows and want to implement drag/drop functionality between the grid and other html components.

I can find a lot of resources telling how to drag/drop/sort rows inside a grid, even from one grid to another grid, but nothing really for outside the grid to another component.

Does kendo ui-grid even support this?

One way I can think is - make the entire grid draggable and when drag starts get currently selected row data and use that on drop. But that's not really a very clean way to do it. I'll even need to make a custom drag image in this case.

Any other suggestions?

roro
  • 193
  • 3
  • 16
  • How is that not very clean? Make the `tbody` of the grid draggable, define a visible element when dragging, and define the drop target. If you look at Kendo's own code, this is exactly how the implementation of draggable rows within it's grid is implemented. – Brett Oct 27 '15 at 13:58
  • Yup, didn't realize earlier. – roro Oct 27 '15 at 16:02

1 Answers1

2

You can use the kendoDropTarget() method to assign another html element as the target. For example here is a grid and an HTML textarea:

<div id="grid"></div>
<textarea id="dropHere" rows="3" cols="50"></textarea>

$("#grid table tbody > tr").kendoDraggable({
    group: "gridGroup",
    threshold: 100,
    hint: function(e) {
        return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
    }
});

$("#dropHere").kendoDropTarget({
    group: "gridGroup",
    drop: function(e) { 
        e.draggable.hint.hide();

        var txt = '';
        $(e.draggable.element[0]).find("td").each(function(idx, td){
          txt += $(td).text() + '\n';
        });
        e.dropTarget.text(txt);
    }
});

DEMO

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • thanks for your great example. I was wondering if its possible to keep adding rows without loosing the previous dragged rows? As in having more than one row info blocks in the text area. – ComeRun Jan 27 '16 at 03:37