Smart.Grid - Grouping

Grid Grouping

Grouping by one or multiple columns(data fields) is supported by Smart.Grid.

Grouping is configured via the property/object grouping. To enable it, set grouping.enabled to true.

Once the Grid is grouped by a column, group rows appear with information about the group name, group data field, and the count of rows in the group. Lower-level group rows have indentation that represents group hierarchy.

Additional settings of the grouping object that control grouping behavior are:

• allowCollapse - enables collapsing of groups.
• autoExpandAll - automatically expands all groups.
• expandMode - sets whether a group is expanded on 'buttonClick' or 'rowClick'.
• groupRowHeight - sets the group row height.
• toggleButtonIndent - sets the indent of the group toggle button (arrow).
• groupIndent - sets the indent of the group.

Theare are three ways to apply grouping to the Grid:

• Group Menu
• Through the dataSource Object
• Grouping-related Methods

Whether or not a column can be grouped can be set via the property allowGroup applied to the column's respective object.

Group Menu

Grouping through the UI can be done through the group menu (part of the column menu). The group menu can be opened by clicking the menu button in a column's header and offsers the option to either group by a column or remove grouping (whichever is applicable):

Grouping through the dataSource Object

An initial grouping can be applied by setting groupBy in the dataSource object to an array of data fields (columns to group by), e.g.:

dataSource: new Smart.DataAdapter({
    dataSource: generateData(100),
    groupBy: ['firstName', 'lastName'],
    dataFields: [
        'id: number',
        'firstName: string',
        'lastName: string',
        'productName: string',
        'quantity: number',
        'price: number',
        'total: number'
    ]
}),

Grouping-related Methods:

• addGroup - adds a group.
• removeGroup - removes a group.
• clearGroups - clears all groups.
• collapseRow - collapses a Grouping row.
• collapseAllRows - collapses all Grouping rows.
• expandRow - expands a Grouping row.
• expandAllRows - expands all Grouping rows.