diff --git a/components/grid/row-drag-drop.md b/components/grid/row-drag-drop.md index 363600291a..49791c58ab 100644 --- a/components/grid/row-drag-drop.md +++ b/components/grid/row-drag-drop.md @@ -1768,7 +1768,6 @@ List on known limitations for the Grid Drag and Drop features: ## See Also -* [Grid Overview]({%slug grid-overview%}) -* [Live Demos: Grid](https://demos.telerik.com/blazor-ui/grid/overview) +* [Live Demo: Grid Drag and Drop](https://demos.telerik.com/blazor-ui/grid/drag-drop) +* [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/components/treelist/row-drag-drop.md b/components/treelist/row-drag-drop.md index 93d2bad354..4d2e739bfe 100644 --- a/components/treelist/row-drag-drop.md +++ b/components/treelist/row-drag-drop.md @@ -1154,6 +1154,6 @@ public class Employee ## See Also - * [TreeList Overview]({%slug treelist-overview%}) - * [Live Demos: TreeList](https://demos.telerik.com/blazor-ui/treelist/overview) - +* [Live Demo: TreeList Drag and Drop](https://demos.telerik.com/blazor-ui/treelist/drag-drop) +* [Drag and Drop between Different Parent Components]({%slug grid-kb-drag-drop-in-different-components%}) +* [TreeList API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikTreeList-1) diff --git a/components/treeview/drag-drop.md b/components/treeview/drag-drop.md index 9d3fb9f42b..78035edd98 100644 --- a/components/treeview/drag-drop.md +++ b/components/treeview/drag-drop.md @@ -1349,6 +1349,6 @@ using System.Collections.ObjectModel; ## See Also +* [Live Demo: TreeView Drag and Drop](https://demos.telerik.com/blazor-ui/treeview/drag-drop) * [Data Binding a TreeView]({%slug components/treeview/data-binding/overview%}) -* [Live Demo: TreeView](https://demos.telerik.com/blazor-ui/treeview/drag-drop) * [TreeView API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikTreeView) diff --git a/knowledge-base/grid-drag-drop-in-different-components.md b/knowledge-base/grid-drag-drop-in-different-components.md new file mode 100644 index 0000000000..2707bc4b4f --- /dev/null +++ b/knowledge-base/grid-drag-drop-in-different-components.md @@ -0,0 +1,183 @@ +--- +title: Drag and Drop Items between Grids in Different Components +description: Learn how to drag and drop data items between Telerik Blazor Grids, TreeLists, or TreeViews which are nested inside different parent components. +type: how-to +page_title: How to Drag and Drop Items between Grids in Different Parent Components +slug: grid-kb-drag-drop-in-different-components +tags: telerik, blazor, grid, treelist, treeview, drag and drop +ticketid: +res_type: kb +--- + +## Environment + + + + + + + + +
Product + Grid for Blazor,
+ TreeList for Blazor,
+ TreeView for Blazor +
+ +## Description + +This KB shows how to implement drag and drop between two Telerik components, which are inside different parent Razor components. + +## Solution + +You can approach drag and drop across different parent components in at least two ways: + +* Use parameters and `EventCallback`s to pass information between the two parent Razor components, which hold the Telerik components. This is a suitable approach if the two parent components are siblings in their parent. +* Use a state management service in your app, which will execute methods and fire events to the Razor components that hold the Telerik components. This is a suitable approach in all cases, but especially if the two parent components are further away in the app component hierarchy. + +The described algorithm and the example below are applicable for the [Grid]({%slug grid-drag-drop-overview%}), [TreeList]({%slug treelist-drag-drop-overview%}), and [TreeView]({%slug treeview-drag-drop-overview%}). + +## Example + +The following example includes three files: + +* `GridContainer.razor` is a Razor component that contains a Grid with enabled row drag and drop. +* `Home.razor` is a component (page) that holds two `GridContainer` instances. +* `GridModel.cs` is the Grid model class. + +Adjust the `YourAppName` namespace in `Home.razor` and `GridModel.cs` to run the code successfully in your app. + +
+ +````Home.razor +@page "/" + +@using YourAppName.Data + +

Grid 1

+ + +

Grid 2

+ + +@code { + private TelerikGrid? Grid1Ref { get; set; } + + private TelerikGrid? Grid2Ref { get; set; } + + private List Grid1Data { get; set; } = Enumerable.Range(1, 5).Select(x => new GridModel + { + Id = x, + Name = $"Name {x}" + }).ToList(); + + private List Grid2Data { get; set; } = Enumerable.Range(6, 5).Select(x => new GridModel + { + Id = x, + Name = $"Name {x}" + }).ToList(); + + private void OnGridItemsDropped(GridRowDropEventArgs args) + { + var destinationData = args.DestinationGrid == Grid1Ref ? Grid1Data : Grid2Data; + var destinationIndex = 0; + + if (args.DestinationItem != null) + { + destinationIndex = destinationData.IndexOf(args.DestinationItem); + + if (args.DropPosition == GridRowDropPosition.After) + { + destinationIndex += 1; + } + } + + destinationData.InsertRange(destinationIndex, args.Items); + } +} +```` +````GridContainer.razor +@using YourAppName.Data + + + + + + + + + + + + +@code { + [Parameter] + public EventCallback> OnItemsDropped { get; set; } + + [Parameter] + public List GridData { get; set; } = new(); + + [Parameter] + public EventCallback> GridDataChanged { get; set; } + + [Parameter] + public TelerikGrid? GridRef { get; set; } + + [Parameter] + public EventCallback> GridRefChanged { get; set; } + + private IEnumerable GridSelectedItems { get; set; } = new List(); + + private async Task OnGridRowDrop(GridRowDropEventArgs args) + { + // Remove items from the source Grid + GridData.RemoveAll(x => args.Items.Contains(x)); + await GridDataChanged.InvokeAsync(GridData); + + if (OnItemsDropped.HasDelegate) + { + // Add items to the destination Grid + await OnItemsDropped.InvokeAsync(args); + } + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && GridRefChanged.HasDelegate) + { + // Pass the Grid component references to the parent component + await GridRefChanged.InvokeAsync(GridRef); + } + + await base.OnAfterRenderAsync(firstRender); + } +} +```` +````GridModel.cs +namespace YourAppName.Data +{ + public class GridModel + { + public int Id { get; set; } + + public string Name { get; set; } = string.Empty; + } +} +```` + +## See Also + +* [Grid Drag and Drop Documentation]({%slug grid-drag-drop-overview%}) +* [TreeList Drag and Drop Documentation]({%slug treelist-drag-drop-overview%}) +* [TreeView Drag and Drop Documentation]({%slug treeview-drag-drop-overview%})