Column Reorder in Blazor DataGrid component
29 Nov 202424 minutes to read
The Syncfusion® Blazor Grid component allows to reorder columns by drag and drop of a particular column header from one index to another index within the grid.
To reorder the columns, set the AllowReordering property to true in the grid.
Here’s an example for column reordering in your Grid component:
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" Height="315" AllowReordering="true" Width="800">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" MinWidth="100" MaxWidth="200" AutoFit=true TextAlign="TextAlign.Right" Width="200"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" MinWidth="8" Width="150" AutoFit=true></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" MinWidth="8" AutoFit=true Width="180"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" MinWidth="8" Width="150" AutoFit=true></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipCountry)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipCountry = ShipCountry;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool"));
Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipCountry { get; set; }
}The following represents Reordering of columns
- You can disable reordering a particular column by setting the AllowReordering property of GridColumn as false.
* 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.
Prevent reordering for particular column
By default, all columns in the Syncfusion® Blazor Grid 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 property of that particular column to false. Here is an example that demonstrates how to prevent reordering for a specific column:
In this example, the ShipCity column is prevented from being reordered by setting the AllowReordering property to false.
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" Height="315" AllowReordering="true" AllowPaging="true">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="TextAlign.Right" AllowReordering="false" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool"));
Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Reorder columns externally
The Syncfusion® Blazor Grid 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.
Reorder column based on index
You can use the ReorderColumnByIndexAsync method to reorder columns based on their current index. This method takes two arguments:
- fromIndex : Current index of the column to be reordered.
- toIndex : New index of the column after the reordering.
Here is an example of how to use the ReorderColumnByIndexAsync method:
In this example, we are moving the column at index 1 to index 2.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using BlazorApp1.Data
<SfButton OnClick="ReOrder">REORDER COLUMN BY INDEX</SfButton>
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowReordering="true" AllowPaging="true">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipRegion) HeaderText="Ship Region" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public void ReOrder()
{
this.Grid.ReorderColumnByIndexAsync(1, 2);
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName,string ShipRegion)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
this.ShipRegion = ShipRegion;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool", "CJ"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "SP"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "Táchira"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Táchira"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "NM"));
Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool", "SP"));
Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten", "NM"));
Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten","CJ"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
public string ShipRegion { get; set; }
}Reorder column based on target index
You can also use the ReorderColumnByTargetIndexAsync method to reorder column columns based on the target index. This method takes two arguments:
- FieldName : Field name of the column to be reordered
- toIndex : New index of the column after the reordering
Here is an example of how to use the ReorderColumnByTargetIndexAsync method to reorder column based on target index:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using BlazorApp1.Data
<SfButton OnClick="SingleColumn">REORDER SINGLE COLUMN </SfButton>
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowReordering="true" AllowPaging="true">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipRegion) HeaderText="Ship Region" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public void SingleColumn()
{
this.Grid.ReorderColumnByTargetIndexAsync("OrderID", 3);
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName,string ShipRegion)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
this.ShipRegion = ShipRegion;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool", "CJ"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "SP"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "Táchira"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Táchira"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "NM"));
Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool", "SP"));
Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten", "NM"));
Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten","CJ"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
public string ShipRegion { get; set; }
}Reorder column based on field names
The ReorderColumnsAsync method of the Grid allows you to reorder list of columns based on their field names. This method takes two arguments:
- FromFieldName: The field name of the column you want to move.
- ToFieldName : The field name of the column you want to move the column to.
Here is an example of how to use the ReorderColumnsAsync method to reorder multiple columns based on field names:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using BlazorApp1.Data
<SfButton OnClick="ReorderSingleColumn" CssClass="e-primary" IsPrimary="true" Content="REORDER SINGLE COLUMN"></SfButton>
<SfButton OnClick="ReorderMultipleColumn" CssClass="e-primary" IsPrimary="true" Content="REORDER MULTIPLE COLUMN"></SfButton>
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowReordering="true" AllowPaging="true">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipRegion) HeaderText="Ship Region" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<string> ColumnName = (new List<string> { "ShipCity", "ShipRegion", "ShipName" });
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public void ReorderSingleColumn()
{
this.Grid.ReorderColumnsAsync("ShipCity", "OrderID");
}
public void ReorderMultipleColumn()
{
this.Grid.ReorderColumnsAsync(ColumnName, "OrderID");
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName,string ShipRegion)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
this.ShipRegion = ShipRegion;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool", "CJ"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "SP"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "Táchira"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Táchira"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "NM"));
Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool", "SP"));
Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten", "NM"));
Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten","CJ"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
public string ShipRegion { get; set; }
}