Grouping in FlexGrid

The grid supports grouping via the source CollectionView.

Group the data by one or more properties by adding GroupDescription objects to the grid's collectionView.groupDescriptions.

This example groups the data by country and by product:

import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

// basic grouping
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: new wjCore.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});

You may also want to hide the columns that are being grouped on in order to avoid showing redundant data.

This example groups the data by country and product, and hides those columns to achieve a cleaner appearance:

// hide columns being grouped on
var theGridHideCols = new wjGrid.FlexGrid('#theGridHideCols', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'country', header: 'Country', visible: false },
        { binding: 'product', header: 'Product', visible: false },
        { binding: 'downloads', header: 'Downloads', width: '*' },
        { binding: 'sales', header: 'Sales', width: '*' },
        { binding: 'expenses', header: 'Expenses', width: '*' },
    ],
    itemsSource: new wjCore.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});