Skip to content

Commit daac408

Browse files
Venkat-AyothiVenkat-Ayothi
authored
Merge pull request #7120 from syncfusion-content/992126-Column1
992126: Updated the UG content and samples for Columns in Blazor DataGrid
2 parents 4e7934c + 1037e45 commit daac408

File tree

3 files changed

+185
-107
lines changed

3 files changed

+185
-107
lines changed

‎blazor/datagrid/column-reorder.md‎

Lines changed: 78 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
---
22
layout: post
33
title: Column Reorder in Blazor DataGrid Component | Syncfusion
4-
description: Checkout and learn here all about column reorder in the Syncfusion Blazor DataGrid component and much more details.
4+
description: Learn how to reorder columns in Syncfusion Blazor DataGrid using methods and events for single, multiple, and interactive reordering.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug
88
---
99

1010
# Column Reorder in Blazor DataGrid
1111

12-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows to reorder columns by drag and drop of a particular column header from one index to another index within the Grid.
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows columns to be reordered by dragging and dropping a column header from one position to another within the Grid.
1313

14-
To reorder the columns, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property to true in the Grid.
15-
16-
Here’s an example for column reordering in your Grid:
14+
To enable column reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**.
1715

1816
{% tabs %}
1917
{% highlight razor tabtitle="Index.razor" %}
@@ -80,14 +78,16 @@ public class OrderDetails
8078

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

83-
> * You can disable reordering a particular column by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) as **false**.
84-
> * When columns are reordered, the position of the corresponding column data will also be changed. As a result, you should ensure that any additional code or logic that relies on the order of the column data is updated accordingly.
81+
> * To disable reordering for a specific column, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
82+
> * When columns are reordered, the position of the corresponding column data also changes. Ensure that any logic dependent on column order is updated accordingly.
8583
8684
## Prevent reordering for particular column
8785

88-
By default, all columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be reordered by dragging and dropping their headers to another location within the Grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that particular column to false. Here is an example that demonstrates how to prevent reordering for a specific column:
86+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows all columns to be reordered by dragging and dropping their headers. However, certain columns are intended to remain fixed in position.
87+
88+
To disable reordering for a specific column, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
8989

90-
In this example, the **ShipCity** column is prevented from being reordered by setting the `AllowReordering` property to **false**:
90+
In this configuration, reordering is disabled for the **ShipCity** column.
9191

9292
{% tabs %}
9393
{% highlight razor tabtitle="Index.razor" %}
@@ -152,22 +152,22 @@ public class OrderDetails
152152

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

155-
## Reorder columns externally
156-
157-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the Grid, based on their index or target index, or by using their field name.
155+
## Reorder columns via programmatically
158156

159-
> When reordering columns externally, you must set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the Grid to **true**.
157+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows columns to be reordered programmatically using built-in methods. Columns can be moved based on index or field name, enabling dynamic layout control through external UI elements such as buttons.
160158

161-
### Reorder column based on index
159+
> To reorder columns externally, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**.
162160
163-
You can use the [ReorderColumnByIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByIndexAsync_System_Int32_System_Int32_) method to reorder columns based on their current index. This method takes two arguments:
161+
### Reorder column by index
164162

165-
* **fromIndex** : Current index of the column to be reordered.
166-
* **toIndex** : New index of the column after the reordering.
163+
To reorder columns by their current index, use the [ReorderColumnByIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByIndexAsync_System_Int32_System_Int32_) method.
167164

168-
Here is an example of how to use the `ReorderColumnByIndexAsync` method:
165+
| Parameter | Type | Description |
166+
|-------------|------|--------------------------------------------------|
167+
| fromIndex | int | Current index of the column to be moved. |
168+
| toIndex | int | Target index where the column should be placed. |
169169

170-
In this example, we are moving the column at index 1 to index 2.
170+
In this configuration, the column at index **1** is moved to index **2**.
171171

172172
{% tabs %}
173173
{% highlight razor tabtitle="Index.razor" %}
@@ -243,14 +243,18 @@ public class OrderDetails
243243

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

246-
### Reorder column based on target index
246+
### Reorder column by target index
247247

248-
You can also use the [ReorderColumnByTargetIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByTargetIndexAsync_System_String_System_Int32_) method to reorder column columns based on the target index. This method takes two arguments:
248+
To reorder a column by its field name and target index, use the [ReorderColumnByTargetIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByTargetIndexAsync_System_String_System_Int32_) method.
249249

250-
* **FieldName** : Field name of the column to be reordered
251-
* **toIndex** : New index of the column after the reordering
252250

253-
Here is an example of how to use the `ReorderColumnByTargetIndexAsync` method to reorder column based on target index:
251+
| Parameter | Type | Description |
252+
|-------------|--------|--------------------------------------------------|
253+
| fieldName | string | Field name of the column to be moved. |
254+
| toIndex | int | Target index where the column should be placed. |
255+
256+
257+
In this configuration, the column with field name **OrderID** is moved to index **3**.
254258

255259
{% tabs %}
256260
{% highlight razor tabtitle="Index.razor" %}
@@ -326,18 +330,30 @@ public class OrderDetails
326330

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

329-
### Reorder column based on field names
333+
### Reorder column by field names
334+
335+
Columns can be reordered programmatically by specifying the field names of the columns to move and the target position. This functionality supports both single-column and multi-column reordering.
336+
337+
**Reorder a single column**
338+
339+
The [ReorderColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) method reorders a single column by specifying its current field name and the target column's field name.
340+
341+
342+
| Parameter | Type | Description |
343+
|------------------|----------|--------------------------------------------------------------------------|
344+
| fromFieldName | string | Field name of the column to be moved. |
345+
| toFieldName | string | Field name of the column before which the column should be placed. |
346+
330347

331-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to programmatically reorder columns using the [ReorderColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) and [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) methods. These methods provide flexibility for dynamically rearranging columns based on their field names.
348+
**Reorder multiple columns**
332349

333-
1. `ReorderColumnAsync`: This method is used to reorder a single column by specifying its current field name and the target column's field name. It takes the following arguments:
334-
* **FromFieldName**: The field name of the column to be moved.
335-
* **ToFieldName**: The field name of the column you want to move the column to.
336-
2. `ReorderColumnsAsync`: This method reorders multiple columns simultaneously by providing their field names in a list. It takes the following arguments:
337-
* **FromFieldName**: The field name of the column you want to move.
338-
* **ToFieldName** : The field name of the column you want to move the column to.
350+
The [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method reorders multiple columns simultaneously by providing a list of field names and the target column's field name.
339351

340-
Here is an example demonstrating how to use the `ReorderColumnAsync` and `ReorderColumnsAsync` method to reorder single and multiple columns based on their field names:
352+
353+
| Parameter | Type | Description |
354+
|-------------------|-----------------|--------------------------------------------------------------------------|
355+
| fromFieldNames | List&lt;string&gt; | Field names of the columns to be moved. |
356+
| toFieldName | string | Field name of the column before which the group should be placed. |
341357

342358
{% tabs %}
343359
{% highlight razor tabtitle="Index.razor" %}
@@ -420,13 +436,38 @@ public class OrderDetails
420436

421437
## Reorder events
422438

423-
When reordering columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events:
439+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides events to handle column reordering interactions. These events allow executing custom logic during drag-and-drop operations.
440+
441+
1. [ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering): Triggered while a column header is being dragged.
442+
2. [ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered): Triggered when a column header is dropped on the target column.
443+
444+
### ColumnReordering
445+
446+
The `ColumnReordering` event is triggered while a column header is being dragged during a reordering operation. This event can be used to inspect the column being moved and optionally cancel the reordering based on custom logic.
447+
448+
**Event Arguments**
449+
450+
The event uses the [ColumnReorderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnReorderingEventArgs.html) class, which includes the following properties:
451+
452+
| Event Argument | Type | Description |
453+
|--------------------|------------------------|------------------------------------------------------------------------------|
454+
| ReorderingColumns | List&lt;GridColumn&gt; | Represents the columns being dragged. |
455+
| Cancel | bool | Set to **true** to cancel the reordering operation. |
456+
457+
458+
### ColumnReordered
459+
460+
The `ColumnReordered` event is triggered after a column header is dropped on the target column during a reordering operation. This event allows executing custom logic after the reordering is completed, such as updating UI elements or logging changes.
461+
462+
**Event Arguments**
424463

425-
1. The [ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering) event triggers when column header element is dragged (moved) continuously.
464+
The event uses the [ColumnReorderedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnReorderedEventArgs.html) class, which includes the following properties:
426465

427-
2. The [ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered) event triggers when a column header element is dropped on the target column.
466+
| Parameter | Type | Description |
467+
|----------------------|------------------------|-----------------------------------------------------------------------------|
468+
| ReorderingColumns | List&lt;GridColumn&gt; | Represents the columns that were reordered. |
469+
| ToColumn | GridColumn | Destination column where the reordered columns are placed. |
428470

429-
In the following example, we have implemented the `ColumnReordering` and `ColumnReordered` events in the Grid:
430471

431472
{% tabs %}
432473
{% highlight razor tabtitle="Index.razor" %}

0 commit comments

Comments
 (0)