From d009f558ee8804ec85bde58b31c6695ff7876fd2 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 25 Nov 2024 17:43:10 +0200 Subject: [PATCH 1/6] kb(Grid): Add KB for drag and drop across different parent components --- .../grid-drag-drop-in-different-components.md | 183 ++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 knowledge-base/grid-drag-drop-in-different-components.md 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..c4530491fe --- /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 + +There are at least two ways to approach drag and drop across different parent components: + +* 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 a siblings in their own 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 algorithm below is 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: + +* `Home.razor` is the component (page) that holds `GridContainer` components with Telerik Grids inside. +* `GridContainer.razor` is a Razor component that contains a Grid with enabled row drag and drop. +* `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 + +* [Drag and drop items between Grids]({%slug grid-drag-drop-overview%}) +* [Drag and drop items between TreeLists]({%slug treelist-drag-drop-overview%}) +* [Drag and drop items between TreeViews]({%slug treeview-drag-drop-overview%}) From 5318d457c73b654abfe02c910b823b48ba208979 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Nov 2024 09:04:25 +0200 Subject: [PATCH 2/6] Polish KB and cross-link --- components/grid/row-drag-drop.md | 5 ++--- components/treelist/row-drag-drop.md | 6 +++--- components/treeview/drag-drop.md | 2 +- .../grid-drag-drop-in-different-components.md | 10 +++++----- 4 files changed, 11 insertions(+), 12 deletions(-) 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 index c4530491fe..c12eb12cd5 100644 --- a/knowledge-base/grid-drag-drop-in-different-components.md +++ b/knowledge-base/grid-drag-drop-in-different-components.md @@ -35,14 +35,14 @@ There are at least two ways to approach drag and drop across different parent co * 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 a siblings in their own 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 algorithm below is applicable for the [Grid]({%slug grid-drag-drop-overview%}), [TreeList]({%slug treelist-drag-drop-overview%}) and [TreeView]({%slug treeview-drag-drop-overview%}). +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: -* `Home.razor` is the component (page) that holds `GridContainer` components with Telerik Grids inside. * `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. @@ -178,6 +178,6 @@ namespace YourAppName.Data ## See Also -* [Drag and drop items between Grids]({%slug grid-drag-drop-overview%}) -* [Drag and drop items between TreeLists]({%slug treelist-drag-drop-overview%}) -* [Drag and drop items between TreeViews]({%slug treeview-drag-drop-overview%}) +* [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%}) From 580037128b30127d508200e89812905714499e6a Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Nov 2024 16:54:13 +0200 Subject: [PATCH 3/6] Update knowledge-base/grid-drag-drop-in-different-components.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-drag-drop-in-different-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-drag-drop-in-different-components.md b/knowledge-base/grid-drag-drop-in-different-components.md index c12eb12cd5..9d32abc6c8 100644 --- a/knowledge-base/grid-drag-drop-in-different-components.md +++ b/knowledge-base/grid-drag-drop-in-different-components.md @@ -32,7 +32,7 @@ This KB shows how to implement drag and drop between two Telerik components, whi There are at least two ways to approach drag and drop across different parent components: -* 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 a siblings in their own parent. +* 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%}). From 33ef1681c5a4a9a8362650ef9fbfa7e44c2a3123 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Nov 2024 16:54:22 +0200 Subject: [PATCH 4/6] Update knowledge-base/grid-drag-drop-in-different-components.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-drag-drop-in-different-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-drag-drop-in-different-components.md b/knowledge-base/grid-drag-drop-in-different-components.md index 9d32abc6c8..d42d46bdd5 100644 --- a/knowledge-base/grid-drag-drop-in-different-components.md +++ b/knowledge-base/grid-drag-drop-in-different-components.md @@ -30,7 +30,7 @@ This KB shows how to implement drag and drop between two Telerik components, whi ## Solution -There are at least two ways to approach drag and drop across different parent components: +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. From c7718bebc27348d04dd78eba5b53722f6277b742 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Nov 2024 16:54:29 +0200 Subject: [PATCH 5/6] Update knowledge-base/grid-drag-drop-in-different-components.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-drag-drop-in-different-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-drag-drop-in-different-components.md b/knowledge-base/grid-drag-drop-in-different-components.md index d42d46bdd5..70c8c17b4b 100644 --- a/knowledge-base/grid-drag-drop-in-different-components.md +++ b/knowledge-base/grid-drag-drop-in-different-components.md @@ -1,6 +1,6 @@ --- 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. +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 From ea7bf49aa8722a9c9b2e52399efa8d50cd222b0c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Nov 2024 16:54:36 +0200 Subject: [PATCH 6/6] Update knowledge-base/grid-drag-drop-in-different-components.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-drag-drop-in-different-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-drag-drop-in-different-components.md b/knowledge-base/grid-drag-drop-in-different-components.md index 70c8c17b4b..2707bc4b4f 100644 --- a/knowledge-base/grid-drag-drop-in-different-components.md +++ b/knowledge-base/grid-drag-drop-in-different-components.md @@ -35,7 +35,7 @@ You can approach drag and drop across different parent components in at least tw * 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%}). +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