Grouping in ASP.Net MVC Grid Component
15 Feb 20247 minutes to read
The Grid has options to group records by dragging and dropping the column header to the group drop area. When grouping is applied, grid records are organized into a hierarchical structure to facilitate easier expansion and collapse of records.
To enable grouping in the grid, set the AllowGrouping
as true. Grouping options can be configured through the GroupSettings
.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowGrouping().Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
NOTE
You can group and ungroup columns by using the
groupColumn
andungroupColumn
methods.
To disable grouping for a particular column, setAllowGrouping
property ofColumn
to false.
Initial group
To apply group at initial rendering, set the column field name in the Columns
property of GroupSettings
.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowGrouping().GroupSettings(group => { group.Columns(new string[] { "CustomerID" }); }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Hide drop area
To avoid ungrouping or further grouping of a column after initial column grouping, define the ShowDropArea
of GroupSettings
as false.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowGrouping().GroupSettings(group => { group.ShowDropArea(false).Columns(new string[] { "Freight" }); }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Group with paging
On grouping columns with paging feature, the aggregated information and total items are displayed based on the current page. The grid does not consider aggregated information and total items from other pages. To get additional details (aggregated information and total items) from other pages, set the DisablePageWiseAggregates
of GroupSettings
to false.
NOTE
If remote data is bound to grid dataSource, two requests will be sent when performing grouping action; one for getting the grouped data and another for getting aggregate details and total items count.
Group by format
By default, a column will be grouped by the data or value present for the particular row. To group the numeric or datetime column based on the mentioned format, you have to enable the EnableGroupByFormat
property of the corresponding grid columns.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").EnableGroupByFormat(true).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).EnableGroupByFormat(true).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowGrouping().GroupSettings(group => { group.ShowDropArea(false).Columns(new string[] { "OrderDate", "Freight" }); }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Grouping events
During the group action, the grid component triggers two events. The ActionBegin
event triggers before the group action starts and the ActionComplete
event triggers after the group action is completed. Using these events you can perform any action.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().AllowGrouping().ActionBegin("actionHandler").ActionComplete("actionHandler").Render()
<script>
function actionHandler(args) {
alert(args.requestType + ' ' + args.type); //Custom Action
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
NOTE
The args.requestType is based on the current action name. For example, when grouping, the args.requestType value will be grouping.
Collapse by external button
You can collapse the selected group from an external button by invoking the expandCollapseRows method.
@Html.EJS().Button("collapse").Content("Collapse").IsPrimary(true).Render()
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowGrouping().GroupSettings(group => { group.Columns(new string[] { "Freight" }).ShowDropArea(false); }).Render()
<script>
document.getElementById('collapse').addEventListener('click', () => {
var grid = document.getElementById('Grid').ej2_instances[0];
if (grid.getSelectedRowIndexes().length) {
var currentTr = grid.getRows()[grid.getSelectedRowIndexes()[0]];
while (currentTr.classList && currentTr.classList.length) {
currentTr = currentTr.previousSibling;
}
let collapseElement = currentTr.querySelector('.e-recordplusexpand');
grid.groupModule.expandCollapseRows(collapseElement); //Pass the collapse row element.
}
});
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Sort grouped columns in descending order during initial grouping
By default, grouped columns are sorted in ascending order. To sort grouped columns in descending order during initial grouping, you can set the field
and direction
in the Columns property of SortSettings
.
The CustomerID
column will be sorted in descending order when the grid is initially grouped, as shown in the following example.
@{
List<object> cols = new List<object>();
cols.Add(new { field = "CustomerID", direction = "Descending" });
}
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowGrouping().AllowSorting().SortSettings(sort => sort.Columns(cols)).GroupSettings(group => { group.Columns(new string[] { "CustomerID" }); }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Limitations
- Grouping is not compatible with the following features:
- Autofill