Можно ли перетащить строку за пределы сетки кендо?

Question

Я заполняю сетку кендо парой строк и хочу реализовать функцию перетаскивания между сеткой и другими html-компонентами.

Я могу найти много ресурсов, рассказывающих о том, как перетаскивать / отбрасывать / сортировать строки внутри сетки, даже из одной сетки в другую, но на самом деле ничего за пределами сетки в другой компонент.

Кендо UI-Grid даже поддерживает это?

Один из способов, который я могу себе представить, - сделать всю сетку перетаскиваемой, а когда начнется перетаскивание, получить текущие выбранные данные строки и использовать их по капле. Но это не совсем чистый способ сделать это. Мне даже нужно сделать собственное изображение для перетаскивания в этом случае.

Любые другие предложения?

Answer 1

Вы можете использовать метод kendoDropTarget(), чтобы назначить другой HTML-элемент в качестве цели. Например, вот сетка и текстовая область HTML:

<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