Upgrade guides for Grid v3.0.0+
Grid v3.0
"Core" package
All our basic classes have been moved from lib/Common/ to lib/Core/. Please update corresponding paths in your application in case you import classes from sources.
Export to PDF/PNG
Added a new export to PDF & PNG feature, into. Several new demos were added: a generic JS example and demos for Angular, React and Vue frameworks. The new export feature uses a special export server which can be found in the examples/_shared/server folder. For more instructions please see README.md file in the demo folders.
Grid v3.0.1
Showing async content in a Tooltip
Based on feedback that loading remote content into a Tooltip was not easy enough we refactored our internals a bit. Below you see the old, deprecated way of showing async Tooltip content:
// DEPRECATED
new Tooltip({
listeners : {
beforeShow : ({ source : tip }) => {
const showingFor = tip.activeTarget;
tip.html = false;
AjaxHelper.get('someurl').then(response => {
// Still visible for the same triggering element by the time the data arrives...
if (tip.isVisible && tip.activeTarget === showingFor) {
tip.html = 'Done!';
}
});
}
}
});
The new way, where html can also accept a Promise yielding a string. Everything becomes much easier:
new Tooltip({
listeners : {
beforeShow : ({ source : tip }) => tip.html = AjaxHelper.get('someurl').then(response => response.text())
}
});
The old way of setting html to false to trigger a loading indicator will be removed in v5.0.0.
More details and examples in the updated Tooltip docs.
Loading remote data with CellTooltip feature
Much like the above, we received feedback that loading remote content into the CellTooltip feature was not easy enough. So we refactored our internals a bit and below you see the old, deprecated way of showing async content in a grid cell Tooltip:
// DEPRECATED
let grid = new Grid({
features : {
cellTooltip : {
// Async tooltip renderer
tooltipRenderer({ record, tip }) {
// Initiate some async action
AjaxHelper.get(`tooltip.php?id=${record.id}`).then(() => {
tip.html = 'Async content here...';
});
// Signal async tooltip. The tooltip will display a load mask until its html is updated (above)
return false;
}
}
}
});
The new way, where tooltipRenderer can also accept a Promise yielding a string. Everything becomes much easier:
let grid = new Grid({
features : {
cellTooltip : {
// Async tooltip renderer
tooltipRenderer : ({ record }) => tip.html = AjaxHelper.get(`tooltip.php${record.id}`).then(response => response.text())
}
}
});
More details and examples in the updated Tooltip docs.
The old way of setting html to false to signal async loading will be removed in v5.0.0.
Grid v3.1.0
Context menu refactoring
Basic class
New abstract ContextMenuBase class was introduced. It has common logic for all context menu features. It creates a new menu instance, handles event firing, and provides basic functions to work with the menu.
ContextMenu feature
ContextMenu feature was replaced by CellMenu and HeaderMenu. So now context menu is configured for cells and headers independently. Items are named objects now:
Old code:
const grid = new Grid({
features : {
contextMenu : {
headerItems : [
{ text : 'My header item', onItem : () => ... }
],
cellItems : [
{ text : 'My cell item', onItem : () => ... }
],
processCellItems({items, record}) {
if (record.cost > 5000) {
items.push({ text : 'Split cost' });
}
}
}
}
});
New code:
const grid = new Grid({
features : {
headerMenu : {
items : {
myItem : { text : 'My header item', onItem : () => ... }
}
},
cellMenu : {
items : {
myItem : { text : 'My cell item', onItem : () => ... }
},
processItems({items, record}) {
if (record.cost > 5000) {
items.costItem = { text : 'Split cost' };
}
}
}
}
});
showRemoveRowInContextMenu config
Grid's showRemoveRowInContextMenu config was deprecated in favour of CellMenu config. So to remove a default item please follow this way:
Old code:
const grid = new Grid({
showRemoveRowInContextMenu : false
});
New code:
const grid = new Grid({
features : {
cellMenu : {
items : {
removeRow : false // `removeRow` is a key of default "Remove row" item
}
}
}
});
cellMenuItems and headerMenuItems column configs
Column's cellMenuItems and headerMenuItems configs were turned into named objects:
Old code:
const grid = new Grid({
columns : [
{
text : 'First name',
field : 'firstName',
headerMenuItems : [
{ text : 'Column specific header item' }
],
cellMenuItems : [
{ text : 'Column specific cell item' }
]
}
]
});
New code:
const grid = new Grid({
columns : [
{
text : 'First name',
field : 'firstName',
headerMenuItems : {
firstColumnItem : { text : 'Column specific header item' }
},
cellMenuItems : {
firstColumnItem : { text : 'Column specific cell item' }
}
}
]
});
Context menu events
Some of Grid's events provided by ContextMenu feature were replaced by CellMenu and HeaderMenu features. Here is the list of changes:
cellContextMenuBeforeShow->cellMenuBeforeShow;cellContextMenuShow->cellMenuShow;headerContextMenuBeforeShow->headerMenuBeforeShow;headerContextMenuShow->headerMenuShow;contextMenuItem->cellMenuItemandheaderMenuItem;contextMenuToggleItem->cellMenuToggleItemandheaderMenuToggleItem;
For example:
Old code:
const grid = new Grid({
listeners : {
cellContextMenuBeforeShow : () => {...}
cellContextMenuShow : () => {...}
headerContextMenuBeforeShow : () => {...}
headerContextMenuShow : () => {...}
contextMenuItem : () => {...}
contextMenuToggleItem : () => {...}
}
});
New code:
const grid = new Grid({
listeners : {
cellMenuBeforeShow : () => {...}
cellMenuShow : () => {...}
cellMenuItem : () => {...}
cellMenuToggleItem : () => {...}
headerMenuBeforeShow : () => {...}
headerMenuShow : () => {...}
headerMenuItem : () => {...}
headerMenuToggleItem : () => {...}
}
});
Grid v3.1.1
NumberField
NumberField now reports undefined if the input field is empty.
Grid v3.1.6
Angular, React and Vue gridEngine has been renamed to gridInstance
To avoid confusing the calculating engine with the instance of Bryntum Grid, gridEngine has been renamed to gridInstance. The change is backwards compatible hence applications using gridEngine will still work, but with deprecation warning in the console.
Change all occurrences of gridEngine to gridInstance in your Angular, React or Vue application to get rid of the warning and to make the application consistent with Bryntum Grid wrapper naming.