What's new in Grid v7.1.0

Cell highlighting

New highlightCells() and unhighlightCells() methods have been added to the Grid for programmatically highlighting cells. Two highlight modes are available:

'fade' (default) - Dims non-highlighted cells with an overlay
'color' - Applies a background color to highlighted cells

// Highlight cells with fade mode (default)
grid.highlightCells({ cells : [{ id : 1, field : 'name' }, { id : 2, field : 'age' }] });

// Highlight with color mode
grid.highlightCells({ cells : { id : 1, field : 'name' }, mode : 'color' });

// Auto-unhighlight after 2 seconds
grid.highlightCells({ cells : { id : 1, field : 'name' }, unhighlightAfter : 2000 });

// Unhighlight all
grid.unhighlightCells();

Cell highlighting

//<code-header>
fiddle.title = 'Cell highlighting';
//</code-header>
const grid = new Grid({
    appendTo   : targetElement,
    autoHeight : true,
    data       : DataGenerator.generateData(5),
    columns    : [
        { field : 'name', text : 'Name', flex : 1 },
        { field : 'city', text : 'City', width : 150 },
        { type : 'number', field : 'age', text : 'Age', width : 100 },
        { field : 'food', text : 'Food', width : 150 }
    ],
    tbar : [
        {
            text      : 'Highlight',
            rendition : 'outlined',
            onClick   : ({ source }) => {
                source.up('grid').highlightCells({
                    cells : [
                        { id : 1, field : 'city' },
                        { id : 5, field : 'food' }
                    ]
                });
            } },
        {
            text      : 'Highlight (color)',
            rendition : 'outlined',
            onClick   : ({ source }) => {
                source.up('grid').highlightCells({
                    cells : [
                        { id : 2, field : 'city' },
                        { id : 3, field : 'city' },
                        { id : 4, field : 'city' }
                    ],
                    mode : 'color' });
            } },
        {
            text      : 'Highlight (for 2s)',
            rendition : 'outlined',
            onClick   : ({ source }) => {
                source.up('grid').highlightCells({
                    cells : [
                        { id : 2, field : 'name' },
                        { id : 2, field : 'city' },
                        { id : 2, field : 'age' },
                        { id : 2, field : 'food' }
                    ],
                    unhighlightAfter : 2000
                });
            } }
    ]
});

New fluent2 theme

To make it easier to visually fit our products into applications using the Microsoft Fluent Design System (https://fluent2.microsoft.design), we have added a new fluent2 theme inspired by the design system.

The theme can be tried in for example the https://bryntum.com/products/grid/examples/themes demo.