Skip to content

Commit 260339f

Browse files
dimodiDimo Dimov
dimodi
and
Dimo Dimov
authored
docs: Add KB for drag and drop to empty Grid (#557)
Co-authored-by: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
1 parent ce59e9d commit 260339f

File tree

1 file changed

+156
-0
lines changed

1 file changed

+156
-0
lines changed

‎knowledge-base/grid-cannot-drag-to-empty-grid.md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
---
2+
title: Cannot Drag Rows to Empty Grid
3+
description: How to drag Grid items to an empty Grid and improve the user experience.
4+
type: troubleshooting
5+
page_title: Drag and Drop Items to Empty Grid Doesn't Work
6+
slug: grid-cannot-drag-to-empty-grid
7+
position:
8+
tags: grid, drag, drop, empty
9+
ticketid: 1538763
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
I am not able to drag and drop rows to an empty Grid. When I try to drag an item to an empty Grid, I just get the "not allowed" tooltip and cannot drop.
27+
28+
## Cause\Possible Cause(s)
29+
30+
Row drag and drop relies on a `DestinationItem` in the destination Grid. The Grid expects the user to drop over/above/below a specific table row, and always within the table boundaries. When the destination Grid has no data, there is only one row - the "no data" row or the `NoDataTemplate`. In this case, the user can only drop over this row.
31+
32+
## Solution
33+
34+
There are 3 ways to improve the user experience and make dropping easier:
35+
36+
* Remove the destination Grid `Height`, so that there is no empty area below the "no data" row.
37+
* Apply a height CSS style to the default `NoDataTemplate` to expand it.
38+
* Use a custom `NoDataTemplate` that is high enough to fill the empty Grid data area.
39+
40+
The example below demonstrates the first two options:
41+
42+
````CSHTML
43+
<div class="box">
44+
<p>Source Grid</p>
45+
46+
<TelerikGrid Data="@MyGridData"
47+
@ref="@SourceGrid"
48+
RowDraggable="true"
49+
OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnGrid1RowDropHandler(args))">
50+
<GridSettings>
51+
<GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
52+
</GridSettings>
53+
<GridColumns>
54+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
55+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Name" Groupable="false" />
56+
</GridColumns>
57+
</TelerikGrid>
58+
</div>
59+
60+
<div class="box">
61+
<p>Empty destination Grid with no Height</p>
62+
63+
<TelerikGrid Data="@MyEmptyData">
64+
<GridColumns>
65+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
66+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Name" Groupable="false" />
67+
</GridColumns>
68+
</TelerikGrid>
69+
</div>
70+
71+
<div class="box">
72+
<p>Empty destination Grid with large Height and small NoDataTemplate</p>
73+
74+
<TelerikGrid Data="@MyEmptyData" Height="200px" Class="empty-grid">
75+
<GridColumns>
76+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
77+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Name" Groupable="false" />
78+
</GridColumns>
79+
</TelerikGrid>
80+
</div>
81+
82+
<div class="box">
83+
<p>Empty destination Grid with larger NoDataTemplate</p>
84+
85+
<style>
86+
/* how to expand the default NoDataTemplate */
87+
.my-grid-class .k-grid-norecords {
88+
height: 160px; /* Grid Height - 40px */
89+
}
90+
</style>
91+
92+
<TelerikGrid Data="@MyEmptyData" Height="200px" Class="my-grid-class">
93+
<GridColumns>
94+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
95+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
96+
</GridColumns>
97+
</TelerikGrid>
98+
</div>
99+
100+
<style>
101+
/* all these styles are not relevant to the 2 alternative solutions */
102+
.box {
103+
display: inline-block;
104+
width: 45vw;
105+
margin: 1em;
106+
}
107+
.empty-grid .k-grid-content {
108+
background: #fdd;
109+
}
110+
.empty-grid .k-grid-norecords {
111+
background: #cfc;
112+
}
113+
</style>
114+
115+
@code {
116+
TelerikGrid<SampleData> SourceGrid { get; set; }
117+
118+
private void OnGrid1RowDropHandler(GridRowDropEventArgs<SampleData> args)
119+
{
120+
MyGridData.Remove(args.Item);
121+
InsertItem(args);
122+
}
123+
124+
private void InsertItem(GridRowDropEventArgs<SampleData> args)
125+
{
126+
var destinationData = MyEmptyData;
127+
128+
var destinationIndex = 0;
129+
130+
if (args.DestinationItem != null)
131+
{
132+
destinationIndex = destinationData.IndexOf(args.DestinationItem);
133+
if (args.DropPosition == GridRowDropPosition.After)
134+
{
135+
destinationIndex += 1;
136+
}
137+
}
138+
139+
destinationData.InsertRange(destinationIndex, args.Items);
140+
}
141+
142+
public List<SampleData> MyGridData = Enumerable.Range(1, 3).Select(x => new SampleData
143+
{
144+
Id = x,
145+
Name = "Name " + x
146+
}).ToList();
147+
148+
public List<SampleData> MyEmptyData = new();
149+
150+
public class SampleData
151+
{
152+
public int Id { get; set; }
153+
public string Name { get; set; }
154+
}
155+
}
156+
````

0 commit comments

Comments
 (0)