Johan Isaksson
19 October 2020

What’s New In Grid 4.0

We are very happy to announce v4.0.0 of Bryntum Grid. This major release has a lot of changes under the […]

We are very happy to announce v4.0.0 of Bryntum Grid. This major release has a lot of changes under the hood, paving the way for the major releases of Scheduler, Scheduler Pro, Gantt and Calendar. For full details, as always please see the change log and we also recommend you to carefully read the upgrade guide to help you update to this version.

Grid is now a Panel

For convenience, the Grid base class was changed to Panel. This allows it to hold top (tbar) and bottom (bbar) toolbars by itself without the need of wrapping it with an outer Panel.

const grid = new Grid({
     tbar : [
       { text : 'Read only' },
       ...
     ],
     ...
});

This can be seen in action in the updated celledit demo:

Grid as a Panel with a toolbar

Renamed themes

The `Default` theme was renamed to `Classic`, to highlight that we actually changed our default theme to be `Stockholm` back in version 2. Since `Light` and `Dark` themes was variations of the `Default` theme they too were renamed to indicate they belong together. Their new names are `Classic-Light` and `Classic-Dark`.

Available themes

Easier to customize context menus

The `ContextMenu` feature was broken up in two separate features depending on the type of context menu, CellMenu and HeaderMenu. The new features were refactored to be much easier to customize. It is now possible to add new items or modify/remove built in items in a single config, items:

const grid = new Grid({
     features : {
       headerMenu : {
         items : {
           // hide a the built in "Hide column" item 
           hideColumn : false,
           
           // customize the "Stop grouping" item
           groupRemove : {
             text : 'Turn grouping off'
           },

           // add a custom item
           myItem : {
             text : 'My very own menu item',
             icon : 'b-fa b-fa-candy-cane'
           }
         }
       }
     },
     ...
});

This change can be observed in the updated contextmenu demo:

Customized header menus

JSON export from stores

The Store class has some new capabilities relating to how it consumes and exports JSON strings. Previously, a store could load an array of JSON/JavaScript objects by assigning to `data`:

store.data = [ { id : 1, name : 'Adam' }, ... ];

When consumed, the data is converted to records. If you later want to serialize all records as JSON, you can now get the data from all records as a JSON string:

console.log(store.json);
// Would log '[{"id":1,"name":"Adam"],...]'

And by plugging a JSON string in the opposite direction, Store can consume it and convert it to records:

store.json = '[{"id":1,"name":"Adam"],...]';

Store also implements `toJSON()`, allowing it to be stringified using standard `JSON.stringify(store)`.

Documentation links:

Experimental support for Salesforce Lightning Locker Service

Version 4.0 contains a special bundle to use the Grid inside Lightning web components. We have also made a new demo which you can find in the /examples/salesforce folder.

// Grid component
export default class Grid_component extends LightningElement {
    renderedCallback() {
        if (this.bryntumInitialized) {
            return;
        }
        this.bryntumInitialized = true;

        Promise.all([
            loadScript(this, GRID + '/grid.lwc.module.js'),
            loadStyle(this, GRID + '/grid.stockholm.css')
        ]).then(() => {
            this.createGrid();
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading Bryntum Grid',
                    message: error,
                    variant: 'error'
                })
            );
        });
    }

    createGrid() {
        bryntum.grid.init(this.template);

        window.grid = new bryntum.grid.Grid({
            features: {
                rowReorder: true,
                search: true
            },
            appendTo: this.template.querySelector('.container'),
            store : {
                fields : [
                    { name : 'start', type : 'date' }
                ],
                data
            },
            columns
        });
    }
}

Salesforce Locker Service Grid Integration Demo

More information about this integration will follow in a later blog post.

Browser support

In 4.0 we are dropping support for Edge 18 and older. Older Edge versions likely will continue to work, but we are no longer actively testing it or adding any browser specific fixes for it. The new Blink-based Edge is supported. Please note that IE11 still is supported but version 4 will be the last major version where IE11 is supported.

And more…

Some miscellaneous improvements worth mentioning:

Learn more

The new features and examples we add are almost exclusively a result of the feedback received from our community. We hope you will enjoy these new features and please keep the feedback coming. For full details please see the Grid change log.

Download Free Trial

Johan Isaksson

Bryntum Grid