Vue Data GridSSRM Row Grouping

vue logo

This section covers Row Grouping in the Server-Side Row Model (SSRM).

Enabling Row Grouping

Row Grouping is enabled in the grid via the rowGroup column definition attribute. The example below shows how to group rows by 'country':

    /* other grid options ... */>

this.columnDefs = [
    { field: 'country', rowGroup: true },
    { field: 'sport' },
    { field: 'year' },

For more configuration details see the section on Row Grouping.

Server Side Row Grouping

The actual grouping of rows is performed on the server when using the SSRM. When the grid needs more rows it makes a request via getRows(params) on the Server-Side Datasource with metadata containing grouping details.

The properties relevant to Row Grouping in the request are shown below:

// IServerSideGetRowsRequest
    // row group columns
    rowGroupCols: ColumnVO[];

    // what groups the user is viewing
    groupKeys: string[];

    ... // other params

Note in the snippet above the property rowGroupCols contains all the columns (dimensions) the grid is grouping on, e.g. 'Country', 'Year'. The property groupKeys contains the list of group keys selected, e.g. ['Argentina', '2012'].

The example below demonstrates server-side Row Grouping. Note the following:

  • Country and Sport columns have rowGroup=true defined on their column definitions. This tells the grid there are two levels of grouping, one for Country and one for Sport.
  • The rowGroupCols and groupKeys properties in the request are used by the server to perform grouping.
  • Open the browser's dev console to view the request supplied to the datasource.

Open by Default

It is possible to have rows open as soon as they are loaded. To do this implement the grid callback isServerSideGroupOpenByDefault.