Reorder rows in hierarchical nested children grids

[Bob]

I am using Telerik UI for ASP.NET Core

I have a hierarchical grid with nested child grids where the name is based off the parent grid record ("#gridValue_#=CODE_TABLE_ID#"). Is there an example where only the nested grids are drag and drop sortable and only within the same nested grid? I am not trying to move rows between different nested grids.

Thanks in advance

[Mihaela]

Hello Bob,

The Grid provides a built-in Drag & Drop functionality as is demonstrated in the online demo below:

https://demos.telerik.com/aspnet-core/grid/drag-drop

You can set the Drag and Drop option in the child grids only and use the RowReorder event to prevent dragging and dropping from the other grids.

For example:

 

//Master Grid
@(Html.Kendo().Grid<Model>()
        .Name("grid")
        .ClientDetailTemplateId("template")
        ...
)

//Child grid
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("gridValue_#=CODE_TABLE_ID#")
            .Reorderable(reorder => reorder.Rows(true))
            .Columns(columns =>
            {
                columns.Template("").Draggable(true).Width(50);
                ...
            })
            .Events(ev =>
            {
                ev.RowReorder("onRowReorder");
            })
             ...
            .ToClientTemplate()
    )
</script>
<script>
    function onRowReorder(e) {
            var targetGrid = e.sender,
                dataSource = grid.dataSource,
                externalGrid, externalDataItem;

            if (e.oldIndex === -1) { // If the dropped row is not from the same Grid.
                e.preventDefault();
                alert("You can drag and drop only within the same grid")
            }
        }
</script>

 

Here is a REPL example for your reference:

https://netcorerepl.telerik.com/QQkqQvOB41f9svy615

 

 

Regards, Mihaela Progress Telerik