是否可以在kendo网格外拖动行?

时间:2015-10-26 19:11:24

标签: kendo-ui kendo-grid angular-dragdrop kendo-draggable

我用几行填充了kendo网格,并希望在网格和其他html组件之间实现拖放功能

我可以找到很多资源,告诉我们如何在网格内拖放/排序行,甚至从一个网格到另一个网格,但网格外部没有任何其他组件。

kendo ui-grid是否支持此功能?

我能想到的一种方法是 - 使整个网格可拖动,当拖动开始时获取当前选定的行数据并在下拉时使用该数据。但这并不是一个非常干净的方式。在这种情况下,我甚至需要制作自定义拖动图像。

还有其他建议吗?

1 个答案:

答案 0 :(得分:2)

您可以使用kendoDropTarget()方法将另一个html元素指定为目标。例如,这里是一个网格和一个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