Expand All

Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export

Layouts

RTL Layout

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

Rows grouping in a grid

Row grouping allows to segregate or group rows with common values of some chosen fields together. It works similar to group by sql queries in database.

groupModel

The group by fields are specified by setting groupModel.dataIndx as array of field names. e.g., 

groupModel.dataIndx = ['ShipCountry', 'ContactName']

Summary

Summary for every group can be displayed
  • in separate row ( with groupModel.showSummary option )
  • or in same row as group title row ( with groupModel.summaryInTitleRow option ).

Sorting

Row grouping columns ( ShipCountry and Customer name ) and summary columns ( Freight ) are sorted as a whole when their header cells are clicked.

Other columns are sorted within the groups when their header cells are clicked. These cells can be sorted as a whole by pressing Ctrl key along with click on header cell.

Related API

groupModel to specify grouping options during initialization

Group to modify grouping options in run time.

and group related events