Two Draggable Grids

[Dale]

I have two draggable grids, but the second has no drop point, just a circle with a line through it. Can you tell me why the second grid allows me to drag the row but no where to drop?

 

                        // QUESTIONS
                        tab.Add().Selected(true).Text("Questions").Content(@<text>
                        @(Html.Kendo().Grid<TemplateQuestionVM>()
                            .Name("AI_TemplateQuestionGrid")
                            .ToolBar(toolbar =>
                            {
                                if (Model.TemplateId != 0) toolbar.New("TemplateQuestionEdit", "Template Question", $"AI/TemplateQuestion/edit?parentId={Model.TemplateId}");
                                toolbar.SuperSearchWindow("TemplateEdit", "AI_TemplateQuestionGrid");
                            })
                            .Height(600)
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Sort(s => s.Add("Sequence"))
                                .Read(read => read.Action("Read", "TemplateQuestion", new { parentId = Model.TemplateId }).SuperSearchWindow("TemplateEdit", "AI_TemplateQuestionGrid"))
                                .Model(m => m.Id(f => f.TemplateQuestionId))
                            )
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.TemplateQuestionId).Width(1).Title("").Filterable(false);
                                columns.Bound(c => c.Sequence).Width(80).Title("Seq").Filterable(false);
                                columns.Template("").Draggable(true).Width(80);
                                columns.Bound(c => c.QuestionName).Title("Question").Filterable(false);
                                columns.Bound(c => c.TemplateQuestionId).Edit("TemplateQuestionEdit", "Template Question", "AI/TemplateQuestion/edit/#=TemplateQuestionId#");
                            })
                            .Filterable()
                            .Scrollable()
                            .Sortable()
                            .Reorderable(order => order.Rows(true))
                            .Events(ev => { ev.RowReorder("function(e) { dragRow(e, 'AI_TemplateQuestion', 'TemplateId', " + Model.TemplateId + "); }"); })
                        )</text>);

                        // VARIABLES
                        tab.Add().Selected(false).Text("Variables").Content(@<text>
                        @(Html.Kendo().Grid<TemplateVariableVM>()
                            .Name("AI_TemplateVariableGrid")
                            .ToolBar(toolbar =>
                            {
                                if (Model.TemplateId != 0) toolbar.New("TemplateVariableEdit", "Template Variable", $"AI/TemplateVariable/edit?parentId={Model.TemplateId}");
                                toolbar.SuperSearchWindow("TemplateEdit", "AI_TemplateVariableGrid");
                            })
                            .Height(600)
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Sort(s => s.Add("Sequence"))
                                .Read(read => read.Action("Read", "TemplateVariable", new { parentId = Model.TemplateId }).SuperSearchWindow("TemplateEdit", "AI_TemplateVariableGrid"))
                                .Model(m => m.Id(f => f.TemplateVariableId))
                            )
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.TemplateVariableId).Width(1).Title("").Filterable(false);
                                columns.Bound(c => c.Sequence).Width(80).Title("Seq").Filterable(false);
                                columns.Template("").Draggable(true).Width(80);
                                columns.Bound(c => c.VariableCode).Width(200).Title("Variable").Filterable(false);
                                columns.Bound(c => c.VariableName).Title("Name").Filterable(false);
                                columns.Bound(c => c.VariableType).Width(200).Title("Type").Filterable(false);
                                columns.Bound(c => c.TemplateVariableId).Edit("TemplateVariableEdit", "Template Variable", "AI/TemplateVariable/edit/#=TemplateVariableId#");
                            })
                            .Filterable()
                            .Scrollable()
                            .Sortable()
                            .Reorderable(order => order.Rows(true))
                            .Events(ev => { ev.RowReorder("function(e) { dragRow(e, 'AI_TemplateVariable', 'TemplateId', " + Model.TemplateId + "); }"); })
                        )</text>);

[Anton Mironov]

Hello Dale,

Thank you for the code snippet and the details provided.

Based on your description and the provided code, it looks like you have enabled row reordering in both grids using .Reorderable(order => order.Rows(true)). This built-in feature allows users to reorder rows within each grid, but it does not support dragging rows between grids.

Why the "No Drop" Cursor Appears

• The "no drop" cursor (circle with a line) appears because the grid's row reordering feature only recognizes valid drop targets inside its own grid.
• When you try to drag a row from the second grid and drop it elsewhere (such as into the first grid or outside any valid row), there is no configured drop target, so dropping is not allowed.

Clarification Needed

• Are you trying to reorder rows within each grid, or do you want to drag rows from one grid to another?
  • If you only need to reorder rows inside each grid, your current setup is correct.
  • If you want to move rows between grids, you need to implement custom drag-and-drop logic.

Solution for Cross-Grid Drag-and-Drop

If your goal is to drag rows between grids, you should use Kendo UI Draggable and DropTarget widgets to manually handle the transfer. Here’s a basic outline:

$(document).ready(function () {
    var grid1 = $("#AI_TemplateQuestionGrid").data("kendoGrid");
    var grid2 = $("#AI_TemplateVariableGrid").data("kendoGrid");

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

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

    $(grid1.table).kendoDropTarget({
        group: "gridGroup",
        drop: function (e) {
            var dataItem = grid2.dataSource.getByUid(e.draggable.currentTarget.data("uid"));
            grid2.dataSource.remove(dataItem);
            grid1.dataSource.add(dataItem);
        }
    });

    $(grid2.table).kendoDropTarget({
        group: "gridGroup",
        drop: function (e) {
            var dataItem = grid1.dataSource.getByUid(e.draggable.currentTarget.data("uid"));
            grid1.dataSource.remove(dataItem);
            grid2.dataSource.add(dataItem);
        }
    });
});

• https://docs.telerik.com/kendo-ui/knowledge-base/drag-and-drop-rows-between-two-grids

 

Kind Regards,
Anton Mironov
Progress Telerik

[Dale]

Thanks

But actually no, these are two seperate grids on seperate tabs. There is no drop target on grid 2 from grid 2. However I have discovered when I add a row to this grid and the grid refreshes, the drag / drop now works. So for some reason when the grid originally loads something may not be initialised.

[Anton Mironov]

Hi Dale,

Yes, you are totally correct - probably something is still not initialized.

I hope the desired behavior, is now achieved.

Best Regards,
Anton Mironov