I’m working on an Angular project where I use the DevExpress DataGridView component to display data. I want to enable grouping functionality for my grid, but I need to do it without sending any requests to an API. The data should be grouped using the data already available on the client-side.

So far, I’ve set up the DataGridView and can display data correctly. However, I’m not sure how to implement the grouping feature without involving the server-side. Can someone guide me on how to achieve client-side grouping with DevExpress DataGridView in Angular?

Here’s a snippet of my current setup:

  <dx-data-grid [dataSource]="operations"
                      [columnAutoWidth]="true"
                      keyExpr="taskTicketActionId"
                      showBorders="true"
                      height="auto"
                      [scrolling]="{useNative:true}"
                      [allowColumnReordering]="true"
                      noDataText="{{l('NoData')}}"
                      (onToolbarPreparing)="onToolbarPreparing($event)"
                      [rowAlternationEnabled]="true">

            <dxo-column-chooser [enabled]="true"
                                [title]="l('HiddenColumns')"
                                [emptyPanelText]="l('DragColumnHere')">
            </dxo-column-chooser>

            <dxo-state-storing [enabled]="true" type="localStorage" storageKey="devextremeDailyOperationDataGridStorage"></dxo-state-storing>

            <dxo-group-panel [visible]="true"
                             [emptyPanelText]="l('DragColumnHereForGrouping')">
            </dxo-group-panel>

            <dxo-grouping [autoExpandAll]="false"
                          [allowCollapsing]="true"
                          expandMode="buttonClick">
            </dxo-grouping>