v7.3.0
SupportExamplesFree Trial

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();
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.

Contents