Grid – Change Log

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

FEATURES / ENHANCEMENTS

• New rowLines config added to toggle display of row lines in the Grid
• Added support for wrapping time when reaching min/max using steppers in the time picker (7580)
• REACT Docs and demos for custom column editors updated to show how to handle async setState() calls, to avoid loosing column editor values

BUG FIXES

• 7092 – Feature mixin on-owner events are not exposed on class
• 7887 – RowExpander with widget doesn’t work with Vite non-link CSS imports
• 7894 – Grid CellMenu does not show when clicking top border of a row
• 8213 – NumberFormatConfig typescript class is missing several configs due to docs issue in NumberFormat

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

• REACT New Cell Edit demo (React + Vite) showing how to use various grid cell editors. The demo is located in frameworks/react-vite/cell-edit folder
• REACT New Scaling demo (React + 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/react-vite/scaling folder
• Added support for filtering TimeColumns (7692)
• Added option to maintain scroll position during remote changes when the viewport is near the end of the scrollable range. Configure grid with preserveScroll : { overscroll : true } to opt-in to the new behavior (7759)
• Added support to programmatically refresh a Grid column header via the new refreshHeader and refreshHeaders methods (7843)

LOCALE UPDATES

• There is a new locale key selectATime : 'Select time' which may be used by FieldFilterPicker‘s time input

BUG FIXES

• 4911 – parentIndex is ignored with enabled transformFlatData
• 5719 – YARN Can not install @bryntum product packages using yarn v2/v3
• 7459 – Made pageSize a property
• 7471 – Overriding feature’s keyMap from Widget doesn’t work
• 7703 – NumberField limits typed input to minimumFractionDigits not maximumFractionDigits
• 7733 – Event cellMouseOut emits only once
• 7750 – Vite error @charset must precede all other statements
• 7752 – Print code throws trying to access stylesheet internals
• 7754 – Frameworks Thin packages not working with pnpm
• 7783 – Detached expanded row body when sorting with spanRegions
• 7791 – Salesforce RowExpander throws error when collapse the record
• 7802 – Collapsible columns not opening
• 7810 – Undo/redo with outdent error
• 7817 – Checkbox column remains groupable even when specifically set to false
• 7820 – globalThis should be defined in locales to support LWC
• 7833 – Select all checkbox not functional when all grid groups are collapsed
• 7834 – Error in TreeGroup with filters
• 7853 – Data unavailable when resourceStore groups in collapsed state

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

• This release introduces a new set of npm packages and framework components, that allows combining multiple Bryntum products in the same application. These packages contain the product specific code only, as opposed to the current packages that has all code for the products each product builds upon (for example Scheduler contains Grid & Core). The new packages are called thin packages, and moving forward it will be the recommended way of using Bryntum products in npm based applications (for all supported frameworks). See the "What’s new" guide for more information
• Grouping may now group by an array field, which means that one record can be a member of more than one group. Linked records are used when a record must appear more than once in a store (5185)
• The RowExpander feature now supports configuring different widget content for different regions (7035)
• New RowResize feature allowing user to drag bottom row border to change row height (2843)
• @bryntum/grid-thin bundle includes scss theme files in sass/themes folder (7445)
• The List widget now supports collapse / expand of groups (7405)
• Added preserveScroll config to Grid, preventing vertical viewport movement during remote changes (7353)
• TypeScript Functions and events declarations in typings were improved to contain all available parameters and return type (6961, 4456)
• ExcelExport feature now supports exporting to CSV file (5612)
• Added a Print feature based on PdfExport feature which allows using browser print dialog and not rely on backend (6218)
• The RowExpander feature has been improved with support for a single expanded element or widget that span over several Grid regions (7314)
• Grid has a new config animateTreeNodeToggle. When set to true, expanding and collapsing of tree nodes is animated
• Infer field types for auto fields when using FieldFilterPicker with store data present (7691)

API CHANGES

• BREAKING Core.util.helper.Point class has been moved to solve circular module dependencies. It is now a named export of the Core.util.helper.Rectangle module. Check upgrading guide for the details
• values API of the ExportDialog class is reverted to the default implementation in Container. If you have customized dialog fields you need to review your configuration. See upgrade guide for more details (5907)
• isMulti is now the default mode for the Grid Filter plugin. To configure the filter pickers inside the column filter editor popup, provide a GridFieldFilterPickerGroup configuration using the Filter feature’s pickerConfig config option. Configure legacyMode : true to use the previous UI instead (6685)
• DEPRECATED The Filter feature context menu items disableFilter, removeFilter, and editFilter will be renamed filterDisable, filterRemove, and filterEdit, respectively, in 6.0.0 If you are customizing the CellMenu to hide or replace any of these menu items, you will need to change their names accordingly
• Grid summary cells are now layed out using CSS grid layout instead of using a <table>. If custom renderers are used which rely on table layout, these will need updating

LOCALE UPDATES

• There is a new locale key selectValue : 'Select value' which is used by the FieldFilterPicker when creating filters on relation-type fields
• There is a new locale key for the Object class. 'None' is used to label group header rows which are for child records who’s group field value is an empty array

BUG FIXES

• 7493 – Multi group demo hangs when editing Skills
• 7494 – Grouping indicator not shown when grouped by Skills
• 7502 – Row resizing breaks row reordering
• 7503 – Non-filterable column has a Filter option in its context menu
• 7504 – Multi-group demo hints not showing in Firefox
• 7515 – RowExpander refreshOnRecordChange creates duplicate instances of widgets
• 7527 – Summary row obscures docked scrollbar
• 7546 – RowExpander getExpandedRecord crashes when called from expanded widget paint listener
• 7638 – Added hidden property to filterBar feature in docs
• 7646 – Facet filters do not apply on iOS
• 7648 – Export to CSV: blank space after each comma
• 7649 – Collapsing/Expanding rapidly a tree cell throws error
• 7654 – Records with no skills disappear in multi-grouping demo
• 7656 – Field filters grid example doesn’t render on iOS
• 7675 – Use polyfill for ResizeObserver in RowExpander for SalesForce non LWS support
• 7689 – Moving columns in a multi region grid with a state provider is broken
• 7695 – Print feature not printing correctly when changing the splitter position
• 7697 – Add filter in config for filterBar feature
• 7724 – Slider styling is wrong when placed on a Toolbar in Classic light theme

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

BUG FIXES

• 279 – ObjectHelper.isEqual fails if compared object has cyclic links
• 2024 – Slider tooltip should be configurable
• 7250 – Merge Cells feature has CSS bugs when resizing merged columns in rtl
• 7415 – transformFlatData loses tasks if child sorted before parent
• 7588 – Add "aria-pressed" only for toggle button and not all buttons
• 7611 – The rowCopyPaste feature doesn’t work with collapsed nodes
• 7620 – Headers and cells are misaligned in row reorder demo
• 7638 – Added hidden property to filterBar feature in docs
• 7641 – Bryntum Combo and Tag Combo empty text appearing null
• 7651 – showDirty indicator jumps to wrong cell during edit
• 7653 – Grid goes blank when scrolling to top record
• 7657 – Event cellMouseOver emits only once
• 7676 – Store should have changes if record’s StoreDataField has number type changes
• 7690 – Salesforce Error when open Grid in Firefox if LWS enabled
• 7694 – FilterBar removes typed text

FEATURES / ENHANCEMENTS

• Added preserveScroll config to Grid, preventing vertical viewport movement during remote changes (7353)
• FilterBar feature now can keep a column filter when the column is hidden, via the new clearStoreFiltersOnHide config (7568)

BUG FIXES

• 7374 – Split feature doesn’t work in REACT
• 7472 – TreeGrid with transformFlatData and custom idField no longer works
• 7518 – Scroll breaks if data filtered with preserveScrollOnDatasetChange enabled
• 7534 – Combo value not updated in the input is some cases
• 7547 – RowReorder feature not working inside nested grid
• 7554 – Missing field type in custom GridRowModel in lockedcolumnstree example
• 7560 – Pressing ENTER key on Cancel button in MessageDialog triggers OK click
• 7572 – SalesForce Combobox stops working after clicked clear in column filter
• 7581 – Undo does not work when reparenting to the top of the tree grid
• 7584 – Editing a related column does not refresh the UI
• 7593 – Selection checkbox stays checked if beforeSelectionChange returns false

FEATURES / ENHANCEMENTS

• The RegionResize feature now allows hiding splitter expand/collapse buttons by using the new showSplitterButtons property (6770)
• REACT New Facet Filtering demo (React + Vite) shows a filter panel that can filter to specific data values. The demo is located in frameworks/react-vite/facet-filter folder
• REACT New Filtering demo (React + Vite) shows how the grid can be filtered (by filtering its store which reflects onto the grid). The demo is located in frameworks/react-vite/filtering folder
• REACT New Summary demo (React + Vite) shows how to sum up selected rows. The demo is located in frameworks/react-vite/summary folder

BUG FIXES

• 7031 – Removing columns corrupts the events rendering
• 7076 – Scheduler zoomIn/zoomOut doesn’t keep center well
• 7368 – CellEdit‘s editor’s beforeCancel event returning false is ignored
• 7394 – RowExpander crash when filtering paged AjaxStore with syncDataOnLoad
• 7396 – TreeGroup bug with cell updates when custom renderer used
• 7402 – Setting '->' in toolbar giving error
• 7407 – Hiding a dynamically added column when splitting horizontally causes crash
• 7468 – allowedFieldNames not working with store.fields

BUG FIXES

• 7128 – Group icon not showing when sorting is disabled
• 7237 – Poor performance on very large grid selections
• 7330 – Resizing subgrids not working for more than 2 subgrids
• 7351 – findByField method does not pick up empty string
• 7382 – Slider cannot not be enabled after being disabled

FEATURES / ENHANCEMENTS

• RegionResize splitter dragging can now be disabled by configuring the feature´s enableDragging config to false (7271)

API CHANGES

• The 3rd argument of the Field‘s setError method made public, it marks error as "temporary" and it will be removed upon the next user interaction (5178).

BUG FIXES

• 3504 – Issue in DurationField setting units
• 3663 – Renderer for Check Column not called when exporting
• 6911 – Grid Weird behaviour when setting store.data with syncDataOnLoad & grouping on
• 7189 – LWC Combobox list closes when clicked on scroller
• 7245 – Disabling multiSort feature not working

This release is a replacement for the 5.4.3 patch release. It was changed to a minor version because of some larger changes behind the scenes to pave the way for future support for live updates in Scheduler Pro and Gantt.

FEATURES / ENHANCEMENTS

• VUE-3 New demo showing basic Vue 3 + Vite 4 setup. Demo is located in examples/frameworks/vue-3-vite/basic folder

BUG FIXES

• 7221 – VUE Vue vite app doesn’t compile with Bryntum vue wrappers
• 7225 – VULNERABILITY Searching html tag changes the value of searched cell

FEATURES / ENHANCEMENTS

• The function of Column.finalizeCellEdit config can now return an arbitrary string to indicate an error message of the failed validation (6845)
• The Split feature now relays listeners to all splits, and it also relays a (configurable) subset of the grid’s configs at runtime (7200, 7201)

BUG FIXES

• 6866 – Not possible to switch am/pm in time picker in mobile Safari
• 6939 – Merge Cells feature has CSS bugs when resizing merged columns
• 6985 – Applying a default/initial filter to resources in tree group doesn’t clear afterwards
• 6998 – LWC Column reorder does not work when state provider is used
• 7170 – Toggling features while split does not reflect on other splits
• 7202 – Column mistakenly added to vertical split

FEATURES / ENHANCEMENTS

• We have created a public repository to showcase Salesforce demos. All previous demos are merged into one Lightning Application which is easy to install to a new scratch org. You can find more information in updated guides and in this repository: https://github.com/bryntum/bryntum-salesforce-showcase#bryntum-salesforce-showcase
• We have created a public Salesforce org where this app is preinstalled. You can find link to it and login credentials on the updated examples page
• Added facet filtering demo showing how to filter by specific data values. Demo is located in examples/facet-filter folder
• Grid now fires splitterDragStart and splitterDragEnd events when resizing a SubGrid using the splitter (7121)

BUG FIXES

• 6077 – TypeScript Model constructors should allow second param
• 6987 – REACT React component is not rendered correctly on expand / collapse
• 7103 – SlideToggle in grid should animate when toggled manually
• 7115 – TreeCombo triggers an error when passing empty default value array
• 7128 – Group icon not showing when sorting is disabled
• 7134 – Select all is not working when the grid contains group summaries
• 7139 – Reordering to the selected row crashes
• 7142 – Non existing import path within GroupBar scss file

FEATURES / ENHANCEMENTS

• The RowCopyPaste feature has been enhanced to use a page-global internal clipboard and also supports the browser’s native Clipboard API if accessible. This means that it is possible to copy and paste row between multiple instances of Grid or Grid-based components. It is also possible to copy a row and paste it inside a Spreadsheet app like Excel
• Two new widgets for editing colors has been added in this release. Firstly, there is the ColorPicker, which lets the user select from a range of pre-defined colors. It is not built for stand-alone usage, but meant to be used in a Menu or as a picker for a PickerField. There is also the ColorField which can be used as a normal form field to display and edit a color value. It uses the ColorPicker as its color picker (2939)
• A new column, ColorColumn, has also been added. It renders a colored element which the user can click and select a new color from the ColorPicker's pre-defined range of colors
• The RowExpander now supports rendering widgets inside the expanded row. This makes it possible to expand a row and show more details in a nested grid. Two new demos has been added to demonstrate this – Master-detail and Nested grids (3591)
• Columns can now display data in related records (defined using the relation system) using a . in the field name, for example team.name (6639)
• On a similar note, columns can now also display (and allow editing of) nested data using a . in the field name, for example address.city when given record.data = { address : { city : 'Stockholm' } }. Define the top level field (address) on your Model with type: 'object' to wire it up correctly
• Widget has a new config, maximizeOnMobile which takes effect only on floating widgets on a mobile device. It causes the widget to be maximized instead of positioned in order to accommodate the mobile virtual keyboard. This will make event editing much easier to use on mobile devices (6522)
• On mobile devices, type : 'checkbox' is rendered as a slidetoggle widget. The API and value is the same, it is just a more appropriate UI for the platform
• Grid has a new Split feature, that allows splitting the grid into multiple parts (horizontally, vertically or both ways). Try it out in the new split demo (3917)
• The MergeCells feature now supports merging cells in any column, not only sorted columns. Opt in to the new behavior by configuring the feature with sortedOnly: false (5012, 6429)
• For a slightly better docs experience for most users, the docs browser now by default hides some more obscure APIs normally only used when implementing own widgets and features. Advanced users in need of these APIs can still opt in to see them using the Show menu in the docs browser
• Updated columntypes demo to show how to use a SlideToggle widget in a WidgetColumn (2256)
• Button now adds a type attribute specified by the Button´s behaviorType value (defaults to button). See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button for more info (7032)

API CHANGES

• The RowCopyPaste feature’s copyRows and pasteRows has been made asynchronous due to the enhancements mentioned above
• The RowCopyPaste feature’s beforeCopy and beforePaste events are now asynchronously preventable
• The CellCopyPaste feature’s beforeCopy and beforePaste events are now asynchronously preventable
• The underlying store created when using StoreDataField now defaults to using syncDataOnLoad : true. You can use the new store config to supply a custom configuration object used when creating the store

BUG FIXES

• 5943 – Undo/redo does not catch cut-pasting row
• 6884 – Detail row becomes empty after several sorting operations on the main column
• 6946 – Missing gap between filter fields
• 6947 – Grid split example issue
• 6955 – Grid localization example does not render on iPad Safari
• 6958 – Scheduler split demo throws an exception
• 7014 – Checkbox cell is not accessible with keyboard
• 7062 – Adding a column to a split Grid not reflected in splits
• 7080 – "No color" looks like white color and checkmark not updating
• 7081 – Child widgets with autoHeight stops collapse animation

API CHANGES

• A new config has been added to the RowExpander feature that re-activates the previous behaviour of scrolling the expanding row into view. The config is called autoScroll and defaults to false (7027)
• Grid now supports toggling hideHeaders and hideFooters during runtime to control visibility of header / footer
• Grid now supports configuring away its horizontal scrollbar using its new hideHorizontalScrollbar config

BUG FIXES

• 2002 – Sorters/filters are not refreshed up after changing store
• 5427 – parentId appears as a modification after undoing a delete
• 5507 – Undo action with STM not keeping the actions after deleting a node
• 6694 – beforeColumnDropFinalize event lacks information on where column is being placed
• 6924 – exportProgressMask does not change value on PDF Export
• 6962 – Demos use deprecated sum Boolean parameter in columns config
• 7021 – ViewPresetCombo not showing name from custom presets base
• 7039 – Crash when filtering and hide/show columns
• 7048 – YY year format shows only single digit
• 7054 – Possible to resize a region with regionResize disabled
• 7055 – Grid Column Header align right !== end in material theme
• 7060 – PERFORMANCE Prevent partnering header which is hidden
• 7070 – Filtering demo describes filterable example function incorrectly
• 7071 – columnDrag event payload insertBefore property is incorrect

FEATURES / ENHANCEMENTS

• A new config for the Sort feature, toggleOnHeaderClick makes it possible to specify that sorting should only occurs when clicking on the icon (6827)
• MenuItem item event now includes a domEvent param (6863)

BUG FIXES

• 5436 – Undo does not work when deleting selected children and parent
• 5494 – Collapsed/expanded state bug when using undo/redo on tree grid
• 5927 – Error when scrolling and then switching to collapsed tree structure
• 6673 – Bug when undoing a cut operation
• 6788 – Irregular behaviour with last locked column and hidden locked columns
• 6844 – Filter field not updated when replacing column with same id
• 6877 – LWC Cannot read properties of undefined (reading ‘host’)
• 6896 – Tree Grid search highlighting throws an error in lazy loaded implementation
• 6907 – Cell navigation with keyboard ignores visible column order
• 6912 – REACT Custom column editor lose value in React 18
• 6954 – Merged cell value is not displayed in classic-dark nor material theme
• 6969 – Grid TreeColumn text should be truncated when a column is too small
• 6976 – Not possible to control group row height when combined with GroupSummary feature
• 6996 – CellCopyPaste feature docs are misleading
• 7010 – Zoom level state not restored when timeline is collapsed
• 7025 – Combo should handle being destroyed in item/select/change listeners
• 7028 – Incorrect examples for fields config in FieldFilterPicker docs

FEATURES / ENHANCEMENTS

• Grid now fires new splitterExpandClick and splitterCollapseClick events which lets you prevent the default behavior when clicking the collapse/expand icons inside the grid splitter (6677)

BUG FIXES

• 6409 – Group feature should restore groupers when re-enabling
• 6704 – Inconsistent work of CheckColumn when selectAll enabled
• 6756 – LWC Grid does not render due to scrollBarWidth calculation
• 6760 – CellCopyPaste feature paste is off by number of hidden columns
• 6791 – Columns are not exported correctly if they exceed total grid row subgrid size
• 6799 – Grid throws when applying column state with non-existing region
• 6805 – includeInSubset creates duplicate records in the store
• 6807 – Splitter cannot resize neighbor widgets in react apps

FEATURES / ENHANCEMENTS

• Grid now fires a new columnDrag event which lets you mark a drop position as invalid (6634)
• Column widths and hide/show state are synced between partnered schedulers with identical column sets (6682)

API CHANGES

• In a group header row, the expand/collapse icon is now a separate element rather than a pseudo-element of the header cell

BUG FIXES

• 6384 – Inconsistent tool order in header of inline collapsed panel
• 6495 – ReorderFeature – gripOnly doesn’t work when first column is a checkbox column
• 6544 – Not possible to return a DOMConfig array in a TreeColumn renderer
• 6565 – Event trigger from widget button doesn’t go up to grid if bubbles enabled
• 6656 – Grouping beforeToggleGroup event should include the instigating UI event
• 6672 – Drag proxy misrendered in row reordering in Safari
• 6701 – IONIC Scrollbar width could not be determined under Ionic framework
• 6703 – Allow selecting text in row expander body
• 6715 – Grid cell unhovered when moving over inner element

FEATURES / ENHANCEMENTS

• Store now has a startGroupsCollapsed property meaning that all groups begin collapsed. (6642)

API CHANGES

• Checkbox selection column is no longer hideable by the user by default (can be toggled in code by setting hideable to true) (6650)

BUG FIXES

• 6267 – Persist expanded state when pasting tree nodes
• 6584 – Row select blinking on mobile after first select
• 6640 – LWC Context menu only opens once
• 6652 – Minified UMD bundle does not export bryntum namespace
• 6653 – Unhandled mouse event exceptions in Salesforce on Safari
• 6657 – Drag proxy misrendered in row reordering

FEATURES / ENHANCEMENTS

• The CellEdit feature’s autoEdit functionality now triggers a beforeCellRangeDelete event which by returning false, can prevent the deletion on multiple cell values. When only deleting a single value, the already existing beforeCellEditStart event is used as before
• ANGULAR Bryntum Grid now ships with two npm Angular wrapper packages to support different versions of Angular framework. Existing @bryntum/grid-angular package is now designed to work with Angular 12 and newer versions, which use the IVY rendering engine. New @bryntum/grid-angular-view package is designed to work with Angular 11 and older versions, which use the View Engine rendering. Check Upgrading and Angular integration guides in documentation for more information (6270)
• ANGULAR angular-9, angular-10 and angular-11 demos have been added to show use of @bryntum/grid-angular-view package with Angular 9, 10 and 11. Demos are located in subfolders inside examples/frameworks/angular/ folder
• ANGULAR angular-12, angular-13 and angular-14 demos have been added for Angular 12, 13 and 14. Demos are located in subfolders inside examples/frameworks/angular/ folder
• ANGULAR basic demo has been upgraded to use Angular 15. Demo is localed in located in examples/frameworks/angular/basic/ folder
• ANGULAR legacy angular-6, angular-7 and angular-8 demos has been removed

API CHANGES

• Removed skipRefresh argument from Grid’s toggleCollapse() function, since it was not working and there was no code to back it up
• DEPRECATED Events triggered by the RowReorder feature have been deprecated and now instead trigger on the owning Grid instance (all other features follow this pattern). Old events fired by RowReorder will be removed in 6.0 (6579)

BUG FIXES

• 5758 – Tree column autoHeight not working
• 6166 – createOnUnmatched only creates new record on Enter key press
• 6483 – Grid header alignment Issue when using 3+ levels headers
• 6524 – FillHandle feature does not work in Salesforce
• 6528 – TypeError r.ion is not a function
• 6533 – Datasync issue on remotely filtered and paged Store with syncDataOnLoad
• 6548 – Backspace key not working in cell editor with combo combo
• 6549 – Grid header misalignment when material theme used
• 6620 – Dynamically created SubGrid’s xScroller does not have a reference to the outer Y scroller

FEATURES / ENHANCEMENTS

• Grid’s ColumnStore now uses syncDataOnLoad : true (and it is not intended to be changed by apps), which improves performance for state changes when binding to <bryntum-grid columns=""> in frameworks (Partial fix 6340)
• The backends for the php and php-paging demos were updated to work with PHP 8

API CHANGES

• The docs for the Grid’s selectionChange and beforeSelectionChange events mistakenly showed that the deselected, selected and selection params included records or cells, when they only included records. That have been fixed, and we also added deselectedCells, selectedCells and cellSelection params to same events.
• Context menu items for copying and pasting rows (from the RowCopyPaste feature) are no longer combined with menu items for copying and pasting cells (from CellCopyPaste). To show both cell & row copy items in the same menu, enable the rowOptionsOnCellContextMenu config.

BUG FIXES

• 6058 – Widget’s showAnimation config not working properly
• 6120 – store.load() doesn’t work if TreeGroup feature used
• 6321 – Built-in DateField validation not working properly
• 6357 – Double entries of copy/paste
• 6358 – Hard to select row in advanced demo
• 6360 – selectedRecords need to include records from selected cells
• 6380 – Cannot drop into collapsed group if store is filtered
• 6392 – Tree Scheduler with initial filters on the resource store renders too early
• 6395 – Fixed angular production build of StateProvider helper classes
• 6428 – FullScreen.request method should move floatRoot into the fullscreened element
• 6433 – Escape key not working in example filter field
• 6443 – SubGrid hiding does not work properly
• 6447 – Filter feature column tooltips not working with array-valued relation filters
• 6478 – Grid Region still resizable when resizable is set to false
• 6484 – Invisible cells repainted with wrong data
• 6500 – Right click on Grid WebComponent throws an error
• 6507 – dropOnLeaf does not work properly on a scrolled page
• 6509 – Column readOnly should prevent editing

FEATURES / ENHANCEMENTS

• Tree store now applies filters/sorters to any new data when calling applyChangeset() (6155)

API CHANGES

• Removed obsolete config keepUncommittedChanges for chained stores. It did not affect chained store behavior
• expanded field was moved to Model class from GridRowModel
• Date parsing was made more forgiving in regard to character used to separate date parts. For example these strings are now all acceptable as HH:mm: 10:20, 10 20, 10-20, 10/20 (6344)

BUG FIXES

• 5325 – Multi-level sort with custom sorting fn not working
• 6086 – Checkbox columns are always unchecked
• 6229 – Exception when reconfiguring store on a grouped and filtered view
• 6282 – Checkbox missing right margin
• 6286 – Horizontal scroll resets when scrolling back up
• 6301 – Grouping is broken after record remove is cancelled
• 6312 – Splitter does not move after updating to 5.3.0
• 6314 – VUE Columns prop has wrong type in BryntumGrid wrapper component
• 6327 – Examples filter field clearing does not refresh example list
• 6328 – 'move' event oldParent should pass rootNode when moving a node from the rootNode
• 6331 – Prevent checkbox column to be scrolled out of view
• 6342 – Tooltip remains visible when moved by multiple rows across empty cells
• 6351 – Components do not render into containers not already in DOM
• 6355 – StateProviderConfig TypeScript missing listeners property
• 6365 – VUE3 Tree Grid Demo is buggy
• 6370 – Task editor closes when changing active tab programmatically
• 6386 – Wrong sorting when grouped by custom groupSortFn

FEATURES / ENHANCEMENTS

• The CSS with predefined colors for Button, Checkbox, Radio, SlideToggle & Toast was changed to reduce file sizes (cuts away ~15% of the size of Grid’s standalone CSS-bundles), while also making it easier for us to add more colors in the future
• The Grid’s selection functionality has been greatly improved as of this release. In addition to row and checkbox selection it now also supports cell selection, column selection and RowNumberColumn selection. The ability to select by dragging the pointer has also been added. All the selection settings are now fully changeable at runtime. For full details of the new selection functionality, please check out or new selection demo (497, 1915, 3123, 3334, 3970, 4628, 4932)
• The new FillHandle feature brings spreadsheet like fill functionality to the Grid. When enabled, a Grid selection range will get a fill handle along with a fill border. This handle can then be dragged over new cells in any direction. The cells being dragged over will be filled with values calculated from the original selection
• The CellEdit feature has been updated with support for editing multiple rows simultaneously. The multiEdit config is true by default. Simply select multiple rows, edit the last one and then hit Ctrl+Enter to apply the new value to all selected rows
• The new CellCopyPaste feature adds the ability to cut, copy and paste individual cell values or ranges of cell values
• Keyboard focused column headers now has same focus indicator as cells (4707)
• There is a new store field type (StoreDataField) which can be used for fields on records that holds arrays. The array will be converted to a store, manipulating the store will flag the record as modified. On serialization the store will be converted back to an array
• Selection in a Grid with a TreeStore has been improved by addition of the includeParents config. Set it to all or true to auto select a parent if all its children gets selected. If one gets deselected, the parent will also be deselected. Set it to some to select a parent if one of its children gets selected. The parent will be deselected if all its children gets deselected (5726)
• Localization demos updated to show up-to-date localization approach
• AjaxHelper.fetch now supports using request body to pass parameters for non-GET requests. Please check addQueryParamsToBody argument in the method documentation (2855)
• New TreeCombo widget added
• The model relation system, a data layer concept used internally to link a ResourceTimeRange to a Resource in Scheduler, was made public. It allows you to define one-to-many relations between models in a relations block when subclassing Model (3222)
• The CellCopyPaste feature can now repeat the copied pattern into a larger selection target. Copy one cell or a range of cells, then select a new range of cells and paste into that. If the selected range matches the copied pattern in size (n times bigger, must fit completely), all the selected cells will be filled with values (6003)
• Lots (but not all) of the not so informative object types in our TypeScript typings have been replaced with more specific types. Objects that in our JavaScript are used as maps are now declared as Record<keyType, valueType>, and for functions that accept object arguments many are replaced with anonymous type declarations, such as { foo: string, bar: number } (Partially fixed 5176)

API CHANGES

• DEPRECATED LocaleManager.registerLocale and LocaleManager.extendLocale are deprecated. LocaleHelper.publishLocale should be used instead.
• DEPRECATED With the introduction of cell selection, Grid’s selectionMode config no longer has the row setting. Instead, it is the default mode and can be omitted. Specifying cell : true will enable cell selection and disable row selection – both cannot be used at the same time.
• DEPRECATED The rowCheckboxSelection setting of Grid’s selectionMode config was renamed to checkboxOnly, to better indicate its purpose. The old name is still supported, but will be removed in a future release
• DEPRECATED The type of the fields config for GridFieldFilterPicker and GridFieldFilterPickerGroup widgets has changed from array of FieldOptions to Object map of FieldOptions keyed by field name. The array type is now deprecated. The fields supplied in this config (if any) will now be merged with fields found in the configured grid‘s columns, instead of overwriting them

LOCALE UPDATES

• Locales format and process for applying locales have been simplified
• New locales for 31 languages have been added. Currently available languages are listed in the localization guide (Guides/Customization/Localization)

BUG FIXES

• 3213 –Cmd/Ctrl + Right click weird behavior
• 3733 – selectedRecords are in wrong order after shift selection
• 4595 – Select all checkbox should not select filtered out records
• 5097 – Selected row gets deselected after page change with preserveSelectionOnPageChange: true
• 5844 – Selection styling not applied after clicking a cell
• 5863 – Cell drag does not work on spreadsheet demo on 5.3.0
• 5864 – Cut & Paste column does not work on column header
• 5865 – Wrong redo icon
• 5866 – Copy and paste buttons disabled when selecting row
• 5867 – Name column width too narrow
• 5992 – Checkbox column background color to bright in Classic-Dark theme
• 6054 – Not persisted field marked as dirty in the grid, but not persisted in modified data
• 6194 – Crash when editing started and grid scrolled quickly
• 6205 – Crash when ancestor node of active cell is collapsed
• 6207 – Treegrid cut operation optimization
• 6208 – Row should be selected when clicking outside a checkbox in a checkcolumn cell
• 6243 – reapplySortersOnAdd doesn’t work for tree store
• 6246 – Crash when pasting rows if one of the copied tasks is removed
• 6267 – Persist expanded state when pasting tree nodes

FEATURES / ENHANCEMENTS

• Search feature now supports not showing the hit index numbers (6124)

API CHANGES

• Recently browsers have added support for Unicode 15, which changes the output of Intl.DateTimeFormat when formatting time to include AM/PM. Those browsers now use "thin space" (\u202f) instead of regular space. This affects the DateHelper.format() function, but likely you do not need to take any action in your application. It also affects DateHelper.parse(), which has been updated to support the new unicode space (6193)

BUG FIXES

• 4586 – Cannot drag row to last position in online demo
• 5637 – Allow dropping to closed groups
• 6039 – Resource order not applied with syncDataOnLoad
• 6087 – Checkbox column state changed only on second click when its field is not defined in the Model
• 6088 – CellEdit feature throws if passed context points to non-existent record
• 6092 – Wrong type for FetchOptions
• 6100 – Row get deselected when click inside another row’s actionable cell
• 6102 – Changing the column position then setting back to the initial position makes oldValue undefined
• 6126 – Tree Grid Search doesn’t highlight cells after search function returns no results
• 6134 – Store ordering is broken after synchronizing changes
• 6144 – applyChangeset on a filtered store does not update the view
• 6169 – Filter feature should not show menu items for group headers and footers
• 6186 – Should be possible to get the previous parent in move event

FEATURES / ENHANCEMENTS

• New demo showing how to import Excel files into the grid (5984)

API CHANGES

• As of version 6.0, remove event will no longer be fired when moving a node in a tree store. To enable this behavior now (recommended), you can set a new fireRemoveEventForMoveAction on your tree store to false (5371)

BUG FIXES

• 5526 – Cannot open 2nd mask using static call
• 5860 – Docs UI is broken on a small window
• 5869 – Clicking checkbox column checkbox should not select/deselect
• 5967 – TreeColumn needs separate renderer docs
• 5970 – DragHelper is too eager stopping event propagation
• 6004 – RowReorder and rowCheckboxSelection mode improvements
• 6013 – Default 'sum' operation on aggregate columns does not sum decimal numbers
• 6014 – Button menu listeners get duplicated when changing the menu
• 6019 – TypeScript Feature classes and configs have on event handlers exposed on owner class
• 6023 – Group header counter is wrong when dropping rows from one group to another
• 6024 – Go to next/previous hit API does not work consistent
• 6045 – Missing localization "Expand" in RowExpander
• 6053 – Cut and paste within a tree crashes the grid
• 6069 – Params lost if defined in class config

BUG FIXES

• 5386 – Improved panel collapse animation when collapsed panel header is perpendicular to expanded
• 5804 – Material panel toolbar padding not symmetric
• 5884 – Grid doesn’t show fetched data after clearing filter
• 5893 – Row rendering breaks when collapsing groups
• 5895 – Groups disappear when changing grouped field value in a filtered view
• 5911 – FilterBar should not override data of filter field using chained store
• 5959 – Reordering a row selects it when rowCheckboxSelection: true

FEATURES / ENHANCEMENTS

• The updated tree demo shows using different Model classes for the rows (5888)
• Tree feature now supports expanding to multiple nodes (2287)
• Search feature now supports providing the "fields" to restrict the search to for performance (2294)

API CHANGES

• When using remote filtering for the AjaxStore, the date filter value is now always serialized in the local timezone. Previously (but undocumented) it was using the UTC timezone. The serialization format is YYYY-MM-DDThh:mm:ss.ms (5896)

BUG FIXES

• 5179 – Bad UX when typing into date field
• 5253 – Moved collapsed column doesn’t have red text when drop is prohibited
• 5774 – Reordering row is not possible to do in the last row
• 5876 – fitMode generates unexpected result for ActionColumn
• 5883 – Unexpected error with empty columns with specific configuration

FEATURES / ENHANCEMENTS

• REACT React wrapper now supports React components in widgets and tooltips (774)
• The RowCopyPaste feature will now paste copied or cut row(s) below selected or provided reference record. Previously the documentation stated that the copied or cut row(s) would be pasted above the reference record. However, the behaviour was inconsistent and cut-paste was done above while copy-paste was done below (4890)

BUG FIXES

• 5019 – Grid ExtJS Modern App integration demo fails on Cell click
• 5486 – Horizontal scrollbar overlaps when the view becomes smaller
• 5790 – Column headers should not show pointer cursor if not sortable
• 5805 – Visual bug with MergeCells in multipage export
• 5812 – Horizontal scroll not working when mergeCells feature is enabled
• 5830 – "No records to display" label is wrongly rendered
• 5838 – Combo clearable trigger doesn’t reset validation

FEATURES / ENHANCEMENTS

• TreeStore now supports indent and outdent operations (5547)
• RowCopyPaste feature supports copying rows in a tree. Copied records will have same hierarchy
• Paste after cut and copy behavior is unified, records are moved below the paste target
• Added field orderedParentIndex to resolve position of the child in the ordered children array (5353)
• Store now applies filters/sorters to any new data when calling applyChangeset() (5534)

API CHANGES

• DEPRECATED Currently, when returning undefined from a column renderer, the actual cell will not be updated. There is a new config on Grid.column.Column which controls this behaviour – alwaysClearCell. In 5.2.5 this will default to false giving the same behaviour as previously. But in 6.0, alwaysClearCell will default to true, requiring columns that relies on the previous behaviour to be configured with alwaysClearCell set to false

BUG FIXES

• 5128 – Check column with supplied field should be filterable and sortable
• 5267 – Copy action not copying child resources
• 5288 – Columns get displaced when we try to resize that column while editing
• 5521 – Column sorting in empty cell editor mode merge cell values
• 5572 – Using sort feature triggers autoLoad for AjaxStore
• 5635 – LWC event in filterOnInput reports wrong target
• 5646 – Selection column sometimes not draggable
• 5647 – Columns sometimes collapse when resizing
• 5674 – Combo not sized the same when editable vs non-editable
• 5688 – LWC Cannot add property isActive, object is not extensible
• 5692 – Combos should be able to share Stores
• 5698 – Examples text overlaps
• 5700 – FinalizeCellEdit launch multiple times when clicked outside of grid with non-resolved promise
• 5706 – syncDataOnLoad + threshold, scroll error
• 5730 – index is ignored when insert into filtered store
• 5732 – Combo should update value collection silently when replacing store
• 5778 – Dragging resources to the last row causes crash in group

FEATURES / ENHANCEMENTS

• We recently launched a new homepage over at bryntum.com, and have now slightly updated the styling for demos and docs to better match it (new logo, new header color, new font). Please note that this is not a change to our themes, only the look of the demos, and it won’t affect your application

BUG FIXES

• 5594 – Grid splitter collapse/expand hover artefacts
• 5595 – Fix panel collapse icon directions
• 5617 – Collapsing locked subgrid not working if minWidth is set
• 5620 – Sort & Filter icons not visible in grid column when there is not enough space and material theme is used

Older versions

• Full release version history can be found here.