Skip to content

Commit 52b80b5

Browse files
committed
Merge branch 'development' of https://github.com/syncfusion-content/blazor-docs into 984330-AI-Prompt
2 parents d629615 + a03ce1b commit 52b80b5

17 files changed

+1473
-928
lines changed

blazor-toc.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4159,13 +4159,15 @@
41594159
<li> <a href="/blazor/rich-text-editor/enter-key">Enter Key Configuration</a></li>
41604160
<li> <a href="/blazor/rich-text-editor/undo-redo-manager">Undo Redo Manager</a></li>
41614161
<li> <a href="/blazor/rich-text-editor/import-and-export">Import/Export</a></li>
4162+
<li> <a href="/blazor/rich-text-editor/http-client-instance">Http Client</a></li>
41624163
<li> <a href="/blazor/rich-text-editor/exec-command">Execute Command</a></li>
41634164
<li> <a href="/blazor/rich-text-editor/style">Style and Appearance</a></li>
41644165
<li> <a href="/blazor/rich-text-editor/style-encapsulation">Style Encapsulation</a></li>
41654166
<li> <a href="/blazor/rich-text-editor/globalization">Globalization</a></li>
41664167
<li> <a href="/blazor/rich-text-editor/keyboard-support">Keyboard shortcuts</a></li>
41674168
<li> <a href="/blazor/rich-text-editor/accessibility">Accessibility</a></li>
41684169
<li> <a href="/blazor/rich-text-editor/webassembly-performance">WebAssembly Performance</a></li>
4170+
<li> <a href="/blazor/rich-text-editor/import-export">Import and Export</a></li>
41694171
<li> <a href="/blazor/rich-text-editor/miscellaneous">Miscellaneous</a></li>
41704172
<li> <a href="/blazor/rich-text-editor/events">Events</a></li>
41714173
<li>How To

blazor/datagrid/connecting-to-database/dapper.md

Lines changed: 228 additions & 125 deletions
Large diffs are not rendered by default.

blazor/datagrid/connecting-to-database/microsoft-sql-server.md

Lines changed: 256 additions & 122 deletions
Large diffs are not rendered by default.

blazor/datagrid/connecting-to-database/mysql-server.md

Lines changed: 171 additions & 126 deletions
Large diffs are not rendered by default.

blazor/datagrid/connecting-to-database/postgresql-server.md

Lines changed: 176 additions & 127 deletions
Large diffs are not rendered by default.

blazor/datagrid/connecting-to-database/sqlite-server.md

Lines changed: 180 additions & 117 deletions
Large diffs are not rendered by default.

blazor/datagrid/detail-template.md

Lines changed: 194 additions & 200 deletions
Large diffs are not rendered by default.

blazor/datagrid/row-drag-and-drop.md

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
---
22
layout: post
33
title: Row Drag and Drop in Blazor DataGrid | Syncfusion
4-
description: Checkout and learn here all about Row Drag and Drop in Syncfusion Blazor DataGrid and much more details.
4+
description: Learn how to enable row drag and drop in Syncfusion Blazor DataGrid, including reordering, cross-grid dragging, custom drops, and event handling.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug
88
---
99

1010
# Row Drag and Drop in Blazor DataGrid
1111

12-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides built-in support for row drag and drop functionality. This feature allows you to easily rearrange rows within the Grid by dragging and dropping them to new positions. Additionally, you can also drag and drop rows from one Grid to another Grid, as well as drag and drop rows to custom components.
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports built-in row drag-and-drop functionality. Rows can be reordered within the grid, moved between grids, or dropped into custom components.
1313

14-
To enable row drag and drop, set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) to **true**. The target component where the Grid rows are to be dropped can be set by using the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID).
14+
Enable row drag and drop by setting [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) to true. Configure the drop target using the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property in [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html).
1515

16-
> * Selection feature must be enabled for row drag and drop.
17-
> * Multiple rows can be selected by clicking and dragging inside the Grid. For multiple row selection, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property must be set to multiple.
16+
> - Row selection must be enabled to perform row drag and drop.
17+
> - To drag multiple rows, set [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) to Multiple.
1818
1919
## Drag and drop within DataGrid
2020

21-
The drag and drop feature allows you to rearrange rows within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid by dragging them using a drag icon. This feature can be enabled by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true**. This property is a boolean value that determines whether row drag and drop is enabled or not. By default, it is set to **false**, which means that row drag and drop is disabled.
22-
23-
Here’s an example of how to enable drag and drop within the Grid:
21+
The drag and drop feature enables reordering of rows within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** to enable this feature. By default, the value is **false**.
2422

2523
{% tabs %}
2624
{% highlight razor tabtitle="Index.razor" %}
@@ -105,11 +103,8 @@ Here’s an example of how to enable drag and drop within the Grid:
105103

106104
## Drag and drop to DataGrid
107105

108-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid row drag and drop allows you to drag Grid rows and drop to another Grid. This feature can be enabled by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** in the Grid. This property specifies whether to enable or disable the row drag and drop feature in the Grid. By default, this property is set to **false**, which means that row drag and drop functionality is not enabled.
109-
110-
To specify the target component where the Grid rows should be dropped, use the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property of the [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html) object. The `TargetID` property takes the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ID) of the target component as its value.
111106

112-
Here’s an example code snippet that demonstrates how to enable Row drag and drop another Grid:
107+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
113108

114109
{% tabs %}
115110
{% highlight razor tabtitle="Index.razor" %}
@@ -206,9 +201,9 @@ Here’s an example code snippet that demonstrates how to enable Row drag and dr
206201

207202
## Drag and drop in empty area
208203

209-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports drag and drop functionality. By default, the `AllowEmptyAreaDrop` property is enabled, enhancing the user experience by allowing rows to be dropped anywhere within the DataGrid content. Whenever rows are dropped in an empty area, they are placed at the end of the DataGrid. This applies to both within the same Grid and between different DataGrids.
210-
211-
If you prefer to show the drop indicator only when hovering over rows, you can disable the `AllowEmptyAreaDrop` property to achieve this.
204+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dropping rows in empty content areas. By default, the `AllowEmptyAreaDrop` setting is enabled, allowing rows to be dropped anywhere within the grid content. Rows dropped in an empty area are appended to the end of the data. This applies to both within-grid and between-grid scenarios.
205+
206+
To display the drop indicator only when hovering over rows, disable the AllowEmptyAreaDrop property in the RowDropSettings configuration.
212207

213208
{% tabs %}
214209
{% highlight razor tabtitle="Index.razor" %}
@@ -288,9 +283,9 @@ public class OrdersDetails
288283

289284
## Drag and drop to custom component
290285

291-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the feature to drag and drop Grid rows to any custom component. This feature allows you to easily move rows from one component to another without having to manually copy and paste data. To enable row drag and drop, you need to set the [AllowRowDragAndDrop] property to **true** and defining the custom component [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ID) in the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property of the [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html) object. The `ID` provided in `TargetID` should correspond to the `ID` of the target component where the rows are to be dropped.
286+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the **ID** of the target component.
292287

293-
In the below example, the selected Grid row is dragged and dropped in to the [TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) by using [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event. Once the row is dropped into the TreeGrid, removed the corresponding Grid row from Grid and its data inserted in custom component:
288+
In the following example, selected grid rows are dropped into a TreeGrid using the [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event. After the drop, the corresponding rows are removed from the source grid and added to the target:
294289

295290
{% tabs %}
296291
{% highlight razor tabtitle="Index.razor" %}
@@ -624,7 +619,7 @@ public class WrapData
624619
Priority = "Low",
625620
Approved = false
626621
}
627-
}
622+
}
628623
},
629624
new WrapData
630625
{
@@ -675,11 +670,11 @@ public class WrapData
675670

676671
## Drag and drop events
677672

678-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a set of events that are triggered during drag and drop operations on Grid rows. These events allow you to customize the drag element, track the progress of the dragging operation, and perform actions when a row is dropped on a target element. The following events are available:
673+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid exposes events to customize and track drag-and-drop operations:
679674

680-
* [RowDragStarting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDragStarting) - This event is triggered when the dragging of a Grid row starts.
681-
* [RowDropping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropping) - This event triggered when the dragged elements are being dropped on the target element.
682-
* [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) - This event is triggered when a drag element is dropped onto a target element.
675+
- [RowDragStarting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDragStarting) – Triggered when dragging starts.
676+
- [RowDropping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropping) – Triggered while dragged rows are being dropped on the target; can be canceled.
677+
- [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) – Triggered after rows are dropped on the target.
683678

684679
{% tabs %}
685680
{% highlight razor tabtitle="Index.razor" %}
@@ -788,12 +783,12 @@ public class OrderData
788783

789784
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrpWVNeByBihtpL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
790785

791-
> For performing row drag and drop action on the Grid, any one of the columns should be defined as a primary key using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property.
786+
> To perform row drag and drop, define at least one column as a primary key using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property.
792787
793788
## Limitations
794789

795-
* Multiple rows can be drag and drop in the row selections basis.
796-
* Single row is able to drag and drop in same Grid without enable the row selection.
797-
* Row drag and drop feature is not having built in support with sorting, filtering, hierarchy Grid and row template features of Grid.
798-
* The row drag-and-drop feature for grouping currently lacks support for lazy load grouping.
799-
* Drag and drop within the same group key is not supported. Grid does not support the drag-and-drop functionality for multiple rows originating from different grouped collections.
790+
- Multiple rows can be dragged and dropped based on the current selection.
791+
- A single row can be dragged and dropped within the same grid even if multiple selection is not enabled.
792+
- Row drag and drop does not have built-in support when combined with sorting, filtering, hierarchy grid, or row template features.
793+
- Row drag and drop with grouping does not support lazy-load grouping.
794+
- Dragging and dropping within the same group key is not supported. The grid does not allow drag-and-drop for multiple rows that belong to different grouped collections.

0 commit comments

Comments
 (0)