MergeCells

This feature merges cells that have the same value in sorted (or optionally any) columns configured to mergeCells.

The content of merged cells is sticky for Grids with a single subgrid section when all columns fit in view (content stays in view until the cell is scrolled fully out of view).

Support for sticky content is limited because of how position: sticky works. Grid scrolls vertically in one element, and horizontally in another (to support multiple regions in the grid), and this setup is not supported by current browsers implementation of sticky positioning

Try scrolling in the demo below. As mentioned above, cells are by default merged only in sorted columns - try sorting by the other columns ("City" and "Favorite food" are configured to merge cells):

Merge cells

//<code-header>
fiddle.title = 'Merge cells';
//</code-header>
const grid = new Grid({
    appendTo : targetElement,

    height : 320,

    features : {
        // Enable the feature
        mergeCells : true,
        // Sort the city column to enable merging cells in it
        sort       : 'city'
    },

    data : DataGenerator.generateData(15),

    columns : [
        { field : 'city', text : 'City', flex : 1, mergeCells : true },
        { field : 'name', text : 'Name', flex : 1 },
        { field : 'food', text : 'Favorite food', flex : 1, mergeCells : true }
    ]
});

By configuring the feature with sortedOnly : false, cells can be merged in any column:

Merge all cells

//<code-header>
fiddle.title = 'Merge all cells';
//</code-header>
const grid = new Grid({
    appendTo : targetElement,

    height : 320,

    features : {
        // Enable the feature
        mergeCells : {
            // Merge cells in all columns
            sortedOnly : false
        }
    },

    data : DataGenerator.generateData(15),

    columns : [
        { field : 'name', text : 'Name', flex : 1 },
        { field : 'color', text : 'Color', flex : 1, mergeCells : true },
        { field : 'food', text : 'Favorite food', flex : 1, mergeCells : true }
    ]
});

This feature is disabled by default.

This feature will not work properly when Store uses lazyLoad

Configs

Common

disabledInstancePlugin

listenersEvents

Other

passthrough: BooleanAlso a property

By default, merged cells allow pointer events to pass through to the underlying row/cell, to allow selecting a row and editing an individual cell even when they are merged. Configure as false to allow merged cells to catch and react to the pointer events instead.

const grid = new Grid({
    features : {
        mergeCells : {
            // Let merged cells react to pointer events
            passthrough : false
        }
    }
});

shouldMerge: functionAlso a property

Hook used to control which cells should be included in a merged range of cells.

The feature first determines the range using its default logic. It then calls this hook for each cell in the range except the first, and if the hook returns false, the cell is not included in the range but instead a new range is started. The hook thus controls if a cell should be merged with the cell above it or not.

Example usage:

const grid = new Grid({
   features : {
       mergeCells : {
           shouldMerge({ column, record, previousRecord, value }) {
               // Only merge cells in the "Age" column as long as the "Name" matches the previous record
               if (column.field === 'age') {
                   return record.name === previousRecord.name;
               }

               // Merge other cells as usual
               return true;
           }
       }
   }
});

Parameter	Type	Description
`context`	Object
`context.column`	Column	Current column (readonly)
`context.record`	Model	Current record (readonly)
`context.previousRecord`	Model	Previous record (above current record) (readonly)
`context.value`	*	Cell's raw value (readonly)

Returns: Boolean -

Return true to merge with the cell above, false to start a new range

sortedOnly: Boolean= trueAlso a property

Configure as false to allow merging cells in columns that are not sorted.

Note that this will have a slight negative impact on performance, since cells in all columns configured to merge cells have to be iterated.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isMergeCells: Boolean= truereadonly

Identifies an object as an instance of MergeCells class, or subclass thereof.

isMergeCells: Boolean= truereadonlystatic

Identifies an object as an instance of MergeCells class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

passthrough: BooleanAlso a config

const grid = new Grid({
    features : {
        mergeCells : {
            // Let merged cells react to pointer events
            passthrough : false
        }
    }
});

shouldMerge: functionAlso a config

Hook used to control which cells should be included in a merged range of cells.

Example usage:

const grid = new Grid({
   features : {
       mergeCells : {
           shouldMerge({ column, record, previousRecord, value }) {
               // Only merge cells in the "Age" column as long as the "Name" matches the previous record
               if (column.field === 'age') {
                   return record.name === previousRecord.name;
               }

               // Merge other cells as usual
               return true;
           }
       }
   }
});

Parameter	Type	Description
`context`	Object
`context.column`	Column	Current column (readonly)
`context.record`	Model	Current record (readonly)
`context.previousRecord`	Model	Previous record (above current record) (readonly)
`context.value`	*	Cell's raw value (readonly)