Data grid provides the ability to organize columns in logical groups and display them using multi-row header representation. A column group is visually represented by a header displayed above the headers of the columns it combines. Each group can contain data columns as well as other groups.

If auto-hiding columns are defined, a group disappears when all its columns become invisible. If you are on a desktop, reduce the size of the browser window to see this feature in action.

To define column groups for a page, specify the OnGetCustomColumnGroup event. Click the button to see how column grouping has been defined for the example below.