Upgrade guide for Grid v7.0.0

New themes & styling changes

The old themes has been fully replaced with new modern themes: Material3, Stockholm, Svalbard & Visby. Each theme has a light and dark variant. The old themes are no longer available.

The new themes are not compatible with the old themes, any custom themes you have will have to be remade using the new system. The new themes are built using nested CSS and CSS custom properties (CSS variables), instead of SASS as before. For more information on how to create a custom theme (it is much easier now!), check out the Styling guide in docs and the custom-theme demo in the examples folder.

We have also normalized Bryntum CSS selectors to use consistent hyphenated names (kebab-casing). For example the TabPanel class used to have the b-tabpanel class, but is now b-tab-panel. This change is not backwards compatible, so any custom CSS will have to be updated.

Old code

.b-tabpanel {
    margin-top : 1em;    
}

New code

.b-tab-panel {
    margin-top : 1em;
}
See the Migrating to v7 CSS guide for more information

FontAwesome Free no longer built in

FontAwesome Free is no longer built into the Bryntum CSS (but it is included in the package), you will have to include it in your app for the default icons to show up as intended. This also means that the b-fa- prefix no longer exists, any icons in your app relying on that has to be changed to FontAwesome's default fa- prefix.

This change was done to reduce bloat for anyone using another icon set, and also makes it easier for apps to use a different version of FontAwesome.

Old code

<!-- FontAwesome Free CSS was included in the Bryntum CSS -->
<link rel="stylesheet" href="build/grid.stockholm.css">

new Button({
    icon : 'b-fa b-fa-plus'
})

New code

<!-- You have to include FontAwesome Free CSS in your app -->
<link rel="stylesheet" href="build/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="build/fontawesome/css/solid.css">
<!-- Bryntum CSS no longer includes FontAwesome -->
<link rel="stylesheet" href="build/grid.css">
<link rel="stylesheet" href="build/stockholm-light.css">

new Button({
    // Note the change of prefix from b-fa to fa
    icon : 'fa fa-plus'  
});

Importing CSS in frameworks

For Angular, React, Vue and similar frameworks using the Bryntum npm packages, the new CSS imports will look something like this, assuming imports in an app's scss file, using Scheduler as an example:

/* FontAwesome is not built-in, but used for icons */
@import "@bryntum/scheduler/fontawesome/css/fontawesome.css";
@import "@bryntum/scheduler/fontawesome/css/solid.css";
/* Bryntum structural CSS */
@import "@bryntum/scheduler/calendar.css";
/* Bryntum theme */
@import "@bryntum/scheduler/svalbard-light.css";

For apps using our thin npm packages, the new CSS imports will look something like this, using Scheduler as an example:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

The following individual animation related configs has been deprecated in favor of the new transition config:

  • Grid.animateRemovingRows -> removeRecord
  • Grid.animateTreeNodeToggle -> toggleTreeNode
  • Grid.animateFilterRemovals -> filterRemoval
  • RegionResize.animateCollapseExpand -> toggleRegion

Old code

new Grid({
    animateRemovingRows : true,
    animateTreeNodeToggle : true,
    animateFilterRemovals : true,
    
    features : {
        regionResize : {
            animateCollapseExpand : true
        }
    }
})

New code

new Grid({
    transition : {
        removeRecord : true,
        toggleTreeNode : true,
        filterRemoval : true,
        toggleRegion : true
    }
})

There are also a set of new transitions that can be configured this way, read more in the What's New guide.

Default value for dateFormat in ExcelExporter changed

The dateFormat config on the ExcelExporter now defaults to null, which exports dates instead of date strings. To restore the old behavior, set dateFormat to 'YYYY-MM-DD'.

Old code

new Grid({
    features : {
        excelExporter : true
    }
})

New code

new Grid({
    features : {
        excelExporter : {
            dateFormat : 'YYYY-MM-DD'
        }
    }
});

Expanding/collapsing columns no longer affects hidden

When collapsing a parent column, it no longer toggles the hidden field on children. This makes it possible to have a column both hidden by a collapse and manually hidden by setting hidden: true on the column.

To determine if a column is visible or not when using toggleAll mode, a new toggleAllHidden field has been added to replace usage of hidden:

Old code

const grid = new Grid({
    columns : [
        {
            text         : 'Parent',
            collapsible  : true,
            collapseMode : 'toggleAll',
            children     : [
                { text : 'Full name', field : 'full' },
                { text : 'Short name', field : 'short', hidden : true }
            ]
        }
    ]
});

New code

const grid = new Grid({
    columns : [
        {
            text         : 'Parent',
            collapsible  : true,
            collapseMode : 'toggleAll',
            children     : [
                { text : 'Full name', field : 'full' }, 
                { text : 'Short name', field : 'short', toggleAllHidden : true }
            ]
        }
    ]
});

Container layout changes

Container (and subclasses thereof like Panel and Popup) now use a CSS Grid layout by default, for more flexibility. You can configure a Container with layout : 'vbox' to get the old default layout:

Old code

new Panel({
    title  : 'Old style panel',
    items : [
        { type : 'textfield', label : 'Field 1' },
        { type : 'textfield', label : 'Field 2' }
    ]
});

New code

new Panel({
    title  : 'New style panel',
    layout : 'vbox',
    items : [
        { type : 'textfield', label : 'Field 1' },
        { type : 'textfield', label : 'Field 2' }
    ]
});

Mask mode config removed

The mode config of Mask was removed. Style the mask using CSS instead.

Old code

Mask.mask({
    text : 'Loading...',
    mode : 'dark'
});

New code

Mask.mask({
    text : 'Loading...'
});

.b-mask {
    --b-mask-background : color-mix(in srgb, #000, transparent 50%);
}

DomHelper getTranslateX/Y changes

The getTranslateX/Y() fns of DomHelper now only handle the translate property, it no longer parses transform variants. If you use any of them, update your CSS for the elements you are using it for to use translate instead of transform:

Old code

.b-my-element {
    transform : translate(10px, 20px);
}

New code

.b-my-element {
    translate : 10px 20px;
}

DatePicker's cellRenderer context

DatePicker's cellRenderer is now passed the cell element as the cell property of its render context. The inner element into which new content can be added is passed as innerCell. Previously the inner element was passed in the cell property. This will only affect your apps if you have implemented a cellRenderer in any DatePicker

Old code

cellRenderer({ cell, date }) {
    cell.innerHTML += `<b>$${getValueForDate(date)}</b>`;
}

New code

cellRenderer({ innerCell, date }) {
    innerCell.innerHTML += `<b>$${getValueForDate(date)}</b>`;
}