diff --git a/components/grid/hierarchy.md b/components/grid/hierarchy.md index 778ef136e..53d250383 100644 --- a/components/grid/hierarchy.md +++ b/components/grid/hierarchy.md @@ -125,8 +125,7 @@ The following articles and sample projects can be helpful when implementing hier ## See Also - * [Live Demo: Grid Hierarchy](https://demos.telerik.com/blazor-ui/grid/hierarchy) - * [KB: Customize Hierarchy Expand Column in Blazor Grid](slug://grid-kb-customize-hierarchy-expand-column-blazor-grid) - * [Blazor Grid](slug://grid-overview) - - +* [Live Demo: Grid Hierarchy](https://demos.telerik.com/blazor-ui/grid/hierarchy) +* [Customize Hierarchy Expand Column in Blazor Grid](slug://grid-kb-customize-hierarchy-expand-column-blazor-grid) +* [Drag and Drop Rows in Grid Hierarchy](slug://grid-kb-drag-drop-rows-hierarchy) +* [Blazor Grid](slug://grid-overview) diff --git a/components/grid/row-drag-drop.md b/components/grid/row-drag-drop.md index 62412be98..312cd69fb 100644 --- a/components/grid/row-drag-drop.md +++ b/components/grid/row-drag-drop.md @@ -132,14 +132,14 @@ This section contains the following examples: ### Drag and Drop a Row between Grids -When you drag and drop items from one Grid to another, the `OnRowDrop` event fires for both Grid instances, so you can update their data sources. All Grid instances must be bound to the same model type. It is also possible to [bind the Grids to different models, but they must be derived from the same interface](slug://grid-kb-drag-drop-different-models). +When you drag and drop items from one Grid to another, the `OnRowDrop` event fires for the source Grid instance and provides information about the destination Grid. Thus you can update the data sources of both Grids. The Grid instances must be bound to the same model type. It is also possible to [bind the Grids to different models, but they must be derived from the same interface](slug://grid-kb-drag-drop-different-models). The target drop area in the Grid is the `` element. Users cannot drop items in the empty space below the last table row and this includes the `NoDataTemplate` too. There are two ways to prevent possible confusion and enhance the UX: * Do not set a Grid `Height`, so that there is no empty space below the last table row. * Define a [`NoDataTemplate`](slug://grid-templates-no-data), which fills the Grid data area. -The following example demonstrates both these options: +The following example demonstrates both these options. You can also check how to [drag and drop rows in a Grid hierarchy](slug://grid-kb-drag-drop-rows-hierarchy). >caption Drag and drop items between Grids @@ -1769,7 +1769,6 @@ List on known limitations for the Grid Drag and Drop features: ## See Also * [Live Demo: Grid Drag and Drop](https://demos.telerik.com/blazor-ui/grid/drag-drop) +* [Drag and Drop Rows in Grid Hierarchy](slug://grid-kb-drag-drop-rows-hierarchy) * [Drag and Drop between Different Parent Components](slug://grid-kb-drag-drop-in-different-components) * [Grid API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikGrid-1) -* [Blazor Grid](slug://grid-overview) - diff --git a/knowledge-base/grid-drag-drop-rows-hierarchy.md b/knowledge-base/grid-drag-drop-rows-hierarchy.md new file mode 100644 index 000000000..6ddbb9d46 --- /dev/null +++ b/knowledge-base/grid-drag-drop-rows-hierarchy.md @@ -0,0 +1,261 @@ +--- +title: Drag and Drop Grid Rows in Hierarchy +description: Learn how to implement and set up drag-and-drop in hierarchical Blazor Grid scenarios. Enable or disable dragging and dropping in specific Grid instances in the hierarchy. +type: how-to +page_title: How to Drag and Drop Grid Rows in Hierarchy +slug: grid-kb-drag-drop-rows-hierarchy +tags: blazor, grid, hierarchy, drag and drop +ticketid: 1675157 +res_type: kb +--- + +## Environment + +
+ + + + + + +
Product + Grid for Blazor +
+ +## Description + +This KB answers the following questions: + +* How to configure drag-and-drop in a hierarchy of Telerik Grids for Blazor? +* How to drag detail rows from a child Grid and drop them on the master (parent) Grid? +* How to prevent users from dragging and dropping master Grid rows to detail (child) Grids? + +## Solution + +1. Configure the [Grid hierarchy](slug://components/grid/features/hierarchy) with a ``. +1. [Set `RowDraggable="true"` and handle the `OnRowDrop` event](slug://grid-drag-drop-overview) for the master or detail Grids. +1. [Set unique `@ref` attributes to all detail Grid instances](slug://common-kb-dynamic-refs). +1. [Set unique `@key` attributes to all detail Grid instances](slug://grid-kb-using-components-in-templates). +1. (optional) Disable dragging from certain Grids. Use custom CSS to hide specific drag columns. The example below shows how to do this separately for each Grid instance in the hierarchy. +1. (optional) Disable dropping to certain Grid instances. Use logic in the `OnRowDrop` event handlers. The example below prevents dragging and dropping of master rows to the detail Grids. + +>caption Drag and drop rows in Grid hierarchy + +````RAZOR + + + + + + + + + + + + + + + + @{ + var masterItem = (GridModel)context; + if (!DetailGridConfig.ContainsKey(masterItem.Id)) + { + DetailGridConfig.Add(masterItem.Id, new() { GridRef = new TelerikGrid() }); + } + } + + + + + + + + + + + + + + + + + + + + +@code { + private TelerikGrid? MasterGridRef { get; set; } + private Dictionary DetailGridConfig { get; set; } = new(); + + private bool MasterGridDrag { get; set; } = true; + private bool MasterGridDrop { get; set; } = true; + + private void OnMasterGridDrop(GridRowDropEventArgs args) + { + if (!MasterGridDrop || args.DestinationGrid != MasterGridRef) + { + return; + } + + MasterGridData.Remove(args.Item); + InsertGridItem(args); + } + + private void OnDetailGridDrop(GridRowDropEventArgs args) + { + if (args.DestinationGrid != MasterGridRef) + { + int masterId = DetailGridConfig.First(x => x.Value.GridRef == args.DestinationGrid).Key; + + if (!DetailGridConfig[masterId].AllowDrop) + { + return; + } + } + else if (!MasterGridDrop) + { + return; + } + + DetailGridData.Remove(args.Item); + InsertGridItem(args); + } + + private void InsertGridItem(GridRowDropEventArgs args) + { + List destinationGridData = new(); + int? newParentId = null; + + if (args.DestinationGrid == MasterGridRef) + { + destinationGridData = MasterGridData; + } + else + { + destinationGridData = DetailGridData; + newParentId = DetailGridConfig.First(x => x.Value.GridRef == args.DestinationGrid).Key; + } + + var destinationIndex = 0; + + if (args.DestinationItem != null) + { + destinationIndex = destinationGridData.IndexOf(args.DestinationItem); + if (args.DropPosition == GridRowDropPosition.After) + { + destinationIndex += 1; + } + } + + foreach (GridModel item in args.Items) + { + item.ParentId = newParentId; + } + + destinationGridData.InsertRange(destinationIndex, args.Items); + } + + private void DetailGridDragChanged(bool newValue, int masterId) + { + DetailGridConfig[masterId].AllowDrag = newValue; + } + + private void DetailGridDropChanged(bool newValue, int masterId) + { + DetailGridConfig[masterId].AllowDrop = newValue; + } + + private void OnMasterGridInit(GridStateEventArgs args) + { + args.GridState.ExpandedItems = MasterGridData; + } + + private List MasterGridData { get; set; } = Enumerable.Range(1, 3).Select(x => new GridModel + { + Id = x, + ParentId = null, + Text = "Text " + (x) + }).ToList(); + + private List DetailGridData { get; set; } = Enumerable.Range(1, 9).Select(x => new GridModel + { + Id = 100 + x, + ParentId = x % 3 + 1, + Text = "Text " + (100 + x) + }).ToList(); + + public class GridModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Text { get; set; } = string.Empty; + } + + public class GridDragDropDescriptor + { + public TelerikGrid? GridRef { get; set; } + public bool AllowDrag { get; set; } = true; + public bool AllowDrop { get; set; } = true; + } +} +```` + +## See Also + +* [Grid Hierarchy](slug://components/grid/features/hierarchy) +* [Grid Drag and Drop](slug://grid-drag-drop-overview) +* [Set `@ref` to Detail Grids](slug://common-kb-dynamic-refs) +* [Use `@key` in Grid Templates](slug://grid-kb-using-components-in-templates)