Grouping in Blazor DataGrid Component
8 May 202524 minutes to read
The grouping feature in the Syncfusion® Blazor DataGrid allows you to organize data into a hierarchical structure, making it easier to expand and collapse records. You can group the columns by simply dragging and dropping the column header to the group drop area. To enable grouping in the grid, you need to set the AllowGrouping property to true. Additionally, you can customize the grouping options using the GridGroupSettings component.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowGrouping="true" Height="267px">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = 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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}
- You can group and ungroup columns by using the GroupColumnAsync and UngroupColumnAsync methods.
- To disable grouping for a particular column, set the AllowGrouping to false in GridColumn component.
Initial group
To enable initial grouping in the DataGrid, you can use the GridGroupSettings component and set the GridGroupSettings Columns property to a string array of column names(field of the column) that you want to group by. This feature is particularly useful when working with large datasets, as it allows you to quickly organize and analyze the data based on specific criteria.
The following example demonstrates how to set an initial grouping for the CustomerID and ShipCity columns during the initial rendering grid, by using the GridGroupSettings component of the Columns property.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowGrouping="true" Height="267px">
<GridGroupSettings Columns="@Initial"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
GridData = 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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}You can group by multiple columns by specifying a string array of column names in the columns property of the
GridGroupSettingscomponent.
Prevent grouping for particular column
The DataGrid component provides the ability to prevent grouping for a particular column. This can be useful when you have certain columns that you do not want to be included in the grouping process. It can be achieved by setting the AllowGrouping property of the particular Column to false. The following example demonstrates, how to disable grouping for CustomerID column.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowGrouping="true" Height="267px">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" AllowGrouping="false" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = 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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Hide drop area
By default, the DataGrid provides a drop area for grouping columns. This drop area allows you to drag and drop columns to group and ungroup them. However, in some cases, you may want to prevent ungrouping or further grouping a column after initial grouping.
To hide the drop area in the Syncfusion® Blazor Grid, you can set the GridGroupSettings component of the ShowDropArea property to false.
The following example, the Blazor Toggle Switch Button component is added to hide or show the drop area. When the switch is toggled, the ValueChange event is triggered and the GridGroupSettings component of the ShowDropArea property of the grid is updated accordingly.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<div style="display:flex;gap: 5px;">
<label> Hide or show drop area</label>
<SfSwitch @bind-Checked="isChecked" OffLabel="OFF" OnLabel="ON" ValueChange="Change" TChecked="bool?"></SfSwitch>
</div>
<SfGrid DataSource="@GridData" AllowGrouping="true" Height="315px">
<GridGroupSettings ShowDropArea="@show" Columns="@Initial"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public bool show { get; set; } = false;
public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
private bool? isChecked = null;
private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)
{
if (args.Checked == true)
{
show = true;
}
else
{
show = false;
}
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}By default, the group drop area will be shown only if there is at least one column available to group.
Show the grouped column
The Syncfusion® Blazor DataGrid has a default behavior where the grouped column is hidden, to provide a cleaner and more focused view of your data. However, if you prefer to show the grouped column in the grid, you can achieve this by setting the GridGroupSettings component of the ShowGroupedColumn property to true.
In the following example, the Blazor Toggle Switch Button component is added to hide or show the grouped columns. When the switch is toggled, the ValueChange event is triggered and the GridGroupSettings component of the showGroupedColumn property of the grid is updated accordingly.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<div style="display:flex;gap: 5px;">
<label> Hide or show grouped columns</label>
<SfSwitch @bind-Checked="isChecked" OffLabel="OFF" OnLabel="ON" ValueChange="Change" TChecked="bool?"></SfSwitch>
</div>
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px">
<GridGroupSettings Columns="@Initial" ShowGroupedColumn=@IsShow></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData> Grid;
public bool IsShow { get; set; } = true;
public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
private bool? isChecked = null;
private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)
{
if (args.Checked == true)
{
IsShow = false;
await Grid.Refresh();
}
else
{
IsShow = true;
await Grid.Refresh();
}
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Sort grouped columns in descending order during initial grouping
By default, grouped columns are sorted in ascending order. However, you can sort them in descending order during initial grouping by setting the Field and Direction in the GridSortSettings component of the Columns property.
The following example demonstrates how to sort the CustomerID column by setting the GridSortSettings component of the Columns property to Descending during the initial grouping of the Datagrid.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" AllowGrouping="true" Height="267px">
<GridGroupSettings Columns="@Initial"></GridGroupSettings>
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="CustomerID" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public string[] Initial = (new string[] { "CustomerID" });
protected override void OnInitialized()
{
GridData = 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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Group by format
By default, columns are grouped by the data or value present for the particular row. However, you can also group numeric or datetime columns based on the specified format. To enable this feature, you need to set the EnableGroupByFormat
property of the corresponding grid column. This feature allows you to group numeric or datetime columns based on a specific format.
The following example demonstrates how to perform a group action using the EnableGroupByFormat property for the OrderDate and Freight columns of the grid.
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px">
<GridGroupSettings ShowDropArea="false" Columns=@Format></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="yyyy/MMM" Type="ColumnType.Date" EnableGroupByFormat="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EnableGroupByFormat="true" Width="80"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData>? Grid { get; set; }
public string[] Format = (new string[] { "OrderDate", "Freight" });
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, DateTime? OrderDate, double? Freight)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.OrderDate = OrderDate;
this.Freight = Freight;
}
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", new DateTime(1996, 07, 06), 32.38));
Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 06), 11.61));
Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 06), 65.83));
Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 06), 45.78));
Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 06), 98.6));
Orders.Add(new OrderData(10253, "HANAR", new DateTime(1996, 07, 06), 103.45));
Orders.Add(new OrderData(10254, "CHOPS", new DateTime(1996, 07, 06), 103.45));
Orders.Add(new OrderData(10255, "RICSU", new DateTime(1996, 07, 06), 112.48));
Orders.Add(new OrderData(10256, "WELLI", new DateTime(1996, 07, 06), 33.45));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}Numeric columns can be grouped based on formats such as currency or percentage, while datetime columns can be grouped based on specific date or time formats.
Collapse all grouped rows at initial rendering
The Syncfusion® Blazor Grid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. The option is useful when dealing with a large dataset that contains many groups, and there is a need to provide a summarized view by initially hiding the details.
To collapse all grouped rows at the initial rendering of the Grid using the DataBound event along with the CollapseAllGroupAsync method.
The following example demonstrates how to collapse all grouped rows at the initial rendering.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" @ref="Grid" AllowGrouping="true" Height="267px">
<GridGroupSettings Columns="@groupOptions"></GridGroupSettings>
<GridEvents DataBound="DataBoundHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData> Grid;
public bool initial = true;
public string[] groupOptions = (new string[] { "ShipCity" });
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
public async Task DataBoundHandler()
{
if(initial == true)
{
await Grid.CollapseAllGroupAsync();
initial = false;
}
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}The collapse all approach is suggested for a limited number of records since collapsing every grouped record takes some time. If you have a large dataset, it is recommended to use lazy-load grouping. This approach is also applicable for the ExpandAllGroupAsync method.
Group or Ungroup column externally
By default, the Syncfusion® DataGrid supports interaction-oriented column grouping, where users manually group columns by dragging and dropping them into the grouping area of the grid. Grid provides an ability to group and ungroup a column using GroupColumnAsync and UngroupColumnAsync methods. These methods provide a programmatic approach to perform column grouping and ungrouping.
The following example demonstrates how to group and ungroup the columns in a grid. It utilizes the DropDownList component to select the column. When an external button is clicked, the GroupColumnAsync and UngroupColumnAsync methods are called to group or ungroup the selected column.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
<div style="display: flex; flex-direction: column; ">
<div style="display: flex; gap: 5px;">
<label>Column name:</label>
<SfDropDownList TValue="string" TItem="Columns" Width="120px" Placeholder="Select a Column" DataSource="@LocalData" @bind-Value="@DropDownValue">
<DropDownListFieldSettings Value="ID" Text="Value"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<div style="display: flex; gap: 5px; margin-top: 10px; margin-bottom: 10px">
<SfButton OnClick="GroupColumn">Group column</SfButton>
<SfButton OnClick="UnGroupColumn">UnGroup column</SfButton>
</div>
</div>
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px">
<GridGroupSettings ShowDropArea="false" Columns="@Initial"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData>? Grid { get; set; }
public string DropDownValue { get; set; } = "CustomerID";
public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
List<Columns> LocalData = new List<Columns>
{
new Columns() { ID= "OrderID", Value= "OrderID" },
new Columns() { ID= "CustomerID", Value= "CustomerID" },
new Columns() { ID= "ShipCity", Value= "ShipCity" },
new Columns() { ID= "ShipName", Value= "ShipName" },
};
public class Columns
{
public string ID { get; set; }
public string Value { get; set; }
}
public async Task GroupColumn()
{
await Grid.GroupColumnAsync(DropDownValue);
}
public async Task UnGroupColumn()
{
await Grid.UngroupColumnAsync(DropDownValue);
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Expand or collapse externally
The Syncfusion® Blazor DataGrid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. This section will provide guidance on enabling this functionality and integrating it into your application using the Grid properties and methods.
Expand or collapse all grouped rows
DataGrid provides an ability to expand or collapse grouped rows using ExpandAllGroupAsync and CollapseAllGroupAsync methods respectively.
In the following example, the Blazor Toggle Switch Button component is added to expand or collapse grouped rows. When the switch is toggled, the ValueChange event is triggered and the ExpandAllGroupAsync and CollapseAllGroupAsync methods are called to expand or collapse grouped rows.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<div style="display:flex;gap:10px">
<label> Expand or collapse rows </label>
<SfSwitch OffLabel="OFF" OnLabel="ON" ValueChange="Change" TChecked="bool?"></SfSwitch>
</div>
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px">
<GridGroupSettings ShowDropArea="false" Columns="@columns"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData>? Grid { get; set; }
public string[] columns = (new string[] { "CustomerID", "ShipCity" });
public bool IsShow { get; set; } = true;
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)
{
if (args.Checked == true)
{
await Grid.CollapseAllGroupAsync();
}
else
{
await Grid.ExpandAllGroupAsync();
}
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Clear grouping
The clear grouping feature in the Syncfusion® Blazor DataGrid allows you to removing all the grouped columns from the grid. This feature provides a convenient way to clear the grouping of columns in your application.
To clear all the grouped columns in the Grid, you can utilize the ClearGroupingAsync method of the grid.
The following example demonstrates how to clear the grouping using ClearGroupingAsync method in the external button click.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<SfButton OnClick="ClearGrouping"> Clear Grouping</SfButton>
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px">
<GridGroupSettings Columns="@columns"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData>? Grid { get; set; }
public string[] columns = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
private async Task ClearGrouping()
{
await Grid.ClearGroupingAsync();
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Grouping events
The DataGrid component provides two events that are triggered during the group action such as Grouping and Grouped. The Grouping event is triggered before the group action starts, and the Grouped event is triggered after the group action is completed. You can use these events to perform any custom action based on the grouping.
-
Grouping Event:
Groupingevent is triggered before the grouping action or un-grouping action is performed in the grid. It provides a way to perform any necessary operations before the group action takes place. This event provides a parameter that contains the current sorting column name, and action. -
Grouped Event:
Groupedevent is triggered after the grouping action or un-grouping action is performed in the grid. It provides a way to perform any necessary operations after the group action has taken place. This event provides a parameter that contains the current sorting column name, and action.
The following example demonstrates how the Grouping and Grouped events work when grouping is performed. The Grouping event event is used to cancel the grouping of the OrderID column. The Grouped event is used to display a message
@using Syncfusion.Blazor.Grids
@if (show == true)
{
<div style="text-align : center; color: red">
<span> Group action completed for @columnName column</span>
</div>
<br />
}
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="260px">
<GridEvents Grouping="GroupingHandler" Grouped="GroupedHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
SfGrid<OrderData>? Grid { get; set; }
public bool show { get; set; } = false;
public string columnName { get; set; }
public string requesttype { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
public async Task GroupingHandler(GroupingEventArgs args)
{
if (args.ColumnName == "OrderID")
{
args.Cancel = true;
}
}
public async Task GroupedHandler(GroupedEventArgs args)
{
columnName = args.ColumnName;
show = true;
}
}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 alcools Chevali"));
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", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}See Also
You can refer to our Blazor DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Blazor DataGrid example to understand how to present and manipulate data.