Cell Merging in FlexGrid

The FlexGrid supports content-driven cell merging.

To enable cell merging, set the allowMerging property to indicate what part or parts of the grid you want to merge, and set the allowMerging property on specific rows and columns to true. Once you do that, the grid will merges cells that have the same content, grouping the data visually.

In the example below, the allowMerging property is set to true on the "Country" and "Active" columns.

var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    allowMerging: 'Cells',
    isReadOnly: true,
    showAlternatingRows: false,
    autoGenerateColumns: false,
    columns: [
      { binding: 'country', header: 'Country', allowMerging: true },
      { binding: 'sales', header: 'Sales', format: 'n2' },
      { binding: 'expenses', header: 'Expenses', format: 'n2' },
      { binding: 'active', header: 'Active', allowMerging: true },
    ],
    itemsSource: new wijmo.collections.CollectionView(data, {
        sortDescriptions: ['country', 'active']
    })
});