Grouping in ASP.NET Core Data Grid

7 Sep 202624 minutes to read

The grouping feature in the Data Grid organizes data into a hierarchical structure, allowing grouped records to be expanded and collapsed for improved readability and analysis.

To enable grouping, set the allowGrouping property to true. When grouping is enabled, column headers can be dragged into the group drop area to organize data.

The groupSettings property provides configuration options for customizing grouping behavior, including:

  • Showing or hiding the group drop area.
  • Controlling the display of grouped columns.
  • Defining custom caption templates for grouped rows.
<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="348px">    
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Grouping

  • Columns can be grouped and ungrouped dynamically using the groupColumn and ungroupColumn methods.
  • To disable grouping for a specific column, set the allowGrouping property to false in column configuration.

Initial group

Initial grouping in the grid is configured by assigning an array of column field names to the groupSettings.columns property. This approach is effective for organizing large datasets based on predefined criteria.

The following example groups data by “Customer ID” and “Ship City”, creating a two-level hierarchy with records grouped first by “Customer ID” and then by “Ship City” within each group.

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px"> 
    <e-grid-groupsettings columns="@(new string[] {"CustomerID","Freight"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>    
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>    
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Initial group

To group multiple columns, specify an array of column names in the groupSettings.columns property.

Single and multiple column grouping

The Data Grid supports grouping by one or more columns to organize data into hierarchical sections. In single-column grouping, records are grouped based on the values of a single column. In multiple-column grouping, records are grouped by multiple columns in sequence, creating nested groups that provide a more structured view of the data.

The following example demonstrates switching between single-column and multiple-column grouping using a button click.

<button id="toggleGrouping" class="e-btn">Switch to Single Grouping</button>

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px">
    <e-grid-groupsettings columns="@(new string[] { "CustomerID", "Freight" })"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    var isMultipleGrouping = true;

    document.getElementById('toggleGrouping').addEventListener('click', function () {
        var grid = document.getElementById('grid').ej2_instances[0];
        grid.groupSettings.columns = [];

        grid.groupSettings.columns = isMultipleGrouping
            ? ['CustomerID']
            : ['CustomerID', 'Freight'];
        button.textContent = isMultipleGrouping ? 'Switch to Multiple Grouping' : 'Switch to Single Grouping';

        isMultipleGrouping = !isMultipleGrouping;
    });
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Single and multiple grouped columns

Prevent grouping for particular column

Some columns, such as those containing unique identifiers, may not require grouping. In such cases, grouping can be disabled by setting the allowGrouping property to false in the column configuration, preventing the column header from being placed in the group drop area.

The following example prevents grouping on the “Customer ID” column. While other columns can be grouped, “Customer ID” cannot be dragged to the group drop area.

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px">    
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" allowGrouping="false" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Hide the group drop area

By default, the Data Grid shows a group drop area container where column headers can be dragged to configure grouping or ungrouping. In scenarios where grouping through the drag-and-drop interface is not required, this group drop area can be hidden.

To disable the group drop area container, set the groupSettings.showDropArea property to false. This hides the group drop area from the UI, while still allowing grouping to be managed programmatically using the Data Grid groupColumn and ungroupColumn methods if needed.

In the following example, the Switch component is added to hide or show the drop area. When the switch is toggled, the change event is triggered and the groupSettings.showDropArea property of the grid is updated accordingly.

<div style="padding-bottom: 20px;display: flex">
    <label style="margin-right:5px;margin-top: -3px;font-weight: bold;">Hide or show drop area</label>
    <ejs-switch id="switch" checked="true" change="onSwitchChange"></ejs-switch>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.DataSource" allowGrouping="true" height="330px" >    
    <e-grid-groupsettings showDropArea="true" columns="@(new string[] {"CustomerID", "ShipCity"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function onSwitchChange(args) {
        var grid = document.getElementById("grid").ej2_instances[0];
        grid.groupSettings.showDropArea = args.checked;
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Hide drop area

By default, the group drop area will be shown only if there is at least one column available to group.

Show the grouped column

By default, when a column is grouped in the Data Grid, that column is hidden from the display. This keeps the layout clean and makes grouped rows easier to read. To keep grouped columns visible, set the groupSettings.showGroupedColumn property to true.

In the example below, a Switch component is used to control this setting. When the switch is toggled, the change event updates the Data Grid’s groupSettings.showGroupedColumn property, showing or hiding the grouped columns as needed.

<div style="padding-bottom: 20px; display: flex">
    <label style="margin-right:5px;margin-top: -3px;font-weight: bold;">Hide or show grouped columns</label>
    <ejs-switch id="switch" checked="true" change="onSwitchChange"></ejs-switch>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px" >    
    <e-grid-groupsettings showGroupedColumn="true" columns="@(new string[] {"CustomerID", "ShipCity"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
   function onSwitchChange(args) {
      var grid = document.getElementById("grid").ej2_instances[0];
      grid.groupSettings.showGroupedColumn = args.checked;
   }
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Show the grouped column

Reordering grouped columns

By default, grouped columns follow the order in which they are added to the group drop area. Because grouping order determines the hierarchy of data organization, modifying this order can present different structural views. For example, grouping by “Region” before “Sales Person” produces a different arrangement than the reverse.

To allow reordering, set groupSettings.allowReordering to true. This enables drag-and-drop rearrangement of grouped column badges, and the grid dynamically updates the data hierarchy to reflect the new order.

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px">   
    <e-grid-groupsettings allowReordering="true" columns="@(new string[] { "ShipCity"})"></e-grid-groupsettings> 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Reordering on grouped columns

Sort groups in descending order

Grouped columns are sorted in ascending order by default (A-Z, 0-9, oldest to newest). To display grouped values in descending order (Z-A, 9-0, newest to oldest), configure the sortSettings.columns property by specifying the corresponding field and setting its direction to Descending.

Since the grouped column order is driven by the sort pipeline, ensure the allowSorting property is enabled.

@{
    List<object> sortOptions = new List<object>();
    sortOptions.Add(new { field = "CustomerID", direction = "Descending" });
 }
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" allowSorting="true" height="358px" >    
    <e-grid-groupsettings columns="@(new string[] {"CustomerID"})"></e-grid-groupsettings> 
    <e-grid-sortsettings columns="sortOptions"></e-grid-sortsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Sort grouped columns in descending order

Group by format

By default, grouping is based on the raw data values of each row. For numeric or datetime columns, grouping can also be performed using formatted values. For example, dates can be grouped by month and numbers can be grouped by a specified range. To enable this behavior, set the enableGroupByFormat property on the corresponding column.

The following example demonstrates grouping the “Order Date” and “Freight” columns using formatted values.

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px" > 
    <e-grid-groupsettings showDropArea="false" columns="@(new string[] { "OrderDate","Freight"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMMM" enableGroupByFormat="true" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" enableGroupByFormat="true" width="150"></e-grid-column>        
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Group by format

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.

Group or ungroup column externally

The Data Grid supports both interactive and programmatic approaches to column grouping. Columns can be grouped manually via drag-and-drop or programmatically using the groupColumn and ungroupColumn methods.

The following example demonstrates programmatic grouping and ungrouping of columns. A DropDownList component is used for column selection, and the selected column is grouped or ungrouped using the Group Column and Ungroup Column buttons, which invoke the appropriate Data Grid API method.

@{
    ViewBag.dropDownData = new List<object>
    {
        new { value = "OrderID", text = "Order ID" },
        new { value = "CustomerID", text = "Customer ID" },
        new { value = "ShipCity", text = "Ship City" },
        new { value = "ShipName", text = "Ship Name" },
    };
}
<div style="padding-bottom:20px">
    <div style="display: flex">
        <label style="padding: 5px 28px 0 0"> Column name :</label>
        <span style="height:fit-content">
            <ejs-dropdownlist id="dropDownColumn" index="1" dataSource="@ViewBag.dropDownData">
                <e-dropdownlist-fields value="value" text="text"></e-dropdownlist-fields>
            </ejs-dropdownlist>            
        </span>
    </div>
    <div style="margin-top: 15px">
        <ejs-button id="groupButton" cssClass="e-primary" content="Group column"></ejs-button>
        <ejs-button id="ungroupButton" cssClass="e-primary" content="UnGroupColumn"></ejs-button>
    </div>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px">
    <e-grid-groupsettings showDropArea="false" columns="@(new string[] {"CustomerID", "ShipCity"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    document.getElementById('groupButton').onclick = handleGroupAction;
    document.getElementById('ungroupButton').onclick = handleGroupAction;
    function handleGroupAction(event) {
        var grid = document.getElementById("grid").ej2_instances[0];
        var dropDownValue=document.getElementById("dropDownColumn").ej2_instances[0].value
        event.target.id === "groupButton" ? grid.groupColumn(dropDownValue):grid.ungroupColumn(dropDownValue);
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Group or ungroup column externally

Collapse all groups on initial load

The Data Grid provides the ability to expand or collapse grouped rows, enabling better control over data visibility. This is especially useful for large datasets where an initial summarized view is preferred.

To collapse all grouped rows on initial render, use the dataBound event in combination with the collapseAll method. This is shown in the example below.

The following example demonstrates how to collapse all grouped rows at the initial rendering.

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" dataBound="dataBound" allowGrouping="true" height="330px" >   
    <e-grid-groupsettings columns="@(new string[] {"ShipCity"})"></e-grid-groupsettings> 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    let isFirstDataBound = true;
   function dataBound() {
        if (isFirstDataBound === true) {
            var grid = document.getElementById("grid").ej2_instances[0];
            grid.groupModule.collapseAll();
            isFirstDataBound = false;
        }
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Collapse all grouped rows at initial rendering

All grouped rows can also be collapsed at the initial rendering using the groupCollapseAll method within the dataBound event. The following code snippet demonstrates this approach:

    dataBound() {
        if (this.initial === true) {
           var grid = document.getElementById("grid").ej2_instances[0];
           grid.groupCollapseAll();
           initial = false;
        }
    }

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 groupExpandAll method.

Expand or collapse externally

The Data Grid supports external control of grouped row visibility through programmatic expand and collapse. This functionality can be integrated using the grid’s methods to manage grouped data display dynamically.

Expand or collapse all groups

The Data Grid enables programmatic expand and collapse of all grouped rows using the groupExpandAll and groupCollapseAll methods.

In the example below, the Switch component is used to control the visibility of grouped rows. When toggled, the change event triggers the appropriate method to expand or collapse all groups accordingly.

<div style="padding-bottom: 20px; display: flex">
    <label style="margin-right:5px;margin-top: -3px;font-weight: bold;">Expand or collapse rows</label>
    <ejs-switch id="switch" change="onSwitchChange"></ejs-switch>
 </div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px" > 
   <e-grid-groupsettings showDropArea="false" columns="@(new string[] {"CustomerID", "ShipCity"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function onSwitchChange(args) {
       var grid = document.getElementById("grid").ej2_instances[0];
       if (args.checked) {
          grid.groupCollapseAll();
       } else {
          grid.groupExpandAll();
       }
    }
 </script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Expand or collapse all grouped rows

Expand or collapse a specific group

The Data Grid allows programmatic expand or collapse of specific grouped rows through the expandCollapseRows method, which toggles the state of a targeted group caption row based on its current visibility.

To implement this functionality, follow these steps:

  • Capture the grouped row index via an input field.
  • Use a button to trigger a method.
  • Retrieve grouped rows using querySelectorAll method.
  • Identify the target group caption element by index.
  • Call expandCollapseRows to toggle its state.

The example below demonstrates collapsing a selected grouped row using an external button.

<div style="display:flex">
    <input type="number" id="rowIndex" placeholder="Enter Grouped Row Index" />
    <ejs-button id="valueButton" cssClass="e-primary" content="Collapse or Expand Row"></ejs-button>
 </div>
 <div style="padding-top:5px">
     <p style="color:red;" id="message"></p>
 </div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="330px">
    <e-grid-groupsettings columns="@(new string[] {"CustomerID"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120" allowGrouping="false"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150" allowGrouping="false"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150" allowGrouping="false"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150" allowGrouping="false"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    document.getElementById('valueButton').addEventListener('click', function () {
        var grid = document.getElementById("grid").ej2_instances[0];
        const groupedRows = Array.from(
            grid.getContentTable().querySelectorAll('.e-recordplusexpand, .e-recordpluscollapse')
        );
        let groupedRowIndex = parseInt(document.getElementById('rowIndex').value);
        if (groupedRows.length >= 0 && (groupedRowIndex < groupedRows.length)) {
            document.getElementById('message').innerText = '';
            const groupCaptionElement = groupedRows[groupedRowIndex];
            grid.groupModule.expandCollapseRows(groupCaptionElement);
        } else {
            document.getElementById('message').innerText =
               'The entered index exceeds the total number of grouped rows. Please enter a valid grouped index.';
        }
    });
</script>
<style>
    #rowIndex {
        margin-right: 10px;
    }
</style>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Expand or collapse selected grouped row

Use grouping with paging

The Data Grid component supports column grouping in combination with paging. When grouping is enabled, aggregated values and item counts are calculated based on the current page by default. As a result, group footers and caption summaries reflect only the visible page data. To include aggregate values and total item counts across all pages, set the groupSettings.disablePageWiseAggregates property to true.

This option is useful when grouped aggregates must represent the complete dataset rather than only the records visible on the current page.

When using remote data binding, enabling this option sends two separate requests during grouping: one to retrieve the grouped data and another to fetch aggregate values and the total item count.

Clear grouping

The Data Grid provides a clearGrouping method to remove all grouped columns programmatically. This is useful for resetting the grid to an ungrouped state.

The following example demonstrates executing clearGrouping through an external button click.

<div style="padding-bottom:20px">
    <ejs-button id="clearButton" cssClass="e-primary" content="Clear Grouping"></ejs-button>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" height="348px">   
    <e-grid-groupsettings columns="@(new string[] {"CustomerID", "ShipCity"})"></e-grid-groupsettings> 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    document.getElementById('clearButton').addEventListener('click', function () {
        var grid = document.getElementById("grid").ej2_instances[0];
        grid.clearGrouping()
    });
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Clear grouping

Grouping Events

The Data Grid provides two key events for handling grouping operations. These events enable the integration of custom logic before and after a grouping action:

  • actionBegin event: Triggered before a grouping action starts. It provides details such as the group field name and requestType, allowing conditional logic or cancellation.

  • actionComplete: Triggered after a grouping action completes. It exposes the updated grid state for post-processing tasks like UI updates or data handling.

The following example demonstrates canceling grouping for the “Order ID” column using actionBegin and displaying a status message via actionComplete.

<div style="margin-left:100px;"><p style="color:red;" id="message"></p></div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowGrouping="true" actionBegin="actionBegin" actionComplete="actionComplete"> 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="ShipCity" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function actionBegin(args) {
        if (args.requestType === 'grouping' && args.columnName === 'OrderID') {
            args.cancel = true
            document.getElementById('message').innerText = args.requestType + ' action is cancelled for ' + args.columnName + ' column';
        }
    }
    function actionComplete(args) {
        if (args.requestType === 'grouping') {
            document.getElementById('message').innerText = args.requestType + ' action completed for ' + args.columnName + ' column';
        }
        else {
            document.getElementById('message').innerText = ''
        }
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Grouping Events

The args.requestType property represents the name of the current action being performed. For instance, during grouping, the args.requestType value will be grouping.

Grouping constraints

AutoFill applies fill operations to records within the same group.

See Also