Grid – Change Log

API CHANGES

DEPRECATED The event property of Button‘s click and action events has been deprecated and replaced by the domEvent property to better align with naming elsewhere (reducing risk of confusion with Bryntum event objects and Bryntum Scheduler events). It will be removed in a future major release

STYLING CHANGES

Added a new padded-filled rendition to ButtonGroup. It renders similarly to padded but with a filled button style (using the primary color, 12335)

BUG FIXES

9934 – DOCS Column renderer @returns value missing HTMLElement
11425 – CheckColumn onToggle not fired
11597 – Home key does not work while editing a grid cell
12130 – TreeGrid – Header checkbox unselected after first selecting all then toggling a parent node
12229 – TreeColumn folder icon issue
12262 – gotoNextHit and gotoPrevHit in Search feature doesn’t work correct with Group feature enabled
12265 – EventEditor and other floating drawers need more accented box shadow
12268 – Badge overflows if column is narrow in Grid project-summary demo
12278 – DateRangeField picker next icon cropped
12281 – Docs theme not always toggled correctly
12287 – Docs headers remain white on loading
12291 – Crash when toggling non-rendered parent node with transitions enabled
12295 – Error when adding new record to empty store with animated insert
12306 – Inconsistent grid header padding in v7 themes
12308 – Initial Grid state not restored
12310 – Svalbard theme filter input compact mode border radius
12313 – Bryntum 7 css selector too broad
12324 – Delayable leaking timeout map
12328 – Group title cells should not honour the column’s align property
12339 – Color cell content is misplaced when search hit is complete
12340 – Container layout: 'fit' has no effect

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Remix: >= 2.15.0

We are proud to announce version 7.0 of our products. In this update we have overhauled the look and feel of all products, introducing a new CSS variable based theming system with the following new themes available: * Svalbard – our new default theme, flat and modern * Visby – inspired by the town’s old ring wall, uses more borders * Material3 – newer material, up from v1 * Stockholm – a refreshed classic * High contrast – more contrast between text and backgrounds

A special thanks to everyone who helped us by testing our alpha and beta versions. Your feedback and support have been invaluable

FEATURES / ENHANCEMENTS

All Bryntum products have had a major visual overhaul, modernizing not only their look but also the underlying CSS. See the "Styling changes" section below for more details, and be sure to check out our updated demos
Updated versioning scheme: for Alpha and Beta pre-releases now follow semantic versioning format (e.g., 7.0.0-alpha.1, 7.0.0-beta.1)
The RowReorder feature can now be configured to show drag handles only when hovering a row (by configuring showGrip: 'hover'), making it less visually intrusive
A new feature called AIFilter has been added to the Grid. This feature allows users to filter grid data using natural language input, powered by an AI agent hooked up to a large language model (LLM) such as OpenAI’s GPT-4
Collapsing grouped columns no longer affects the column’s hidden config, allowing columns hidden through other means to stay hidden when toggling groups. When using the toggleAll mode, initial state is determined using the new toggleAllHidden field (11956)
Added new PinColumns feature, which allows users to pin columns to start or end side of the Grid without needing any additional configuration for subGrids. This feature adds a Pin columns option to the column header and cell context menu, enabling users to pin columns on either side of the Grid (11634)
TypeScript Improved TypeScript definitions to support function parameters in typedef declarations
You can now define where the Grid´s emptyText is displayed using the new region property of the emptyText property. It accepts values like locked, normal by default

API CHANGES

BREAKING 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
Added a new parameter clearChanges to the store’s applyChangeset method which, when passed as false, applies changes to the store without committing them, keeping the store dirty. By default, it is true. (11089)
BREAKING The mode config of Mask was removed. Style the mask using CSS instead.
BREAKING The getTranslateX/Y() fns of DomHelper now only handle the translate property, it no longer parses transform variants
Collapsing, expanding, showing and hiding columns can now be transitioned, because of that the corresponding APIs are now async
Adding and removing chips from a ChipView can now be transitioned, making the response to those actions async
DEPRECATED The following individual animation related configs has been deprecated in favor of the new transition config: Grid.animateRemovingRows, Grid.animateTreeNodeToggle, Grid.animateFilterRemovals and RegionResize.animateCollapseExpand
BREAKING The previously deprecated support for zipcelx in the ExcelExporter feature has been removed. Use the write-excel-file package instead, or implement a custom provider.
BREAKING The dateFormat config on the ExcelExporter now defaults to null – which exports dates instead of date strings
BREAKING To determine if a child column is hidden by its group being collapsed, the hidden field has been replaced by a readonly hiddenByCollapse property
BREAKING The following previously deprecated API’s have been removed: * Histogram.getRectClass() * Store.originalCount * Store.allCount * Store.makeChained() * WidgetHelper * Widget.ariaLive * PercentColumn.showCircle * RowExpander events: beforeExpand, beforeCollapse, expand, collapse * ExcelExporter.zipcelx

STYLING CHANGES

BREAKING The styling of all Bryntum products has been migrated from SASS to nested CSS with custom properties (CSS variables). This change makes it much easier to create custom themes, and to change styling settings at runtime. But the change is not backwards compatible, any custom themes will have to be remade using the new system. The built-in themes and how they are applied to an app have also changed, we now ship 4 themes: Material3, Stockholm, Svalbard & Visby + a high contrast theme. Each theme has a light and dark variant. Check out the what’s new guide and the updated styling guides for more information
BREAKING Bryntum CSS selectors have been normalized 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
BREAKING FontAwesome Free is no longer built into the Bryntum CSS, 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
FontAwesome Free was also updated to version 6.7.2
BREAKING Container (and subclasses thereof like Panel and Popup) now use a CSS Grid layout by default. You can configure a Container with layout : 'vbox' to get the old default layout
By configuring a Container (or subclass thereof) with labelPosition: 'align-before' when using the new default grid layout, field labels will line up nicely in a single column. You can use the new span and column configs to easily position & size fields in the CSS grid
Row borders (bottom border) were moved to cells. This has a couple of advantages: when asking for a row of 50px height you now get that height independent of the border height, and it also gives you more styling options if you are making a spreadsheet kind of app where some cells have thicker borders than others.
Built-in more intense animations, such as collapsing columns or tree nodes, are now automatically disabled when prefers-reduced-motion is set in the user’s OS (5669)
DEPRECATED Bryntum’s Button now supports a set of different "renditions", different looks (‘filled’, ‘tonal’, ‘outlined’, ‘elevated’, ‘text’). This new system replaces the old CSS class based button variations like b-raised and b-transparent. The old CSS classes are now deprecated and will be removed in a future release
Setting Column.headerWritingMode no longer directly applies the writing mode in the style attribute of the header’s text element. Instead, it adds a CSS class to the header element, allowing for more flexible styling

DEMOS

The ai-ecommerce-grid demo has been updated to use the new AIFilter feature. Demo is located in the examples/ai-ecommerce-grid folder
New pin-columns demo is added to show the use of PinColumns feature. Demo is located in the examples/pin-columns folder
ANGULAR New Pin Columns demo is added to show the use of PinColumns feature. Demo is located in frameworks/angular/pin-columns folder
REACT-VITE New Pin Columns demo is added to show the use of PinColumns feature. Demo is located in frameworks/react-vite/pin-columns folder
VUE-3-VITE New Pin Columns demo is added to show the use of PinColumns feature. Demo is located in frameworks/vue-3-vite/pin-columns folder
Added resource-monitor demo showing sparkline charts using ChartColumn with updating data and animations. Demo is located in examples/resource-monitor folder
ANGULAR Added resource-monitor Angular demo showing sparkline charts using ChartColumn with updating data and animations. Demo is located in examples/frameworks/angular/resource-monitor folder
REACT Added resource-monitor React Vite demo showing sparkline charts using ChartColumn with updating data and animations. Demo is located in examples/frameworks/react-vite/resource-monitor folder
VUE-3 Added resource-monitor Vue 3 Vite demo showing sparkline charts using ChartColumn with updating data and animations. Demo is located in examples/frameworks/vue-3-vite/resource-monitor folder
VUE-3-VITE Column types demo has been updated to use Vue 3 + Vite framework. Updated demo is located in frameworks/vue-3-vite/column-types folder

BUG FIXES

12009 – DOCS Wrong product title in navbar when browsing 7.0.0 docs (alpha issue)
12084 – Resetting combo value to null does not cancel pending filtering request
12160 – AjaxStore passes sorter details in load packet even with nullish sortParamName
12191 – Columns menu in ColumnHeaderMenu is not scrollable
12217 – Clear trigger being visible when field is readOnly/disabled
12220 – If unregistering CellEdit, GridBase store filtering fails
12226 – revertChanges leaves removed records in the selection array
12248 – Single page unscaled export does not work correctly over websocket

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

VUE-3 Vue 3 npm wrapper packages now include types declaration in package.json (12014)
Added sparse index feature to Store to reduce the size of updates when re-ordering rows in large datasets (11220)

API CHANGES

DateTimeField docs updated clarifying that the input configs cannot be set on this field. Instead, should be configured directly on the underlying DateField and TimeField configs.

DEMOS

New "Grid sparse index" demo shows new feature of Store with flat data. The demo is located in sparse-index folder
New "TreeGrid sparse index" demo shows new feature of Store with hierarchical data. The demo is located in sparse-index-tree folder

BUG FIXES

7373 – ResizeObserver loop completed with undelivered notifications
8805 – namedItems does not work with up.namedItems when used at items level in cellMenu
11930 – HIGH PRIO Printed content displayed incorrectly in preview
11941 – HIGH PRIO Undo when a filter is applied results in row being at wrong hierarchy depth
11965 – Link field text exceeding column width
11982 – Dragging a grid header over another grid throws an error
11997 – Combo with filter not using correct format of parameters
12119 – Selection column gets saved multiple times with state

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

Added direction parameter when setting a sortFn on sortable column configuration, and added direction parameter to sortable (11639)
Update documentation section "Clicking in complex widget" to have same function name (11750)
Setting createOnUnmatched to true on a Combo will now create a record for the initial value, or a value programmatically set later, if the value does not exist in the store for the combo (11781)

DEMOS

Our new Salesforce Community page is up and running. It solves the problem caused by recent change in Salesforce policy regarding Non-Revenue Orgs. Look up "Device Activation Is Always Required for Non-Revenue Orgs"

BUG FIXES

11618 – HIGH PRIO TreeGrid selection crashes when using selection
11754 – HIGH PRIO Combo should not allow setting incorrect value programmatically
11811 – Cell focus issue with async finalizeCellEdit and check type columns
11845 – Values are not applied to all selected cells when performing edit operations on multiple cells
11858 – REACT Icon disappearing in other rows when collapsing parent node with Tree feature
11895 – showCheckAll is not checked in check column initially when all records are checked
11916 – RowExpander grid widget ignores dragSelect setting
11923 – Filter popup draggable is not configurable
11933 – List does not toggle tree node collapsed state on click of the toggle icon
11936 – Filter icon click toggles sort when filter feature used together with grouping
11938 – HIGH PRIO this.headerWidgetMap undefined error when columns data is applied from the state with collapsible and collapsed column
11952 – Performance issues on adding multiple columns

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

Grid columns now support headerWritingMode to allow for vertical text display in the column header Try it out in the updated columns demo. (11739)
ANGULAR Documentation in "Quick start" and "Data Binding" is now updated to reflect Angular 20 file naming conventions

DEMOS

ANGULAR New Lock Rows demo is added to show the use of LockRows feature. The demo is located in frameworks/angular/lock-rows folder
REACT-VITE New Lock Rows demo is added to show the use of LockRows feature. The demo is located in frameworks/react-vite/lock-rows folder
VUE-3-VITE New Lock Rows demo is added to show the use of LockRows feature. The demo is located in frameworks/vue-3-vite/lock-rows folder

BUG FIXES

11407 – Subclassed toolbar places spacer : '->' last of the items
11422 – HIGH PRIO CheckListFilterCombo is not customizable, and is not accessible
11691 – RowExpander‘s widget.store config not applied to the store
11743 – Export to PNG fails
11785 – Event handlers should be error-trapped so that the stack is not destroyed
11801 – HIGH PRIO Grid’s cell edit not saving changes when clicking to row above (Mobile devices)
11805 – VUE-3 LockRows feature throws error
11838 – store.data = null clears the store but does not fire the change + dataset event, so UIs do not refresh
11905 – Export example not working

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

Internal code improvements and bugfixes

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

The TreeGroup feature now accepts a custom sort function for parent nodes (9366)
PdfExport feature now supports exporting large datasets by streaming data to the export server using WebSocket connection (3953)
Added new Charts feature, which leverages the new Chart and ChartDesigner widgets to enable developers and end users to easily create charts and visualize data directly from selected cells in Bryntum products. Check the "What’s new" guide for details (8442)
New Single Page Unscaled exporter is added. It allows exporting content to a single page without limiting to a specific paper size. PDF export server upgrade to version 2.1.0 is required (11397)
Bryntum now ships a Chart module (chart.module.thin.js), to easier integrate Chart.js-based charts with our products. Used in the new charts demo
Bryntum npm repository provides charts thin package @bryntum/chart-thin and wrapper packages for major frameworks: Angular (@bryntum/chart-angular-thin), React (@bryntum/chart-react-thin) and Vue 3 (@bryntum/chart-vue-3-thin)
Added Grid columns that can show charts: SparklineColumn and ChartColumn
To pave the way for future improvements, Grid cells are now absolutely positioned inside the rows. A cell size is matched with the size of its column’s header using a ResizeObserver. If you see any side effect of this change in your app, please report it to us

API CHANGES

BREAKING The renderer config of Column is now also a class property. For TypeScript applications that extend the Column class or its descendants and override the renderer function, you will need to use the following declaration: override renderer: Column'renderer' = ({ column, value }) => { ... };

LOCALE UPDATES

Moved translations from section PanelCollapser to Object
Changed the Object.collapse and Object.expand keys to lowercase for consistency
Following locale keys added SinglePageUnscaledExporter.singlepageunscaled

DEMOS

New demo with TinyMCE showing how to use a rich text editor in a Grid cell. The demo is located in examples/tinymce-editor folder (10679)
New charts demo, showcasing how to combine the new Charts feature
New sparklines demo, showcasing how to use the new SparklineColumn

BUG FIXES

11304 – Panel collapse icon does not display any tooltip
11492 – Tiny MCE editor demo has the wrong index page
11615 – scrollRowIntoView‘s highlight config isn’t passing the item when configured as a function
11648 – Possible to select multiple radio items

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

Linked records (created using record.link()) now have a public originalRecord property that points to the original record. And the original record has a linkedRecords array that contains all the links to it
AjaxStore’s beforeRequest event allows async event handlers (11542)

STYLING CHANGES

When using animated row removal (animateRemovingRows), the b-deleting-row CSS class is now applied to the row being removed. You can override it to alter the animation used

DEMOS

The infinite-scroll-tree demo, which demonstrates the lazy loading support of a tree Grid, has been ported to Angular. It is located in the examples/frameworks/angular/infinite-scroll-tree folder
The infinite-scroll-tree demo, which demonstrates the lazy loading support of a tree Grid, has been ported to React. It is located in the examples/frameworks/react-vite/infinite-scroll-tree folder
The infinite-scroll-tree demo, which demonstrates the lazy loading support of a tree Grid, has been ported to Vue. It is located in the examples/frameworks/vue-3-vite/infinite-scroll-tree folder

BUG FIXES

8479 – Poor animation when removing a row
11355 – TreeGrid crashes with 200K+ data
11520 – Right click on the sort icon in the column header should open headerMenu
11559 – Store not clearing the changes on commit when custom idField is used
11565 – Grid’s beforeStateApply should describe its properties
11574 – Screen reader is not announcing filter operation results
11584 – applyChangeset crashes on remotely filtered store
11602 – Tool‘s <button> element needs type="button"

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

A lazy loaded tree store no longer requires each parent to provide its full child count via the remoteChildCount data field. Instead, it relies on autodetection and, in special cases, the new isFullyLoaded field can be used instead
The unload method has been added to a lazy loaded store. For a regular store, it removes the specified records from the store and reloads the next time they are needed. For a tree store, it clears all the child nodes of the specified parent nodes, and reloads them the next time they are needed (8961)
showDirty can be configured now to show red tag for all the cells for the new records. Set newRecord : true on showDirty to enable it (10344)

API CHANGES

DEPRECATED The remoteChildCount field on a TreeNode was deprecated and will be removed in 7.0

DEMOS

New infinite-scroll-tree demo, which demonstrates the lazy loading support of a tree Grid. The new demo is located in the examples/infinite-scroll-tree folder (9714)

BUG FIXES

10161 – Windows OS ContextMenu does not show after re-rendering of Scheduler
10904 – HIGH PRIO Refactor pdf export code to generate rows in bulk
11221 – HIGH PRIO ColumnStore sort and re-ordering columns does not work
11324 – SALESFORCE Expand/collapse not working for tree using keyboard navigation
11337 – Pasting invalid text into TimeField results in permanent invalidity
11400 – HIGH PRIO Non-editable cell still change value when using multi-select edit
11416 – Aria-live not set correctly when using DOM config on empty text
11431 – Column state is not restored correctly for unconfigured columns with same type as already exists in ColumnStore
11433 – HIGH PRIO CellEdit cannot cancel editing with Escape key when clearable Combo is used
11471 – Export feature should log stack trace to console when export failed

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

The PDF Export and Print feature has a new paper format A0 (11083)
Reordering rows in a flat chained store can now reflect on the master store, if the chained store is configured with syncOrder: true. Reordering in a chained tree store is always reflected on the master store (11349)

BUG FIXES

11045 – Case sensitive filtering is inconsistent
11217 – RowResize feature doesn’t work with column autoHeight set to true
11343 – TimeField docs mention non-existing step config on the minute field
11344 – Slider component cannot be used within Popup component
11352 – TimeField is not styled correctly
11386 – HIGH PRIO Scrollbar issue after adding columns to empty subgrid
11394 – HIGH PRIO FillHandle area grows on scroll

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

List now has optional support for displaying text when empty, using the new emptyText config
The ChecklistFilterCombo now displays "No results found" when there are no results in the list. The string is localized using the noItems locale key, which was already part of the locales but mistakenly not used
When reloading a lazy-loaded Store (including remote filtering and sorting) the current dataset will be kept until the load request finishes. Previously, it was cleared upon starting the reload and populated with new data later. If an AjaxStore is being used (a Store configured with a readUrl) a load mask will be displayed during the reload operation (11261)

STYLING CHANGES

The emptyText shown in a Combo‘s picker has been promoted to an actual element with the .b-empty-text CSS class applied to it, instead of a harder to style pseudo-element

BUG FIXES

3164 – Column with just icon and no text should not use margin-right for its icon
9558 – headerHeight in group feature causes rendering issues with large datasets
10066 – Support TimeField for Salesforce
10474 – Cannot add items into container after remove previous using destroy()
10829 – beforeLoadPage should have sorters and filters in the params when using remote store
10986 – Store.search should get the fields from record.fields instead of record.fieldNames
11026 – DatePicker not selecting valid value when min property is updated dynamically
11131 – Applying store group state after initializing grid does not show group icon in column header
11170 – Clicking "Don’t show again" in hints popup doesn’t work
11172 – AI support in Grid – Two update events triggered by AI formula
11175 – AI support in Grid – Referencing $data in an AI formula error
11235 – Async cell renderer can throw if the row being rendered is destroyed during the await
11252 – Field class should disable OnePassword except for if it is a PasswordField
11276 – Headers misaligned after tree grouping
11277 – Row reorder drag handle should be aligned to the left
11281 – DragHelper example not working properly
11294 – Copying a cell when using FillHandle / cell selection shows double bottom border

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

DateField now reveals its expected format when input is in incorrect format
AggregateColumn now has a includeFilteredOutRecords which lets you include filtered out records in the aggregation (11105)

STYLING CHANGES

SlideToggle no longer has a fixed height defined in the CSS. This allows for more flexibility in styling and layout

LOCALE UPDATES

The DateField invalidFormat message is now updated to include the expected format. New value is format => 'Invalid date input, expected format is ' + format

BUG FIXES

11063 – TreeColumn having redundant icon while LockRows enabled
11070 – HIGH PRIO Online demos in codepen crashes
11071 – Grid summary column resize issue
11079 – Cell pasting is inconsistent based on a drag direction
11084 – expandAll / collapseAll crashes when using GroupSummary feature
11097 – Should not show "invalid field" while typing the field name
11104 – Resizing Popup sometimes does not stop after mouse-up
11117 – Toast progress aborted in demos after 5s

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

TabPanel now supports adding custom widgets to the tabBar via Container#tabBarItems. See updated live demo on the TabPanel docs page (10047)
Tabs in a TabPanel can now be reordered using drag-drop, by setting enableReordering to true on the tabBar (10489)
New MonthPicker widget for date picking and calendar control
We’ve improved search in the documentation with new context-aware algorithms, delivering more accurate and relevant results from the API, guides & examples
PdfExport feature was updated to support row expander. It requires upgrading PDF Export Server to latest version 2.0.0 which was recently released in a separate GitHub repository and Docker Hub (10533)
A new feature, RowEdit, allows editing of a whole record row at one time using a side docked editor panel (10690)
A new config for Panel, drawer marks a Panel as a docked, slide-in panel, which by default slides in over the contents of the browser viewport
Tabs in a TabPanel that contain invalid input fields will now have a red border to highlight the invalid state (10789)
RowReorder feature now allows drag-drop reordering of rows into new groups to update values of leaf nodes (5689)
Setting required on a Field now automatically appends a * to its label, if showRequiredIndicator is set to true (10835)
New CheckboxGroup widget added (2018)
Popups can now be resized on all sides and corners via the new resizable property (6856)
Decimal separator and group separator for formatted numbers can now be configured globally using new static properties on NumberFormat: decimalSeparator and groupSeparator (11016)
BREAKING Since most apps have a build process that includes a transpilation step, starting with v6.2.0 we use the minimum possible transpile polyfills for the source code inside the @bryntum/grid-thin npm package to ensure that it works for all currently supported frameworks. Previously, each source file was transpiled with more polyfills, which introduced unnecessary overhead from transpilation helper functions. After this change, the size of your built app should be reduced. If you encounter issues with your framework’s builder parsing the code, consider upgrading to a newer framework version that supports the latest ECMAScript specification (10797)

API CHANGES

The Widget.accessibility property has been removed. We now detect when keyboard control is being used, and this can be read from the new Widget.focusVisible property
Widget drag-drop is no longer done using the native HTML drag-drop (10793)
Popups are now draggable by default
The type of the value property on checkboxes was for legacy reasons String, it has now been changed to the more expected Boolean
BREAKING The AjaxHelper.fetch() utility function no longer applies credentials: 'include' by default, to better match how the native fetch API works. This change also affects AjaxStore, if used by your app to handle remote data (10886)

STYLING CHANGES

Grid cells with overflowing text now use ellipsis by default. If you prefer the old behavior where text is cropped, set Grid’s cellEllipsis property to false (2982)
Changed the showDirty indicator pseudo-element from :before to :after so both the rowReorder grip handle and the showDirty indicator can display simultaneously. If you have custom styles targeting :before for showDirty indicator, please update them to target :after instead (10966)
multiSelect Lists now display empty checkbox icons when unselected and checked checkboxes when selected

LOCALE UPDATES

Added translation keys Object.information and Object.showDetails, Object.to, Object.at, Object.on, Object.editing, Object.settings, Object.go
New locale key Toolbar.showOverflowingItems added for the tooltip shown for toolbar overflow scroll buttons
New locale key RowNumberColumn.rowNumber added for the RowNumberColumn header tooltip

DEMOS

New rowedit demo, which Demonstrates the RowEdit feature, that edits records in a docked panel. The new demo is located in examples/rowedit folder
New ai-review-grid demo showing how to use a FormulaProvider to populate field values using AI. Demo located in examples/ai-review-grid folder
New ai-ecommerce-grid demo showing how to use AI to generate SEO description + keywords in bulk. Demo located in examples/ai-ecommerce-grid folder

BUG FIXES

10373 – Filter dropdown should include the sameDay and sameTime operators
10623 – Misalignment dragging tab last
10625 – ACCESSIBILITY Checkbox and Tab selector buttons have no visible focus rendition
10868 – Previous filter not shown when filtering assigned resources

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

Added a new stateSettings config to control how column state is restored. It includes a restoreUnconfiguredColumns option to toggle whether columns not explicitly defined in the grid configuration should be restored (10943)

BUG FIXES

8782 – Salesforce LWS support in Firefox
11014 – Export Issue: Column Type ChipView is empty on export

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

We’ve launched nightly npm package builds on our Bryntum npm server. Versions follow the format X.Y.Z-nightly.YYYYMMDD (e.g. 6.1.8-nightly.20250330), reflecting the current version and publish date
When using the CellEdit feature, cells, which contain focusable elements may now be included in the cell-to-cell navigation by setting tabToFocusables property (6999)
A grid store filter, which results in only removal of a contiguous block of records within the visible viewport will now update the UI in the same way as a store remove operation (10706)
The CellCopyPaste feature now supports pasting into multiple non-contiguous cells (10696)
New applyDefaults method added to the Base class to allow setting default values for class configs/properties (10876)
AggregateColumn now lets you toggle aggregation on / off using the new enableAggregation field (10909)
PdfExport now has an isExporting property, which you can use to check if an export operation is ongoing (10947)
LockRows features now supports configuring the bottom grid section using the bottomGridConfig config (10958)
Combo widget now supports toggling multiSelect mode on / off at runtime
Panel header config now accepts an iconCls property to show an icon in the header
TreeNode allUnfilteredChildren property is now public, allowing you to retrieve all children of a node, ignoring any active store filters (11013)

API CHANGES

The rtl config property of widgets is now public. By default, widgets conform to the writing direction of the element they are rendered to. But with the now public rtl property, you can force a widget, and all descendant widgets to lay out from right to left (10859)
The Widget‘s elementAttributes config is now public allowing to specify attributes to assign to the root element of this widget (10940)

DEMOS

We have introduced UI localization for our Vanilla JavaScript demos, supporting all 45 currently available locales

BUG FIXES

10206 – parentId field cannot be remapped
10621 – HIGH PRIO Opening month picker in event editor closes entire editor in Safari
10636 – groupRenderer not triggering for empty string values during Excel export
10701 – TYPESCRIPT Update AjaxStore beforeRequest and afterRequest parameters docs
10726 – Grid crashes and shows a blank section when scrolling to an invalid editor outside the viewport
10763 – Grid not using correct AjaxHelper.DEFAULT_FETCH_OPTIONS for paged stores
10795 – SALESFORCE Remove Map/Set polyfills
10812 – Fillhandle disappears if mouseup happens outside browser window
10814 – HIGH PRIO Column header misaligned if resize when used regions
10825 – Grid crashes when reverting changes and reapplying filters on update
10826 – Error when specifying labelWidth with 'label' for DateRangeField widget
10840 – Cells still selected when returning false from a selectionChange listener
10854 – Selecting multiple cells should copy all the selected cell Records when cellCopyPaste is disabled
10874 – Grid error with finalizeCellEdit and sorting
10889 – Export to excel should include group header
10897 – Sticky elements not correctly accounted for when calculating visible rectangle
10924 – React Editor popup cutoff on last row
10938 – HIGH PRIO Incorrect CSS sourceMappingURL in Bryntum thin npm packages
10944 – Grid colum with combo editor behaves different with picker title specified
11002 – Grid Incorrect focus behaviour when editing grouping fields of records

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

Copied Model instances now have a copyOf property that points to the original instance (10587)
The Button class now accepts a split property, which means that its menu will only be shown when clicking on its arrow icon, and it will only toggle its pressed state and action its click handler when clicking on the main part (10678)
A new config, scrollAction for the CellEdit feature specifies what should happen if the cell editor is scrolled out of view, for example when using a mousewheel. The default value is null which preserves the current behaviour of continuing the edit (10760)
The CellEdit feature now supports rendering the editor as a floating element outside the cell element (10767)

API CHANGES

Tree stores got a new keepExpandedOnLoad config in v6.1.4, but it fell out of the changelog. When set to true, the tree will restore matching nodes expansion state after a reload (10017)

DEMOS

REACT-VITE "Vue Renderer" JavaScript demo has been updated to use to React + Vite. The new demo is located in examples/frameworks/vue-3-vite/vue-renderer folder (10680)
REACT-VITE New infinite-scroll demo showing how to load data on demand using RTK Query + lazyLoad feature of Bryntum Grid. Demo is located in examples/frameworks/react-vite/infinite-scroll folder (9886)
New Demo collapsible-inline-columns showing collapsing / expanding of inline columns. Demo is located in examples/collapsible-inline-columns folder (10266)

BUG FIXES

9587 – HIGH PRIO StoreDataField change tracking not working when using store field
10586 – TreeGroup check column not grouping null values with false
10652 – Grid crashes on store.removeAll() when lazy-loading enabled
10665 – VUE-3 Unexpected warnings from the wrapper
10699 – deselectFilteredOutRecords not working on a Tree Grid
10704 – Check column still changes when column is set to be readOnly
10714 – Clicking on custom expand and collapse icon makes record selected
10715 – StateProvider doesn’t preserve the scrollTop
10739 – Horizontal time axis scroll position reset when entering time axis header using keyboard
10761 – Using scrollable config in subGrid configuration breaks the SubGrid’s scrollability
10763 – Grid not using correct AjaxHelper.DEFAULT_FETCH_OPTIONS
10784 – Groups not collapsing when using a check column
10785 – HIGH PRIO Exception when dragging linked record to an empty group
10787 – Wrong width then using row reorder and selectable row
10794 – Column filter not clearing correctly when empty input

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.78.0
Remix: >= 2.15.0

FEATURES / ENHANCEMENTS

ACCESSIBILITY TreeColumn cells in parent rows now include an aria-expanded value ensuring that row collapsed state is announced (4643)
Tabs in a TabPanel can now be closable which shows an X icon (8679)
ACCESSIBILITY FilterBar fields now have an aria-label defined to let screen readers announce context
ACCESSIBILITY Widget now has an announceAriaLive method letting you provide a text message to screen readers via an aria-live element
The CellEdit feature now supports using WebComponents as input elements making it possible to provide an Angular component as a cell editor (10471)

API CHANGES

DEPRECATED Widget ariaLive property was deprecated and will be removed in 7.0

DEMOS

ANGULAR New Angular celledit demo, which Demonstrates the CellEdit feature has been added. New demo is located in examples/frameworks/angular/celledit folder
REACT-VITE Added React Color cell editor to cell-edit example to demonstrate how to use popup editors. Updated the React version of the demo to 19.0.7 and Vite version to 6.0.9. Demo is located in examples/frameworks/react-vite/cell-edit folder

BUG FIXES

73 – React components rendered inside the cells are not overflowing it
1356 – Export summary rows to Excel
4280 – Pressing shift shows cell focus outline
9518 – Sort count is being shown when only 1 sort count is used along with grouping
9946 – Resolve prototype pollution warnings from GitHub Advanced Security
10215 – ACCESSIBILITY No records found after the filtering the scheduler not announced by the Voice-Over
10407 – DateRangeField ignores clearable config
10428 – Enable CSS targeting of column-specific filter UI fields
10466 – Nested grid with chart demo race condition
10490 – ACCESSIBILITY RowExpander column has no aria-label
10495 – ACCESSIBILITY RowExpander button needs aria-label
10516 – TimeField label misaligned if initial value has not been set
10519 – Grid splitter has lower z-index than emptyText
10591 – HIGH PRIO Not possible to provide ariaLabel in Column subclass
10617 – Shift + Backspace clears text field value
10624 – HIGH PRIO CellEdit freezes when tabbing into readonly row

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.38.0

BUG FIXES

10393 – VUE-3-NUXT Basic demo doesn’t display the demo title
10467 – Moving a column to the left section does not work when using LockRows
10468 – emptyText should not show during store load
10488 – HIGH PRIO grid-taskboard demo code is not available in online Code Editor
10496 – ACCESSIBILITY Key navigation stuck after landing on a checkbox inside a grid cell
10502 – ACCESSIBILITY Rating column cannot be edited using keyboard
10504 – ACCESSIBILITY TimeField cannot stop editing using ESC key
10510 – Configuring a store and items leaves a combo store misconfigured

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.38.0

FEATURES / ENHANCEMENTS

Starting with the 6.1.4 release, there are now trial versions of thin NPM packages available on our NPM server. These can be used to evaluate combining multiple products before purchasing a license. Please check the "What’s new" guide for the details

API CHANGES

For more similar behavior between browsers, DateHelper.parse now ignores very short strings and discards any dates with a year before 1900 when falling back to new Date() parsing. This affects DateFields using strictParsing: false (the default). Before this change, Chrome parsed '2' as Feb 2001, while Safari parsed it as Jan 0002

STYLING CHANGES

When dragging multiple grid rows, a new proxy showing each record was added. The old b-row-dragging-multiple CSS class is no longer used (10340)
Added a new config closeOnEscape to control whether pressing the ESC key will close the popup

DEMOS

ANGULAR Added new Angular basic-thin demo showing use of thin NPM packages. Demo is located in examples/frameworks/angular/basic-thin folder
REACT Added new React basic-thin demo showing use of thin NPM packages. Demo is located in examples/frameworks/react-vite/basic-thin folder
VUE-3 Added new Vue-3 basic-thin demo showing use of thin NPM packages. Demo is located in examples/frameworks/vue-3-vite/basic-thin folder
WEBPACK Added new Webpack basic-thin demo showing use of thin NPM packages. Demo is located in examples/frameworks/webpack/basic-thin folder
REACT Added new React renderer-context-react-19 demo showing use of context rendering with React 19 JSX components. Demo is located in examples/frameworks/react-vite/renderer-context-react-19 folder

BUG FIXES

7065 – HIGH PRIO Export to PDF feature missing paper formats
10364 – Restore expand on non-editable input click for TextAreaPickerField
10367 – Context menu opened from keyboard throws in Salesforce
10384 – Add missing percentage docs to Numberfield
10386 – Adjust increment/decrement/error tooltip handling of percentage Numberfield
10397 – Block ESC key from propagating in cell editor
10413 – FillHandle only works on the first table selected when there are two or more tables on the page
10414 – DatePicker doesn’t highlight today date
10415 – DateField picker shows previously selected date after input is cleared
10419 – Combo does not return record
10424 – RTL Popups with centered set to true are not centered in RTL mode
10429 – Keystrokes on actionable items in grid cells no longer work
10446 – Records are duplicated when row is dropped to an empty group
10448 – REACT JSX renderers are not supported with React 19
10452 – Drop to a group with empty array field should clear the array field on the corresponding record

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.38.0

FEATURES / ENHANCEMENTS

Print feature is supported in Salesforce with LWS enabled (7917)
The RowExpander feature now exposes the refreshRow function, which when called with a record, refreshes the content of an already expanded row (10167)
A sort direction param was added to CollectionSorter´s sortFn function (10171)
Stores can now be configured with reapplySortersOnUpdate to trigger sort after a record is updated (877)
Store sorters can now be configured with a caseSensitive boolean if you want sorting to be case-insensitive (10267)
Salesforce LWC build now using generators instead of async/await as a workaround for Firefox bug. LWC bundle is now compiled with "chrome": "54" babel target (7849)
By configuring a data field with complexMapping : false, it can now point to a data property containing a dot (.), for example { "member.name" : "value" }. Previously (since v4.1), the dot was always interpreted as a nested object path (10168)

API CHANGES

The CellEdit beforeFinishCellEdit event now also includes an oldValue param
VUE 2 reached end of life on December 31, 2023. As a result, we will no longer be updating our Vue 2 components. While the components will continue to exist, we will remove them in a future release and recommend that you upgrade to Vue 3 for continued support

STYLING CHANGES

Certain color adjustment functions in SASS has been deprecated and will be removed from SASS in a future version. To be prepared for that, we have replaced our usages of these functions with the new ones. In general, this should not affect the look of components, with reservation for minor color variations (for more information, see https://sass-lang.com/documentation/breaking-changes/color-functions)

DEMOS

Renamed "theme" demo to "custom-theme". The updated demo is located in examples/custom-theme folder (10155)

BUG FIXES

9018 – HIGH PRIO Localization doesn’t work for Microsoft Dynamics CRM Online
9691 – columnDrag event param insertBefore does not get updated once we set context.valid to false
10084 – Error in currency format
10127 – Store changes not being tracked as expected when using a tree store with filters
10177 – Spamming row expander causes crash
10204 – Remove tbar, bbar and header from cloned grid in LockRows feature
10234 – HIGH PRIO Correct formatting of NumberField percentage with decimal digits
10255 – Error when replacing data with parentId property
10258 – showAnimation does not animate the Popup
10260 – React flushSync was called from inside a lifecycle method runtime error
10263 – Card layout activeItem yields the hidden, previous activeItem in show listeners
10273 – DOCS beforeFinishCellEdit event value param points to the old value
10278 – TYPESCRIPT Define the GridSelectionMode type
10285 – HIGH PRIO Combobox does not clear unmatched initial value
10309 – Error in Combo grouping after updating to 6.1.0

VERSIONS SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0
Sass: >= 1.38.0

FEATURES / ENHANCEMENTS

toggleCollapse method on the Group feature now accepts an array of records/ids (9749)
Implemented support for headerRenderer to return JSX and updated the "Using React Context with renderers" example to demonstrate its usage. The demo is located in frameworks/react-vite/renderer-context folder. (7342)

API CHANGES

Store has a new better way of chaining tree stores. By using chainTree() instead of chain(), the chained store will be a full tree store with links to the nodes in the original store. This will let you expand / collapse and filter the tree in one store without affecting the other (9171, 9177, 9178, 10130)
When using both the RowCopyPaste and the CellCopyPaste feature, copying row data and pasting it into cells, the copied data will now be inserted as new rows.
DEPRECATED The makeChained function in Store was deprecated in favor of chain and chainTree. It will be removed in 7.0.0
DEPRECATED The groupRecord param of the Group feature´s toggleGroup and beforeToggleGroup events is deprecated in favor of the groupRecords param, since you can now toggle multiple group records. The param will be removed in 7.0.0

DEMOS

REACT-VITE "Basic" TypeScript and JavaScript demos have been updated to use to React + Vite. The new demo is located in examples/frameworks/react-vite/basic folder (9932)
VUE-3-VITE "Basic" (Vue 3 + Vite) demo has been updated to use TypeScript. The demo is located in examples/frameworks/vue-3-vite/basic folder (9808)

BUG FIXES

9241 – Implement support for configuration with rows higher than paper size
9412 – HIGH PRIO php demo cannot handle remote filter properly
10106 – Row reorder handle was misaligned
10107 – Pasting rowCopy data into cells failed in some cases

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

API CHANGES

Popups now realign automatically when scrolling if anchor is configured.

BUG FIXES

9566 – TYPESCRIPT Nullable child items need type null for TS apps
9914 – HIGH PRIO animateTreeNodeToggle with locked columns places rows incorrectly

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

Group feature now offers to show a checkbox in group row headers via selectionMode.showCheckAllInGroupRows (2208)
Model now supports fields being calculated via the new calculate property (3070)
The regular non-Ajax Store now has the ability to accept remote paging, sorting and filtering (6860, 8180, 9363, 9887)
The FilterBar feature now supports remote filtering without using AjaxStore (7477)
AjaxStore has new configs that lets you transform incoming and outgoing data: transformLoadedData, transformCreationData, transformModificationData, transformRemovalData (8314)
Column.type instance member is now public (9229)
The TreeGroup feature now supports summaries in each group parent row using the Column sum config. See this in action in the updated tree-grouping demo (9716)
ExcelExport feature got a minor refactoring, and now uses more feature-rich write-excel-file library (6089)

BUG FIXES

9319 – Exceptions when copy-pasting records in Grid demo with charts
9468 – Crash when selecting date in fullscreen docs fiddle
9876 – DateRangeField picker wrongly scrolls right one month when picker is shown (Firefox only)
9955 – Aggregation demo total column shows only $0
9959 – Grid crashes when deleting records with group checkbox selected
10043 – DayTime includes end on startTime and start on endTime

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

Added a ignoreLinkRecords config to StoreChain, to avoid importing linked records from a master store, such as when you group by an array field (9840)

DEMOS

ANGULAR Added new demo showing how to create a custom theme by modifying scss variables. The demo is located in the frameworks/angular/custom-theme folder
VUE-3 Added new demo showing how to create a custom theme by modifying scss variables. The demo is located in the frameworks/vue-3/custom-theme folder
REACT-VITE Added new demo showing how to create a custom theme by modifying scss variables. The demo is located in the frameworks/react-vite/custom-theme folder
REACT-VITE New renderer context demo showing how to configure React renderers to use the React Context. The demo is located in the frameworks/react-vite/renderer-context folder (Fixed 8923)

BUG FIXES

8998 – Printing Gantt with more than 3000 records causing application to crash
9298 – LazyLoad beforeLoad event isn’t triggered
9671 – HIGH PRIO REACT Grid column renderer flickering when row is updated
9746 – SALESFORCE RowExpander doesn’t expand records in Salesforce
9748 – View is not updating on adding resources using add method with lock rows feature and grouping
9758 – aria-readonly not properly set on Grid cell
9767 – Column filter returns undesired results
9872 – Records are not persisted when group is collapsed
9896 – Grid not rendering any data in Firefox 115 ESR
9905 – Accessibility issue in date picker widget, toolbar buttons should not have role="presentation"
9913 – Grouping from header menu is broken
9927 – Accessibility DatePicker doesn’t announce selection status and week day name for selected date in date picker
9950 – RowExpander will often become detached from record
9988 – Exception when moving record with empty group value
10006 – Placeholder should not be visible after selecting an item in combo with no label

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

DatePicker now supports selecting ranges by tapping twice on touch devices when multiSelect is enabled

BUG FIXES

5233 – ANGULAR Frameworks wrappers components not triggering some events
9572 – Default currency from locale not used
9712 – store.createRecord() behavior different with useRawData
9718 – VUE-3 Preventable events don’t work in Vue wrapper
9738 – TYPESCRIPT FieldTrigger class missing docs for its activation key
9754 – EventHelper.onTransitionEnd calls its handler using globalThis if globalThis.callback exists
9770 – FillHandle not moving to active cell after Enter key press
9771 – beforeClose event should handle asynchronous listeners
9772 – Container should be able to track presence of changes to its fields
9779 – ActionColumn does not call onClick handler for items created by a renderer
9781 – AjaxStore events, which contain url should read back the url property so that handlers can mutate it
9797 – lazyLoad with TreeGrid hangs
9801 – Lock rows feature display broken with grouping and filtering
9802 – Text cells show as dirty changes when reverting values to empty string
9805 – HIGH PRIO Grid freezes when row reordering in column using an array field
9819 – Font awesome tree arrows too big on touch screen
9851 – Crash on array column when grouping

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

The difference between Model.fields and Model.allFields was clarified in the documentation (9700)

BUG FIXES

8328 – Panel fields items not being populated from record config
9672 – Incorrect docs for navigate event
9680 – RatingColumn value not exported to Excel

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

Store now fires beforeFilter event before filters are changed (9652)
The plugin processing has been updated to correctly handle multiple plugin configurations

BUG FIXES

9653 – TypeScript Mappings for Store sort method
9657 – Docs fiddle code editor is too narrow

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

Bumped the built-in version of FontAwesome Free to v6.6.0, which includes a new table-cells-row-unlock icon sponsored by Bryntum
The getCount() function of Store now accepts an options object, letting an app control how records in the store are counted (for example if filtered out records should be included in the count or not) (8737)
Added a totalCount property to Store and AjaxStore. It replaces the existing allCount property, but has a better defined behavior, and the name also matches the total property that is expected to be passed in the dataset when using paging

API CHANGES

DEPRECATED Store.allCount and Store.originalCount was deprecated. Their behavior was not well documented or clear, we recommend using Store.totalCount or Store.getCount(options) instead to count the records in the store in the way your app needs
DEPRECATED The Store.getCount(true/false) signature has been deprecated. Use Store.getCount(options) instead for better control of how records are counted
GridRowModel now has a new fixed field built-in (used by LockRows feature)

DEMOS

REACT-REMIX "Basic" (React + Remix) demo shows using Grid component in Remix. The demo is located in frameworks/react-remix/basic folder (4912)

BUG FIXES

8835 – FillHandle RTL issues
9462 – Summary row cells misaligned when using variable column flex
9481 – Filter lost when no results present with remote filtering
9521 – Deleting a row while cell editing makes the value disappear in the next row
9530 – LoadMask only masks top grid section when using LockRows feature
9545 – Getting Undefined if no value passed to items property of filter
9548 – TYPESCRIPT mergeRenderer is not well documented
9573 – Column custom ariaLabel is reverted to the default on focus in Cell

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

PERFORMANCE New refreshOnlyAffectedSummaries property added to the Summary feature which only refreshes column summaries affected by a record update. (9511)

BUG FIXES

9077 – Filter combo not showing correct text when set to false when filtering ManuallyScheduled column
9198 – Grid printing does not handle auto height rows
9295 – Grid Print hangs if the store has no visible records
9419 – Column lines showing on header when columnLines is set to false
9436 – DOCS Improve docs and type for colors property
9445 – Button rendered in cell HTML prevents selection
9463 – Rowreorder handle misplaced in right-aligned column
9480 – Incorrect tooltip and filter icon when no option is selected in multiSelect Filter combo
9489 – Styling issue for ColumnManager Popup
9495 – Fill Handle Issue when change column definitions
9510 – Exiting grouping breaks the Stripe feature

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

We are thrilled to announce version 6.0 of our Grid product. This release marks a significant milestone for us after more than two years of dedicated development. In this update, we are excited to bring you:

Lazy loading of rows as you scroll, for huge datasets
Support for freezing rows
New DateRangeField widget
Support for rendering widgets into grid column headers
Drag-drop of rows between different Grids and TreeGrids
Improved TypeScript typings
A new code editor in the examples for easy fiddling
Cool new demos
Bug fixes and other enhancements requested by our community

A special thanks to everyone who helped us by testing our alpha and beta versions. Your feedback and support have been invaluable

FEATURES / ENHANCEMENTS

The List widget now offers a tooltipTemplate method to show a tooltip text for each list item (887)
Stores now have support for lazy loading of data, which when used in the Grid, loads new records while scrolling (1804, 8001)
Added a new DateRangeField widget for picking a range of dates (1888)
Convert button to menuitem on Toolbar overflow where appropriate (2298)
Programmatically expanding & collapsing a Panel was made easier by adding expandPanel() and collapsePanel() methods (5871)
The RowCopyPaste feature has been enhanced in two ways. It now creates clones of the copied records immediately on a copy action. This makes the copied data unaffected by any Store changes between the time of copying and the time of pasting. Additionally, when copy-pasting between different Grid instances, the complete record will be copied, not just the fields that have a corresponding column, as it was previous (6379)
PDF export server has been moved from examples/_shared/server folder to its own GitHub repository: https://github.com/bryntum/pdf-export-server (6820)
Columns now support having widgets rendered into their header via the new headerWidgets config. See it in action in the nested-grid-with-chart demo (6855)
The default format for NumberField and NumberColumn now includes all numeric-related configs from the current locale, like decimals separator, grouping separator etc. (6948)
The ColumnReorder feature has a new property stretchedDragProxy which displays a full-height transparent element while you reposition the column (7870)
The AjaxStore's commit function now queues calls being made while already committing instead of aborting and returning false. Previously, when a commit was finished, all Store changes were cleared. Now, only changes related to the actual commit will be cleared, so any changes being made after the commit call and before the commit finishes will be left untouched (7980)
Elevate tabIndex config from TextField to Field (8010)
ButtonGroup should allow multiple toggled buttons (8142)
Add tabIndex config to Button (8166)
STYLING The DatePicker no longer uses a background color in its header, for a cleaner look (8187)
DOCS Documented step triggers for DateField, NumberField, TimeField & DurationField (8270)
Grid state mechanism now supports the TreeGroup feature (8364)
The RowReorder feature now supports dragging rows into other grid instances (9225)
ACCESSIBILITY Buttons without text now adds the tooltip text to the aria-label attribute (9360)
DurationField now accepts step as a duration string (e.g. "15min")
New columnCollapseToggle event fired by Grid when a group column is collapsed or expanded. The collapsible-columns demo was updated to use this event (previously used private event), so if you copied code from this demo, you may want to review and update your code.
The code editor in examples is now implemented with the VS Code engine. Code folding, search and replace, full undo/redo is now available when editing examples
To better follow readability recommendations, NumberColumn now defaults to aligning its content to the end (right for LTR, left for RTL)
TypeScript Class configs Config (e.g. ButtonConfig) now provide type declarations for listeners parameter in .d.ts files
TypeScript Class configs Config (e.g. ButtonConfig) types now have optional parameters in .d.ts files. *Config type can be used instead of Partial<*Config> declaration
PercentColumn now offers to render a circular percent indicator via the new mode config
The Filter feature now supports columns with a filterable config in the new multi-filter UI
Bumped the built-in version of FontAwesome Free to v6.5.2, which includes a new table-cells-row-lock icon sponsored by Bryntum
Angular Bryntum Angular wrapper now exports Bryntum...Props types (e.g. BryntumGridProps) which match the configs available for a wrapper component (e.g. BryntumGridComponent). Wrappers code is now delivered with documentation inside, that helps in setting up the components
The Group feature has a new headerHeight property to easily change group header row heights.
EventHelper no longer mutates the DOM event object to fix browser quirks and add utility properties. It now wraps the DOM event with a Proxy, which exposes all the properties of the DOM event and also accepts any new properties added to it. The original DOM event is available in the browserEvent property
New alwaysMultiSelect selection mode added to Grid, where all row or cell (configurable) clicks adds to the current selection. Click on a selected row or cell deselects it
The RowCopyPaste feature is now configurable with cutOnly, which translates all copy actions into cut actions and prevents the Copy context menu option

API CHANGES

VUE-3 Bryntum Vue-3 wrapper now exports Bryntum...Props types (e.g. BryntumGridProps) which match the configs available for a wrapper component (e.g. <bryntum-grid>). Wrappers code is now delivered with documentation and TypeScript sources inside (3085)
BREAKING Previously, when returning undefined from a column renderer, the actual cell will not be updated. There is a config on Grid.column.Column which controls this behaviour – alwaysClearCell. Since 6.0, alwaysClearCell will default to true, requiring columns that relies on the previous behaviour to be configured with alwaysClearCell set to false (5622)
DEPRECATED The WidgetHelper utility class has been deprecated and will be removed in a future release. Use the corresponding widget class instead – Widget, Toast or Mask (6103)
DEPRECATED The beforeExpand, expand, beforeCollapse and collapse events triggered by the RowExpander feature are now deprecated. Use the new beforeRowExpand, rowExpand, beforeRowCollapse and rowCollapse events on Grid instead (7845)
BREAKING DateColumn now warns when not using a DateDataField in the underlying field definition of the Model. A DateDataField will be created in this case, which results in the value provided to the DateColumn renderer method will now always be Date objects (previously String type if data was not parsed) (8226)
STYLING Tooltips with pure text contents (non-HTML) are now shown with less body padding (8287)
BREAKING The useRawData setting on Store is now enabled by default, but with all sub-settings disabled. This means that the incoming data object will be used as is, without being cloned. Which will boost data loading performance, but is potentially a breaking change if the data object is reused / used in other parts of the application (8335)
To allow defining multiple filters with same property but different operator, filter ids are now generated by combining property and operator (property-operator, previously only property). For example value-=and value-< (8482)
BREAKING In 6.0.0-alpha-2 we changed the default value for useRawData on stores to true. This boosted record creation performance by not cloning the incoming data object. However, this change has lead to some issues, and we are now taking a step back. It will once again default to false when supplying data inline, and instead only to true when data is loaded remotely using an AjaxStore (9289)
The RowCopyPaste feature’s events copy and beforePaste has gotten their parameters slightly changed. The parameter records now contains clones of the copied records, and the original copied records can be found in the parameter originalRecords (these parameters are wrapped in a single event object)
Field´s highlightExternalChange default value is now false
BREAKING keepDate config of the TimeField class now defaults to true (previously false)
DEPRECATED @bryntum/babel-preset-react-app, @bryntum/cra-template-typescript-grid, @bryntum/cra-template-javascript-grid npm packages are deprecated, and will not get any further updates. Versions prior to 6.0.0 are still accessible
BREAKING The following previously deprecated APIs were removed:
- BrowserHelper.supportsPassive (v5.0.0)
- CalendarPanel.showWeekNumber (v4.0.0)
- DomHelper.up() (v5.3.9)
- DomHelper.focusWithoutScrolling() (v5.6.4)
- DomHelper.addClasses() (v5.0.0)
- DomHelper.removeClasses() (v5.0.0)
- FieldFilterPicker.fields array form (v5.3.0)
- FieldFilterPickerGroup.fields array form (v5.3.0)
- LocaleManager.registerLocale() (v5.3.0)
- LocaleManager.extendLocale() (v5.3.0)
- NumberField.decimalPrecision (v3.1.0)
- NumberField.leadingZeroes (v3.1.0)
- PickerField.autoClose (v5.5.5)
- Breakpoint typedef (v5.0.0)
- Responsive.responsiveHeightChange event (v5.0.0)
- Responsive.responsiveWidthChange event (v5.0.0)
- Responsive.breakpoints config (v5.0.0)
- record param for the Store.move event (v4.1.4)
- Store.storeId (v3.0.0)
- Widget.showByPoint() (v5.0.2)
- The gridRowBeforeDragStart, gridRowDragStart, gridRowDrag, gridRowBeforeDropFinalize, gridRowDrop,
gridRowAbort events triggered directly on the RowReorder feature (v5.3.3)
- record param for the gridRowDrop event (v4.0.0)
- Grid.navigateLeft() argument (v5.2.1)
- Grid.navigateRight() argument (v5.2.1)
- Grid.navigateUp() argument (v5.2.1)
- Grid.navigateDown() argument (v5.2.1)
- Filter.isMulti (v5.6.0)
- Grid.selectionModel.rowCheckboxSelection (v5.3.3)
- PdfExport.enableDirectRendering (v5.2.0)
The Point utility class has a from() function that creates a Point from an Event. The coordinates for that Point are now in client space, not screen space
BREAKING The following default values were changed:
- Combo.clearTextOnSelection now defaults to true
- Column.alwaysClearCell now defaults to true
- Store.fireRemoveEventForMoveAction now defaults to false
- Grid.animateTreeNodeToggle now defaults to true
- RegionResize.animateCollapseExpand now defaults to true
BREAKING The following previously deprecated APIs were removed:
- Store.idField (v2.0.0)
- TextAreaPickerField.inline (v4.3.7)
- event argument of Grid.navigateUp/Down/Left/Right() (v5.2.1)
BREAKING The following menu item keys have been renamed:
- editFilter -> filterEdit
- disableFilter -> filterDisable
- removeFilter -> filterRemove
BREAKING The Grid.util.Location class has been renamed to Grid.util.GridLocation to not match the native Location class name
FilterBar feature now uses = operator by default when filtering in NumberColumn (previously used * operator)
Duration.toString(true) now uses a shorter representation without space ('5d', previous '5 d')
The CheckColumn minWidth config was changed to 30px
BREAKING The source event param in all RowReorder events have been changed to the Grid instance to conform with how other events are fired

STYLING CHANGES

The Stockholm theme got some slight tweaks to panel header (removed bottom border) and tab panel styling (replaced active tab background with thick bottom border) for a more modern look (8440)
New ui for Panel called plain which uses a single background color for the panel and no border/background for header or toolbars
MessageDialog now uses the new plain rendition
The b-grid-empty CSS class is now added to the root Grid element when there are no rows (previously this CSS class was put on the body container element)

LOCALE UPDATES

New locale key for the LockRows feature, unlockRow

DEMOS

VUE-3-VITE New demo showing how to use FieldFilterPickerGroup to filter a Grid store, synchronized with the Grid Filter feature. The demo is located in frameworks/vue-3-vite/fieldfilters folder (8836)
columns demo has be updated to show how to add, remove, rename, rearrange and resize columns (9214)
New nested-grid-with-chart demo showing how to embed custom widgets such as a 3rd party charting library
New drag-between-grids demo showing how to drag rows between different Grid instances
New drag-between-trees demo showing how to drag rows between different TreeGrid instances
New grid-taskboard demo showing how to combine the Grid and TaskBoard widgets

BUG FIXES

4933 – Toggleable button loses state when moved to toolbar overflow menu
5074 – HIGH PRIO Returning undefined from column renderer produces unexpected content
6441 – Instance config values should not be overridden by responsive configs
6854 – Pressed state lost as button in ButtonGroup enters an overflow menu
7760 – HIGH PRIO TypeScript Type intersection with any might be wrong
7826 – FilterBar Combo field icons missing padding
7827 – Misalignment when using FilterBar with compactMode for non-left aligned columns
8171 – FieldFilterPickerGroup config limitToProperty should also apply to configured filters
8329 – HIGH PRIO PDF generated using Gantt Print Feature showing duplicate tasks
8409 – Crash when selecting date in DateRangeField with null value
8459 – HIGH PRIO Carousel should support swipe gesture scrolling for mobile/touch
8463 – Widgets in overflow menu fire events twice
8510 – Should be possible to add FilterBar only for an individual column
8513 – Example Code editor does not destroy old example widgets when new code is evaluated
8523 – SlideToggle inside overflow menu triggers 2 change events
8559 – DurationField not working with FilterBar
8569 – LockRows feature should leave the store unchanged
8580 – Event disappears if dropped on locked row
8582 – Locked row styling tweaks
8586 – HIGH PRIO Records disappeared on "Add" button click and quickly scroll to bottom and top
8589 – Cutting from locked rows and pasting to normal rows doesn’t paste to the normal rows and vice versa
8604 – Code editor should have dark splitter in dark theme
8605 – Crash when adding ?code=1 to example URL to show editor initially
8612 – Code panel collapse animation reveals vertical placeholder at the end of the animation
8613 – Duplicate row numbers when using LockRows + RowNumber column
8614 – LockRows feature does a full render before setting up locking
8615 – Cell widths out of sync with locked rows + autoWidth columns
8616 – Lock rows feature will trigger a filter after every change to the data
8621 – Nested grid with chart demo: Outer grid not updated when editing inner grid data
8698 – Panel header changes size when collapsing / expanding panel in Stockholm theme
8813 – HIGH PRIO Toolbar items lose their value when moved into toolbar overflow menu
9058 – LockRows feature does not support Group feature
9066 – CellEdit not compatible with LockRows
9080 – LockRows not compatible with checkbox selection
9085 – REACT 6.0.0-alpha-3 thin packages "Can't resolve 'vs/editor/editor.main'" error on build
9101 – Crash in lock-rows demo when using "Fix by color" field
9103 – Nested-grid-with-chart demo not updating nested grid when outer grid changes
9105 – Grid Infinite Scroll demo crash on applying filter
9108 – No option to enter value for a filter in Infinite Scroll Demo
9138 – LockRows not compatible with remote data
9284 – Checkbox‘s overflow twin lacks text
9318 – Item cannot be dropped last in drag between grids demo
9320 – Group header menu should not show option to lock/unlock the row
9333 – Grid drag-between-trees demo throws when dragging to empty TreeGrid
9334 – Grid drag-between-grid demo shows wrong drop position when dragging to empty Grid
9369 – TreeGroup on name and using parentRenderer resulting in crash
9419 – Column lines showing on header when columnLines is set to false
9444 – MessageDialog prompt is not setting value for textField

FRAMEWORK SUPPORT

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

Filter feature column header tooltips now display localized text for active filter operators, e.g. equals instead of = (9338)
ACCESSIBILITY ActionColumn actions now support ariaLabel attribute to add a descriptive text for screenreaders (9377)
Added documentation for two new Grid events: horizontalScroll and horizontalScrollEnd (5064)

API CHANGES

ContextMenus no longer call event.preventDefault() if there are no items to show (meaning native context menu will be shown). To prevent native menus from showing, please use the new preventNativeMenu config option
Column grid property is now public (9409)

DEMOS

VUE-3-NUXT "Basic" (NUXT) demo shows using Grid component in NUXT. The demo is located in frameworks/vue-3-nuxt/basic folder (9200)

BUG FIXES

9369 – TreeGroup on name and using parentRenderer resulting in crash
9375 – Grid navigation fails when no cell is focused
9376 – Activate button in Action Column with Spacebar
9384 – Cell menu disabled when Grid is readOnly
9390 – HIGH PRIO Buttons in grid WidgetColumn cells cannot be invoked using keyboard

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

The refreshRows() method available on Grid now optionally accepts an array of records, to only refresh the corresponding rows (9179)
New events beforeExcelExport and beforeCSVExport are added, which will be triggered before Excel and CSV export respectively (8511)

API CHANGES

Combo dropdowns now auto width around visible content, but match at least the width of the Combo’s input area (9252)
VUE REACT When using wrappers for Vue or React, syncDataOnLoad is by default set to true on all stores configured on the wrapped Widget. Starting from 5.6.12, stores with a configured readUrl will have their syncDataOnLoad default to null

BUG FIXES

8762 – TypeScript incorrect declaration of GridConfig comparing to the docs
8890 – Nested relation field does not call custom setter for field
8955 – fillHandleBeforeDragFinalize params from and to not correct when dragging from bottom to top cell
9065 – HIGH PRIO Copy/paste keyboard shortcuts do not work with Salesforce Locker
9111 – CellEdit throws exception when autocompleting field in Safari
9235 – Grid row reorder proxy does not stay in view when triggering side scrolling
9246 – HIGH PRIO id field on model is not persistent anymore
9248 – RowReorder showGrip interferes with rendering of group headers
9253 – Accessibility Editing not started when pressing Enter on cells in a PercentColumn
9254 – First added tab to a TabPanel does not initially get the b-active rendition
9257 – Accessibility aria-readonly attribute should be set on readOnly row cells
9263 – Unable to use "is one of" operator in Grid filter feature when using AjaxStore and filterParam
9273 – Tree Grouping support for rounding values when tree-grouping NumberColumn
9343 – HIGH PRIO Crash on restoring grid state when a column has autoWidth configured
9362 – Summary row disappears after moving column with empty data store

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

A new static boolean property, Widget.accessibility was added, which, when set to true causes tooltips to be activated on focus in addition to mouseover (5539)
Vanilla JavaScript documentation has a new section on Multiple Products, showing how to use multiple components in a single page using thin components (8756)
You can now configure enableRecurringEvents with a defaultAction parameter, to always choose a predefined action, single to always only process the selected event, or future to change all future events (7606)
AjaxStore has a new config called includeChildrenInRemoveRequest, that controls if a remove request includes the id of a removed parent and all its children, or just the id of the removed parent (8099)
Column now supports configuring its ariaLabel and cellAriaLabel DOM attributes

API CHANGES

Added HTML encoding strings displayed by various widgets such as FilePicker tooltip, Slider, Tooltip and others.
You can now prevent a SubGrid from being fully expanded by providing a maxWidth to it in the subGridConfigs object. This will also automatically hide the expand button inside the Grid splitter (8775)
After a docs regression, several APIs flagged to be hidden in subclasses were still visible in the docs. These APIs are now correctly hidden (9140)

BUG FIXES

8148 – HIGH PRIO State is not saving in grouped column headers when reordering child to another group
8319 – HIGH PRIO Grouping rows should not have Stripe color
9011 – VUE-3 Filter field is not editable once filtered when data is loaded using AjaxStore.readUrl
9050 – Menu detached from submenu after hiding column
9057 – DOCS FieldFilterPicker docs inline example doesn’t apply filter at initial startup
9064 – VULNERABILITY Fixed a bug regarding menu item texts not being HTML-encoded
9075 – Error when hiding/showing a combo type column filter
9091 – Grid Column ignores field’s set value when field is localized
9106 – Autocomplete icon in FilterBar in Safari
9109 – Nbr items empty in master-detail demo
9126 – headerRenderer is not taken into account while exporting data into Excel file
9137 – Popup focus should go to descendant widget instead of maximizable
9146 – HIGH PRIO Incorrectly generated snippets for on-owner events
9160 – hasChanges should always return a boolean value
9170 – clearChildren does not convert parent to leaf when convertEmptyParentToLeaf is enabled
9172 – Crash when pressing F3 with QuickFind enabled
9197 – Crash when using TreeGroup with hidden column
9199 – Nested grid demo crashes when grouped
9210 – TreeGroup node toggle fails when a group field is an array

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

CalendarPanel (and its subclass DatePicker) may now be configured with a nonWorkingDays object, which is separate from weekend days while weekend days continue to exist in their fixed position (8914)
Store has a new hasChanges property, it is cheaper than changes to use if you only need to know if there are changes or not
AjaxStore has a new paramsInBody config that allows sending parameters in the request body instead of the URL query string (4058)
Model (=records) has a new getUnmodified() function that returns the unmodified value of a field (9029)

BUG FIXES

7860 – Allow specifying custom default operator by data type for Grid filter feature
8725 – HIGH PRIO TreeGroup ID collision when multiple groups are applied and column with array data is at the top
8751 – HIGH PRIO Not possible to increase the width of the last column
8896 – DOCS Beef up docs about not supporting non-standard operators
8910 – filterFn does not work with onChange in FilterField config
8926 – DEMO Crash when dragging equipment using touch gesture
8947 – Empty treegrid demo
8959 – Floating widget doesn’t realign if target transitions
8965 – HIGH PRIO Toolbar overflow synced excessively
8984 – Filtering crashes when combo widget column has a value
8992 – ANGULAR implement support of ViewEncapsulation.ShadowDom
8993 – The anchor gap between an aligned, anchored widget and its target allows a mouseout to be fired
9035 – Crash when pressing Cancel button in Excel import demo

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

The MergeCells feature has a new shouldMerge hook that can be implemented in an app to control which cells should be included in a detected range (8724)
Records that relates to other records with the use of the Model class’s static relations config can now propagate their changes to the related records stores. This is useful if you have multiple widgets that you want to refresh when a related record changes. For example, showing row details in a nested grid using the RowExpander. See this in action in the Nested grids demo. The new behaviour is opt-in, you need to set the new propagateRecordChanges property on the RelationConfig object (8671)
The FillHandle feature will now draw the fill handle in the bottom right corner even when the cell selection ends on the last column (8826)

LOCALE UPDATES

Added Brazilian Portuguese translation ('PtBr') (8747)

DEMOS

VUE-3-VITE New "Summary" demo (Vue 3 + Vite) shows the Summary feature. The demo is located in frameworks/vue-3-vite/summary folder (8385)
ANGULAR New "Summary" demo (Angular) shows the Summary feature. The demo is located in frameworks/angular/summary folder (8386)
REACT-VITE New "Paged grid with mocked Ajax" demo (React + Vite) shows that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax. The demo is located in frameworks/react-vite/paged folder (8662)
VUE-3-VITE New "Paged grid with mocked Ajax" demo (Vue 3 + Vite) shows that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax. The demo is located in frameworks/vue-3-vite/paged folder (8663)
ANGULAR New "Paged grid with mocked Ajax" demo (Angular) shows that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax. The demo is located in frameworks/angular/paged folder (8664)
VUE-3-VITE New "Scaling" demo (Vue 3 + Vite) shows how setting the font-size affects the size of the grid and widgets. Made possible since grid is styled using ’em’ for sizes. The demo is located in frameworks/vue-3-vite/scaling folder (8413)
ANGULAR New "Scaling" demo (Angular) shows how setting the font-size affects the size of the grid and widgets. Made possible since grid is styled using ’em’ for sizes. The demo is located in frameworks/angular/scaling folder (8414)

BUG FIXES

6646 – State of columns is not restored for columns w/o ids
7267 – Request for improved API for custom cell editors
7662 – Resizing a solitary flex Column with maxWidth does not work
8519 – HIGH PRIO VUE 3 Repeated cell content on grid scrolling with Vue renderers 8519
8652 – LWC Selection breaks when click outside Grid
8672 – TypeScript Bbar and Tbar type error
8700 – Cannot set value manually for widget column fields
8748 – Cannot disable or hide file picker badge (now doable with showBadge config)
8759 – TOUCH Pressing enter in cell editor does not move editor to the next cell
8761 – Popup positioning incorrect when maximized with centered and maximizable
8791 – Nested grid should have exposed relation property on its records
8807 – dragSelect does not work in Salesforce
8808 – Model.clearChanges() doesn’t update the UI
8815 – DateTimeField editor on Column throws an error on start editing
8821 – Grid columns not scrolling into view when using keyboard navigation on column header
8823 – HIGH PRIO The RowNumberColumn documentation does not display the description of configs
8824 – DOCS Class disappears after hiding public members
8840 – List "Select all" text not localized dynamically
8846 – HIGH PRIO Vue-3 Crash when filtering in column header with config vue: true on column
8856 – Action OnClick not working when using svg + path
8867 – The rowexpander-regions demo shows linked records generated ids
8875 – DateHelper startOf week method does not return correct output for Sunday
8880 – Modal masks for multiple popups are not working
8912 – isPaged property on AjaxStore should be boolean
8946 – Broken layout in Tree Grid Demo in Vue3 + Vite

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

The List class now has a title property, which shows a title above the first item (8714)
The Print feature now prints background colors without users having to check the "Background graphics" option in the print dialog (8716)

BUG FIXES

7297 – Not navigable to next month if selected date is next month
8547 – TypeScript Improve constructor declarations
8628 – HIGH PRIO Renderer of CheckColumn subclass does not have widgets param
8648 – HIGH PRIO Pressing delete in GroupBar causes crash
8694 – DatePicker should always navigate to the month of the selected date
8697 – Vertical misalignment of filter field check box

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

New expandToLevel method for Tree to expand the tree to an arbitrary depth (8390)
A warning message is now shown when autoHeight is enabled for Grid with 200+ rows (8068)
The scrollIntoView option in the grid selection API now accepts a BryntumScrollOptions object to describe how to scroll. To the start or end, animated or snap etc. (8631)

API CHANGES

The StateTrackingManager (STM) will by default (if autoRecord is true) merge update actions on the same record (in same transaction), keeping the oldest, and the newest values. A transaction will almost always only contain one update action per record. If the previous behaviour is desired, you can configure the StateTrackingManager with autoRecordMergeUpdateActions set to false. If you’re not using autoRecord, then the transaction action can be merged by calling the StateTrackingManager‘s new mergeTransactionUpdateActions function before the end of the transaction

BUG FIXES

6148 – Row reorder should not trigger when dragging sideways
7183 – Unexpected expansion of nodes when using search highlighting feature
8223 – HIGH PRIO Group header should stay in the left most grid region
8225 – HIGH PRIO isExport param is missing in Action column renderer params while exporting
8375 – Make pinch -> CTRL / mousewheel opt outable
8381 – Panel loses height immediately when collapsing code editor
8393 – HIGH PRIO Incorrect indentation for tasks with no children placed after a task with children in name
8395 – TYPESCRIPT DurationUnitDataField is missing from typings
8399 – TYPESCRIPT DOCS Add a type of column config to DataField
8423 – HIGH PRIO LWC Engine performance is too low with LWS enabled
8429 – HIGH PRIO CellMenu acts on wrong row when using selectOnKeyboardNavigation: false
8460 – Cannot read properties of null (reading ‘constrainTo’)
8465 – HIGH PRIO Printing letter in landscape mode does not fit page
8484 – Two widget columns with same widget type acts wrong on column hide/show
8490 – Filter menu misaligns on selecting a value from Filter combo
8495 – Removing a record while in TreeGrouped state does not remove it from the original store
8512 – Dynamic column configuration / reactive data
8520 – Grouping not refreshing when using tree grouping
8539 – Crash when toggling full screen
8541 – Checkbox column rendered incorrectly after removing filter
8551 – HIGH PRIO Column reorder by drag and drop issues when children columns defined
8552 – HIGH PRIO LWC tooltipRenderer cut custom tags in LWS
8553 – DOCS Combo record prop wrong docs
8557 – DOCS Event handlers are not searchable in docs
8584 – It is possible to hide all columns with no chance to show them

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

Subgrids now support animated expansion and collapse with regionResize: { animateCollapseExpand: true } (4183)
Grid now saves the collapsed state of groups in its default state saving mechanism (8103)
Docs browser now shows code snippets for all events in the Events section (8213)
Bumped built-in FontAwesome Free to version 6.5.1
All frameworks demo applications have been verified and updated to be compatible with Node.js 20
Grid emptyText now accepts a DomConfig object block (8253)
New syncSort option for chained stores, to always keep chained store data in the same order as the master store (8286)
Grid now fires rowMouseEnter, rowMouseLeave, cellMouseEnter, and cellMouseLeave events (7282)
All context menu features which extend ContextMenuBase now include s reference to that feature in their menuContext object which is passed to processItems and event handlers

API CHANGES

To boost record creation performance, records now cache their id (it is accessed very frequently, helps performance a bit) and join their store(s) in a more efficient way. As a side effect, a record no longer has a stores array prior to joining a store, previously it was there as an empty array from start. We don’t think this will affect any code, but wanted to share the change in case it does.

DEMOS

ANGULAR New "Filtering" demo (Angular) shows how the grid can be filtered (by filtering its store which reflects onto the grid). The demo is located in frameworks/angular/filtering folder (8109)
VUE-3-VITE New "Filtering" demo (Vue 3 + Vite) shows how the grid can be filtered (by filtering its store which reflects onto the grid). The demo is located in frameworks/vue-3-vite/filtering folder (8110)

BUG FIXES

3627 – Splitter issues on touch devices
6675 – Keyboard shortcut not triggering Collapse / Expand when tree column outputs a link
7469 – Wrong value of expanded when calling store toJSON method
7798 – HIGH PRIO REACT State Provider is not working
7836 – TYPESCRIPT Missing layout classes and config types
7847 – Undo not updating node to right position
8062 – Widget column’s menu is not opening consistently for some column
8170 – Strange background color when selecting multiple rows
8198 – DurationField does not show error tooltip when inputting invalid data
8200 – Webpack build failed with .min.css file
8227 – Should not set region when column is moved inside a parent column
8229 – HIGH PRIO VUE Auto-size column doesn’t work for Vue renderer
8230 – Cell and header menu demo returns valid message when clicked
8239 – ContextMenus aligned below click point instead of to the side
8245 – HIGH PRIO ENTER key not working inside Fiddles in docs
8249 – Group menu position issue
8266 – namedItems improvements and add onAction for menu items
8269 – HIGH PRIO Issue with appending child to a collapsed parent in a filtered tree store
8281 – Updated task not appearing when it now matches filter after adding dependency
8298 – HIGH PRIO Filter feature is not working for nested columns
8303 – Grid cell menu with string namedItems not working
8311 – validateOnInput config not being respected when using DateField
8321 – HIGH PRIO TreeGrid node duplication on collapse/expand in Docs
8362 – Menu is always displayed in the top left corner
8373 – Cannot read properties of undefined (reading 'button')

FRAMEWORK SUPPORT

NodeJS: >= 14.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

It is now possible to show the CellMenu programmatically, via the new showMenuFor method. See the docs and updated contextmenu demo for more information (4827)

API CHANGES

TypeScript element parameter for ElementListenerConfig typedef and EventHelper.addListener method has been changed to EventTarget type (8139)
Point.from() method will return a point relative to the page coordinates instead of screen coordinates as of v6.0

DEMOS

ANGULAR New Master detail demo (Angular) shows a multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature. The demo is located in frameworks/angular/master-detail folder (8108)
REACT + VITE New Master detail demo (React + Vite) shows a multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature. The demo is located in frameworks/react-vite/master-detail folder (8107)
VUE 3 + VITE New Master detail demo (Vue 3 + Vite) shows a multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature. The demo is located in frameworks/react-vite/master-detail folder

BUG FIXES

2159 – ActionColumn actions renderer and tooltip fails when specified as functions and record argument is used
4009 – Store allRecords getter does not return all records when filtered and grouped
7403 – Make a guide on how to make a theme selector in frameworks
7964 – REACT JSX doesn’t work in Popups
8012 – ActionColumn‘s onClick handler should have link in owner Grid instance in its params
8116 – Disabled checkboxes can be selected with keyboard shortcut
8123 – WidgetColumn leaks widgets and recreates new ones on column hide/show
8129 – KeyMap should pass event and owning Widget to handlers
8130 – Grid is missing a headerClick event
8146 – Error when set percentage width in column
8147 – Tree toggles nodes on pointerup instead of click
8154 – Firefox Vertical scrolling in docs tree not working with trackpad
8165 – Row selection not updated during ScrollManager auto scroll
8175 – Error on tab press after clicking column header with FilterBar feature
8179 – ascending config not working in Group feature
8191 – PickerField with autoExpand : true does not show picker when clicking trigger icon

FRAMEWORK SUPPORT

TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

API CHANGES

DEPRECATED The DomHelper.focusWithoutScrolling method is deprecated because the native focus method now supports the preventScroll option on all platforms.

DEMOS

ANGULAR Added new "Tree Grid" Angular demo which is located in the "examples/frameworks/angular/tree" folder
REACT + VITE Added new "Tree Grid" React + Vite demo which is located in the "examples/frameworks/react-vite/tree" folder
VUE 3 + VITE Added new "Tree Grid" Vue 3 + Vite demo which is located in the "examples/frameworks/vue-3-vite/tree" folder

BUG FIXES

6224 – Add event for ColumnResize to catch user resize action
7884 – pdfExport.exportDialog.bbar buttons config doesn’t propagate
7919 – Improve CellEdit validation docs
8028 – Store min/max functions returning inconsistent values
8040 – Gantt doesn’t immediately display remotely appended rows when using { overscroll : true }
8047 – Animated tree node collapse causes crash in docs
8072 – DOCS Update documentation of beforeClose event return from Popup
8081 – Missing TreeGrid component in Angular / React / Vue packages
8085 – LWC does not support W3C standard HTMLElement.replaceChildren

FRAMEWORK SUPPORT

TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

FEATURES / ENHANCEMENTS

The Toast class has a side config which may be specified as 'top' to show the toast at the top of the screen (7910)
FillHandle feature now fires a number of useful events while dragging which allows you to cancel the start, or the finalization of the flow. See FillHandle feature documentation for more information (7932)
FillHandle feature now also operates on leaf nodes in AggregationColumn
VUE-3-VITE New "Master detail" demo (VUE 3 + Vite) shows a multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature. The demo is located in frameworks/vue-3-vite/master-detail folder (7781)
REACT Documentation in "Quick start" and "Guide" is now updated with how to build React application in Vite for higher efficiency and better performance in development

API CHANGES

DEPRECATED Please kindly note that @bryntum/babel-preset-react-app and @bryntum/cra-template-typescript-grid, @bryntum/cra-template-javascript-grid packages will not get any updates after 6.0.0 version

BUG FIXES

1334 – Should be possible to delete a chip with backspace key
1335 – Typed text not removed after selecting value in multiselect combo
1966 – DOCS Copying code to the FiddlePanel code element in docs does not remove formatting
7681 – LWC Defects of floating widgets in a Bryntum Grid inside a lightning-modal
7888 – Dock start/end in footer configuration crashes the app
7912 – Reloading tree store data throws exception in Grid
7918 – Multi value grouping cannot use field path name into a StoreDataField
7923 – AjaxStore commit requests not always sent
7942 – Separator for combo box not working
7969 – Headers and cells misaligned when using showGrip
7976 – Content lost if setting showDirty while scrolled down
7977 – Should not enable cell replication for non-editable columns / cells
7982 – Widen splitter in all relevant splits on hover
7997 – The documentation of NumberFormat is wrong
7999 – Animated tree expands rows inserted at wrong index
8023 – Salesforce Toast doesn’t shown in Salesforce app
8036 – Copy to clipboard doesn’t work in some code blocks

FRAMEWORK SUPPORT

TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 2.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

Older versions

Full release version history can be found here.

Grid – Change Log

Version 7.0.1

API CHANGES

STYLING CHANGES

BUG FIXES

VERSIONS SUPPORT

Version 7.0.0

FEATURES / ENHANCEMENTS

API CHANGES

STYLING CHANGES

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.3.4

FEATURES / ENHANCEMENTS

API CHANGES

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.3.3

FEATURES / ENHANCEMENTS

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.3.2

FEATURES / ENHANCEMENTS

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.3.1

FEATURES / ENHANCEMENTS

VERSIONS SUPPORT

Version 6.3.0

FEATURES / ENHANCEMENTS

API CHANGES

LOCALE UPDATES

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.2.5

FEATURES / ENHANCEMENTS

STYLING CHANGES

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.2.4

FEATURES / ENHANCEMENTS

API CHANGES

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.2.3

FEATURES / ENHANCEMENTS

BUG FIXES

VERSIONS SUPPORT

Version 6.2.2

FEATURES / ENHANCEMENTS

STYLING CHANGES

BUG FIXES

VERSIONS SUPPORT

Version 6.2.1

FEATURES / ENHANCEMENTS

STYLING CHANGES

LOCALE UPDATES

BUG FIXES

VERSIONS SUPPORT

Version 6.2.0

FEATURES / ENHANCEMENTS

API CHANGES

STYLING CHANGES

LOCALE UPDATES

DEMOS

BUG FIXES

VERSIONS SUPPORT

Version 6.1.9

FEATURES / ENHANCEMENTS

BUG FIXES

VERSIONS SUPPORT

Version 6.1.8

FEATURES / ENHANCEMENTS