Is it possible to drag row outside kendo grid and sort within at same time?

Question

I'm able to drag rows within the kendo ui grid. Seperately able to drag rows outside the grid to another html element.

Is it possible to do both at same time?

For within grid:

Draggable within the grid:

grid.table.kendoSortable({
                    filter: ">tbody >tr",
                    cursor: "move",
                    hint: function(element) {
                        return $('<div class="k-grid k-widget"><table><tbody><tr>' + element.html() + '</tr></tbody></table></div>');
                    },
                    container: ".etr-watchlist_grid tbody",
                    change: function(e) {
                        let oldIndex = e.oldIndex,
                            newIndex = e.newIndex,
                            data = grid.dataSource.data(),
                            dataItem = grid.dataSource.getByUid(e.item.data("uid"));

                        grid.dataSource.remove(dataItem);
                        grid.dataSource.insert(newIndex, dataItem);
                    }
                });

Drag outside the Grid:

$(".myGrid 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);
                                }
                            });


                    });

score 1 · Accepted Answer · answered Oct 27 '15 at 19:54

1

I have taken an example of row reordering via drag from the telerik forums: http://www.telerik.com/forums/drag-and-drop-reordering

I have augmented the example to add dragging of rows outside the grid to multiple targets as well:

DEMO

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,  
    selectable: true,    
    columns: ["id", "text", "position"]            
}).data("kendoGrid");                  

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

grid.table.kendoDropTarget({
    group: "gridGroup",
    drop: function(e) {        
        e.draggable.hint.hide();
        var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
            dest = $(document.elementFromPoint(e.clientX, e.clientY));

        if (dest.is("th")) {
            return;
        }       
        dest = dataSource.getByUid(dest.parent().data("uid"));

        //not on same item
        if (target.get("id") !== dest.get("id")) {
            //reorder the items
            var tmp = target.get("position");
            target.set("position", dest.get("position"));
            dest.set("position", tmp);

            dataSource.sort({ field: "position", dir: "asc" });
        }                
    }
});

$(".dropTarg").kendoDropTarget({
    group: "gridGroup",
    drop: function(e) { 
      console.log(e.draggable)
        e.draggable.hint.hide();

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

answered Oct 27 '15 at 19:54

ezanker

24,628
1
20
35

Thanks. Is it possible to connect the .dropTarg with some function within the .js file specific to that dropTarg. So in the $('.dropTarg') something like e.dropTarget.functionOfDropWidget(); – roro Oct 28 '15 at 15:17
@Rohan, did you try it? – ezanker Oct 28 '15 at 15:27
In the grid.table.kendoDropTarget I can't seem to select my column: if (target.get("columnName") !== dest.get("columnName") ) Getting Cannot read property 'get' of undefined error. Doing console.log(target) or console.log(dest) gives undefined. Anyway to find the column name from object? – roro Oct 28 '15 at 20:52
1

@Rohan, you can get the row dom object with e.draggable.currentTarget, and then get the individual cells. – ezanker Oct 28 '15 at 21:32
Thanks ezanker. And is there anyway to get dest row? Instead of dest cell like right now. The parentElement.parentElement. shoes only for cell no matter how many times you do .parentElement – roro Oct 28 '15 at 22:32
1

@Rohan: dest.parents("tr"); see updated dojo: http://dojo.telerik.com/@ezanker/AZolI – ezanker Oct 29 '15 at 12:50
That works! So now that I can get the row and also the cells like this dest.parents('tr')[0].cells[0] , is there any way to get cell by column name? Something like dest.parents('tr')[0].cells['columnName']; – roro Oct 29 '15 at 15:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93705/discussion-between-rohan-and-ezanker). – roro Oct 29 '15 at 15:18

Is it possible to drag row outside kendo grid and sort within at same time?

1 Answers1