Skip to content

Commit 20ec2fd

Browse files
dimodidimodi
committed
kb(Grid): Add KB for drag and drop across different parent components
1 parent 0854d70 commit 20ec2fd

File tree

1 file changed

+183
-0
lines changed

1 file changed

+183
-0
lines changed

‎knowledge-base/grid-drag-drop-in-different-components.md‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
---
2+
title: Drag and Drop Items between Grids in Different Components
3+
description: Learn how to drag and drop data items between Telerik Blazor Grids, TreeLists or TreeViews which are nested inside different parent components.
4+
type: how-to
5+
page_title: How to Drag and Drop Items between Grids in Different Parent Components
6+
slug: grid-kb-drag-drop-in-different-components
7+
tags: telerik, blazor, grid, treelist, treeview, drag and drop
8+
ticketid:
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
Grid for Blazor, <br />
20+
TreeList for Blazor, <br />
21+
TreeView for Blazor
22+
</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
This KB shows how to implement drag and drop between two Telerik components, which are inside different parent Razor components.
30+
31+
## Solution
32+
33+
There are at least two ways to approach drag and drop across different parent components:
34+
35+
* 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.
36+
* 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.
37+
38+
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%}).
39+
40+
## Example
41+
42+
The following example includes three files:
43+
44+
* `Home.razor` is the component (page) that holds `GridContainer` components with Telerik Grids inside.
45+
* `GridContainer.razor` is a Razor component that contains a Grid with enabled row drag and drop.
46+
* `GridModel.cs` is the Grid model class.
47+
48+
Adjust the `YourAppName` namespace in `Home.razor` and `GridModel.cs` to run the code successfully in your app.
49+
50+
<div class="skip-repl"></div>
51+
52+
````Home.razor
53+
@page "/"
54+
55+
@using YourAppName.Data
56+
57+
<h2>Grid 1</h2>
58+
<GridContainer OnItemsDropped="@OnGridItemsDropped"
59+
@bind-GridData="@Grid1Data"
60+
@bind-GridRef="@Grid1Ref" />
61+
62+
<h2>Grid 2</h2>
63+
<GridContainer OnItemsDropped="@OnGridItemsDropped"
64+
@bind-GridData="@Grid2Data"
65+
@bind-GridRef="@Grid2Ref" />
66+
67+
@code {
68+
private TelerikGrid<GridModel>? Grid1Ref { get; set; }
69+
70+
private TelerikGrid<GridModel>? Grid2Ref { get; set; }
71+
72+
private List<GridModel> Grid1Data { get; set; } = Enumerable.Range(1, 5).Select(x => new GridModel
73+
{
74+
Id = x,
75+
Name = $"Name {x}"
76+
}).ToList();
77+
78+
private List<GridModel> Grid2Data { get; set; } = Enumerable.Range(6, 5).Select(x => new GridModel
79+
{
80+
Id = x,
81+
Name = $"Name {x}"
82+
}).ToList();
83+
84+
private void OnGridItemsDropped(GridRowDropEventArgs<GridModel> args)
85+
{
86+
var destinationData = args.DestinationGrid == Grid1Ref ? Grid1Data : Grid2Data;
87+
var destinationIndex = 0;
88+
89+
if (args.DestinationItem != null)
90+
{
91+
destinationIndex = destinationData.IndexOf(args.DestinationItem);
92+
93+
if (args.DropPosition == GridRowDropPosition.After)
94+
{
95+
destinationIndex += 1;
96+
}
97+
}
98+
99+
destinationData.InsertRange(destinationIndex, args.Items);
100+
}
101+
}
102+
````
103+
````GridContainer.razor
104+
@using YourAppName.Data
105+
106+
<TelerikGrid @ref="@GridRef"
107+
Data="@GridData"
108+
TItem="@GridModel"
109+
RowDraggable="true"
110+
OnRowDrop="@((GridRowDropEventArgs<GridModel> args) => OnGridRowDrop(args))"
111+
SelectionMode="@GridSelectionMode.Multiple"
112+
@bind-SelectedItems="@GridSelectedItems"
113+
Height="300px">
114+
<GridSettings>
115+
<GridRowDraggableSettings DragClueField="@nameof(GridModel.Name)"></GridRowDraggableSettings>
116+
</GridSettings>
117+
<GridColumns>
118+
<GridCheckboxColumn SelectAll="true" />
119+
<GridColumn Field="@(nameof(GridModel.Id))" Width="120px" />
120+
<GridColumn Field="@(nameof(GridModel.Name))" Groupable="false" />
121+
</GridColumns>
122+
</TelerikGrid>
123+
124+
@code {
125+
[Parameter]
126+
public EventCallback<GridRowDropEventArgs<GridModel>> OnItemsDropped { get; set; }
127+
128+
[Parameter]
129+
public List<GridModel> GridData { get; set; } = new();
130+
131+
[Parameter]
132+
public EventCallback<List<GridModel>> GridDataChanged { get; set; }
133+
134+
[Parameter]
135+
public TelerikGrid<GridModel>? GridRef { get; set; }
136+
137+
[Parameter]
138+
public EventCallback<TelerikGrid<GridModel>> GridRefChanged { get; set; }
139+
140+
private IEnumerable<GridModel> GridSelectedItems { get; set; } = new List<GridModel>();
141+
142+
private async Task OnGridRowDrop(GridRowDropEventArgs<GridModel> args)
143+
{
144+
// Remove items from the source Grid
145+
GridData.RemoveAll(x => args.Items.Contains(x));
146+
await GridDataChanged.InvokeAsync(GridData);
147+
148+
if (OnItemsDropped.HasDelegate)
149+
{
150+
// Add items to the destination Grid
151+
await OnItemsDropped.InvokeAsync(args);
152+
}
153+
}
154+
155+
protected override async Task OnAfterRenderAsync(bool firstRender)
156+
{
157+
if (firstRender && GridRefChanged.HasDelegate)
158+
{
159+
// Pass the Grid component references to the parent component
160+
await GridRefChanged.InvokeAsync(GridRef);
161+
}
162+
163+
await base.OnAfterRenderAsync(firstRender);
164+
}
165+
}
166+
````
167+
````GridModel.cs
168+
namespace YourAppName.Data
169+
{
170+
public class GridModel
171+
{
172+
public int Id { get; set; }
173+
174+
public string Name { get; set; } = string.Empty;
175+
}
176+
}
177+
````
178+
179+
## See Also
180+
181+
* [Drag and drop items between Grids]({%slug grid-drag-drop-overview%})
182+
* [Drag and drop items between TreeLists]({%slug treelist-drag-drop-overview%})
183+
* [Drag and drop items between TreeViews]({%slug treeview-drag-drop-overview%})

0 commit comments

Comments
 (0)