Is it possible to drag row outside kendo grid?

Question

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?

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

ezanker ezanker · Accepted Answer · 2015-10-26T21:10:51

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

Is it possible to drag row outside kendo grid?

1 Answers