Upgrade guides for Grid v6.0.0+
Grid v6.0.0
The default behaviour of the column renderer has changed
Previously, if a column defined renderer return undefined (or has no return statement) this will prevent the cell element content from being updated. This is useful if the cell element is mutated inside the renderer, which would otherwise be overwritten by the internal rendering later on.
Example of previous default behaviour:
new Grid({
columns : [{
renderer({ record, cellElement }) {
cellElement.appendChild(someElement);
return undefined; // The return statement can also be omitted
}
}]
});
In 6.0, the cell content is by default always updated after the renderer call. This means that there is no need for undefined checks like it was before.
const oldColumnConfig = { renderer : ({ record }) => record.myProperty ?? '' }
const newColumnConfig = { renderer : ({ record }) => record.myProperty }
For those cases when the cellElement content is directly manipulated inside the renderer simply set the alwaysClearCell to false on the column. This config has been available since 5.2.5 but as of 6.0 it defaults to true. Set alwaysClearCell to false on every column that relies on the previous default behaviour when updating to 6.0.
Example of new default behaviour:
new Grid({
columns : [{
alwaysClearCell : false,
renderer({ record, cellElement }) {
cellElement.appendChild(someElement);
return undefined; // The return statement can also be ommitted
}
}]
});
Field's highlightExternalChange default value
Field's highlightExternalChange default value is now false (previously true). If you want fields to highlight, you will need to explicitly set this config on your fields.
DateColumn now warns when not defining a proper DateDataField in the Model
When using a DateColumn your data model should define a matching field with the type set to date. As of 6.0, you will see a warning in the console, and you should take action to update your Model class field definition. The DateColumn will also update the existing field to be a DateDataField on the fly. See below for how to define your own custom model field.
class Person extends Model {
static fields = [
'name',
{ name : 'dateOfBirth', type : 'date' }
];
}
new Grid({
store : {
modelClass : Person
},
columns : [{
type : 'date',
field : 'dateOfBirth'
}]
});
keepDate config of the TimeField class now defaults to true
If you relied on this flag being false, you will now need to set it explicitly in your TimeFields
new TimeField({
keepDate : false
});
DomHelper.focusWithoutScrolling removed
DomHelper.focusWithoutScrolling was deprecated in v5.6.4 because the native Element focus method now supports the preventScroll option on all platforms.
DomHelper.focusWithoutScrolling(myElement);
Should be changed to
myElement.focus({ preventScroll : true });
New location for Core.util.helper.Point class
The Core.util.helper.Point class was moved in v5.6.0 to solve circular module dependencies. It is now a named (Point) export of the Core.util.helper.Rectangle module.
Changes are required if you are directly importing the class from sources:
Old code:
import Point from 'path-to-lib/Core/helper/util/Point.js';
New code:
import { Point } from 'path-to-lib/Core/helper/util/Rectangle.js';
Note: No changes required for importing from module or umd bundles.
Export dialog values API has changed
Earlier implementation of values API applied transformation to the field names: orientationField -> orientation. We rolled it back to default implementation used by Container and solved this task by providing a name field on every default widget. If you have added more widgets to the default dialog, check the values object of the dialog, you might need to configure name.
Filter feature changed to multi-filter by default
The Filter feature has changed to use the new FieldFilterPicker-based UI in its popup by default. (This mode was previously accessible using the isMulti flag, which is now removed.)
The feature's context menus have also changed. Now, when right-clicking a grid cell or column header, the filtering options are under a new Filter sub-menu. The available filter operators have also changed to match the ones available in the FieldFilterPicker for the column's data type.
To provide custom configuration for the GridFieldFilterPickerGroup used in the popup UI, pass the new pickerConfig config to the Filter feature.
To use the old UI instead, configure legacyMode : true on the Filter feature.
- Old feature configuration:
{
features : {
filter : true
}
}
- New feature configuration (to opt out of new UI and keep the old):
{
features : {
filter : {
legacyMode : true
}
}
}
The autoClose config of PickerField was removed
The autoClose config of PickerField controlled if the picker was hidden when the user clicks outside the picker. Setting it to false lead to a non-intuitive behavior, which we no longer support. The config was deprecated in v5.5.5 and has now been removed.
RowCopyPaste has been made asynchronous
The RowCopyPaste feature's copyRows and pasteRows was made asynchronous in V5.5.5. This makes the beforeCopy and beforePaste events asynchronously preventable and allows for native Clipboard API support.
If your code relies on a copy or paste action to complete, you will need to wait for the promise to be resolved.
Old code:
function copyPaste()
{
grid.copyRows();
doSomethingElse();
grid.pasteRows();
finishDoingSomethingElse();
}
New code:
async function copyPaste()
{
await grid.copyRows();
doSomethingElse();
await grid.pasteRows();
finishDoingSomethingElse();
}
…or…
function copyPaste()
{
return grid.copyRows().then(() => {
doSomethingElse();
grid.pasteRows().then(() => {
finishDoingSomethingElse();
return true;
});
});
}
RowExpander feature auto scrolling now defaults to false
Previously, when expanding a row and the expanded body element was not completely in view, the RowExpander feature would scroll that element into view automatically. Since v5.3.8, this behaviour will need to be activated by setting the autoScroll config on the RowExpander feature to true.
Sort feature now creates sorting icon element in header cell.
The CSS to create and show the arrow icon to indicate sort direction is since v5.3.7 a :before pseudo element of a child element of the header text element. There is now an addressable .b-sort-icon node inside the cell which may be targeted by application CSS.
In previous versions, the arrow icon was a :before pseudo element of the header text element and not addressable by application code or CSS.
RowReorder events fired on the Grid instance
Prior to v5.3.3 they were fired on the RowReorder feature instance. Now they are fired on the Grid instance.
Old code:
const grid = new Grid({
appendTo : 'container',
features : {
rowReorder : {
showGrip : true,
listeners : {
gridRowBeforeDropFinalize : async({ context }) => {
if (grid.widgetMap.confirmationButton.checked) {
const result = await MessageDialog.confirm({
title : 'Please confirm',
message : 'Did you want the row here?'
});
// Return true to accept the drop or false to reject it
return result === MessageDialog.yesButton;
}
}
}
}
}
})
New code:
const grid = new Grid({
appendTo : 'container',
features : {
rowReorder : {
showGrip : true
}
},
listeners : {
gridRowBeforeDropFinalize : async({ context }) => {
if (grid.widgetMap.confirmationButton.checked) {
const result = await MessageDialog.confirm({
title : 'Please confirm',
message : 'Did you want the row here?'
});
// Return true to accept the drop or false to reject it
return result === MessageDialog.yesButton;
}
}
}
})
Angular View Engine wrappers for Angular 11 and older versions
In v5.3.3 a new @bryntum/grid-angular-view package designed to work with Angular 11 and older versions was added, which use the View Engine for rendering. If you are using one of the legacy Angular versions, please follow these steps to use the package:
Install the package using npm:
npm install @bryntum/grid-angular-view@6.0.0
Import the component in your Angular application:
import { BryntumGridComponent } from '@bryntum/grid-angular-view';
Do not forget to remove previously used @bryntum/grid-angular package which requires Angular 12 or newer version.
Please check Angular integration guide for additional information.
Button, Checkbox, Radio, SlideToggle & Toast CSS changes
The CSS for these widgets was changed in v5.3.0 - instead of letting SASS generate CSS for the built-in color variations it now uses internal CSS variables.
The upside of this change is that it removes thousands of lines of CSS, while also making it easier for us to add more colors in the future.
We don't expect it to affect the styling of existing applications much, but if your application use custom styling for these widgets you might need to adjust the specificity of some selectors.
With the change, the following SCSS variables are no longer used and was removed:
$button-hover-lightness$button-pressed-lightness$button-active-lightness$button-pressed-hover-lightness$button-active-hover-lightness$button-pressed-active-lightness$button-pressed-active-hover-lightness$checkbox-checked-box-color$checkbox-checked-box-background-color$checkbox-checked-box-border-color$radio-background-color$radio-border-color$radio-dot-color$radio-checked-dot-color$radio-checked-border-color$radio-checked-background-color$radio-disabled-background-color$radio-disabled-border-color
There is not a 1-1 mapping to anything in the updated CSS, therefor if you are using any of these SCSS variables we recommend checking the corresponding CSS files to figure out what to use instead (see button.scss, checkbox.scss, radio.scss). Or post a question on the forum.
Localization update
LocaleManager.registerLocale was deprecated in 5.3.0 and has now been removed. LocaleHelper.publishLocale should be used instead.
Old code:
LocaleManager.registerLocale('Es', {
desc : 'Spanish', locale : {
localeName : 'Es',
localeDesc : 'Spanish',
locale : {
/* localization */
}
}
});
New code:
LocaleHelper.publishLocale({
localeName : 'Es',
localeDesc : 'Spanish',
localeCode : 'es',
/* localization */
});
LocaleManager.extendLocale was deprecated in 5.3.0 and has now been removed. LocaleManager.applyLocale should be used instead.
Old code:
LocaleManager.extendLocale('Es', {
desc : 'Spanish', locale : {
locale : {
/* localization */
}
}
});
New code:
LocaleManager.applyLocale({
localeName : 'Es',
localeDesc : 'Spanish',
localeCode : 'es',
/* localization */
});
Check our localization guide for the details.
Grid selectionMode changes
With the introduction of cell selection, Grid's selectionMode config since v5.3.0 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.
While you don't actually have to change your code, the row setting no longer has any effect and can be removed:
Old code:
new Grid({
selectionMode : {
row : false,
cell : true
}
});
New code:
new Grid({
selectionMode : {
cell : true
}
});
The rowCheckboxSelection setting of Grid's selectionMode config was in the same version renamed to checkboxOnly, to better indicate its purpose. Please update your code accordingly:
Old code:
new Grid({
selectionMode : {
rowCheckboxSelection : true
}
});
New code:
new Grid({
selectionMode : {
checkboxOnly : true
}
});
Deprecated menuContext.event
The event property available on the menuContext property of context menu features has been deprecated in favor of the domEvent property, to reduce risk of confusion with a Bryntum event object or an event record in Scheduler. If you are using it, please change your code to use domEvent instead.
Old code:
console.log(grid.features.cellMenu.menuContext.event);
New code:
console.log(grid.features.cellMenu.menuContext.domEvent);
GridFieldFilterPicker fields configuration type change
The type of the fields config for GridFieldFilterPicker and GridFieldFilterPickerGroup widgets was in v5.3.0 changed from array of FieldOptions to Object map of FieldOptions keyed by field name. The array type is now removed. 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.
Old code:
new GridFieldFilterPickerGroup({
fields : [{
name : 'myStringField',
type : 'string'
}, {
name : 'myNumberField',
type : 'number',
title : 'MyNumber'
}]
});
New code:
new GridFieldFilterPickerGroup({
fields : {
myStringField : {
type : 'string'
},
myNumberField : {
type : 'number',
title : 'MyNumber'
}
}
});
Grid v5.2.0
The behaviour of the store.data getter was changed
Prior to v5.2.0, it returned the initial raw dataset. For example:
const store = new Store({
data : [
{ id : 1, name : 'Foo' },
{ id : 2, name : 'Bar' }
]
});
store.first.name = 'Baz';
store.last.remove();
// store.data returns the initial data
console.log(store.data); // [{ id : 1, name : 'Foo' }, { id : 2, name : 'Bar' }]
In now has the more expected behaviour of returning the data objects for the current state instead. The example above would instead log:
// [{ id : 1, name : 'Baz' }]
Deprecated DomHelper.up()
The DomHelper.up() function was deprecated in v5.2.0 and has been removed, since all supported browsers has native element.closest() which accomplishes the same thing.
Old code:
const rowElement = DomHelper.up(cellElement, '.b-grid-row');
New code:
const rowElement = cellElement.closest('.b-grid-row');
Asynchronous cell editing
CellEdit feature startEditing and finishEditing methods were made async in v5.2.0.
finishEditing and cancelEditing methods was exposed on Grid in v5.2.0.
Old code:
if (grid.startEditing(...)) {
// Do something
}
if (grid.features.cellEdit.finishEditing()) {
// Do something
}
New code:
if (await grid.startEditing(...)) {
// Do something
}
if (await grid.finishEditing()) {
// Do something
}
Responsive mixin breakpoints config removed
The breakpoints config was deprecated in v5.1.0 and has now been removed. This config has been superseded by the responsive config.
Old code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
breakpoints : {
width : {
// When width drops to 50 or below, hide text and show icon
50 : {
name : 'small',
configs : { text : null, icon : 'b-fa b-fa-plus' }
},
// When width is above 50, hide icon and show text
'*' : {
name : 'large',
configs : { text : 'Add', icon : null }
}
}
}
});
New code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
responsive : {
// When width drops to 50 or below, hide text and show icon
small : {
when : 50,
text : null,
icon : 'b-fa b-fa-plus'
},
// When width is above 50, hide icon and show text
'*' : {
text : 'Add',
icon : null
}
}
});
Responsive mixin responsiveWidthChange and responsiveHeightChange events removed
These events were deprecated in v5.2.0 and have now been removed. They were replaced by the responsiveStateChange event.
Old code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
breakpoints : {
width : {
// When width drops to 50 or below, hide text and show icon
50 : {
name : 'small',
configs : { text : null, icon : 'b-fa b-fa-plus' }
},
// When width is above 50, hide icon and show text
'*' : {
name : 'large',
configs : { text : 'Add', icon : null }
}
}
},
listeners : {
responsiveWidthChange({ source, breakpoint, prevBreakpoint }) {
// ...
}
}
});
New code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
responsive : {
// When width drops to 50 or below, hide text and show icon
small : {
when : 50,
text : null,
icon : 'b-fa b-fa-plus'
},
// When width is above 50, hide icon and show text
'*' : {
text : 'Add',
icon : null
}
},
listeners : {
responsiveStateChange({ source, state, oldState }) {
// ...
}
}
});
New module bundle for Angular
Bryntum Grid is since v5.1.0 delivered with a new ES Module bundle without WebComponents. This was done to avoid conflicts with Angular which also uses WebComponents for applications.
Angular wrappers use grid.module.js bundle in favor of removed grid.lite.umd.js one.
Your Angular applications should be upgraded to use the new grid.module.js bundle which is set as main for @bryntum/grid NPM package.
Replace all application imports from Bryntum packages as shown below:
Old code:
import { Grid } from '@bryntum/grid/grid.lite.umd.js';
New code:
import { Grid } from '@bryntum/grid';
New module bundle with WebComponents
Bryntum Grid is since v5.1.0 delivered with a new grid.wc.module.js ES Module bundle with WebComponents.
Your applications which use WebComponents and modules bundle should be upgraded to import from new grid.wc.module.js instead of grid.module.js.
New Vue wrapper config option relayStoreEvents
This option was introduced in v5.0.3 to allow relaying of store events to the Grid instance. It defaults to false (no events relayed) which changes the default behavior so if your application relies on relayed events, configure it as true.
Example:
<bryntum-grid
:relayStoreEvents="true"
>
The config option applies to both Vue 2 and Vue 3.
Widget.showByPoint() removed
Deprecated in v5.0.2. It has been replaced by Widget.showBy(), which can be called with the same signature as showByPoint(). Please update any usages in your code accordingly.
Old code:
popup.showByPoint(100, 50);
New code:
popup.showBy(100, 50);
editFilter, disableFilter, removeFilter menu item keys renamed
Three menu item keys related to the Filter feature have been renamed. If you customize the presence of these items in your cell or header menus, you will need to change your code to update the keys:
editFilter->filterEditdisableFilter->filterDisableremoveFilter->filterRemove
Example of code requiring change:
// (Old code)
features : {
cellMenu : {
items : {
// Remove "Edit filter" and "Disable filter" default items
editFilter : false,
disableFilter : false
}
},
headerMenu : {
items : {
// Remove "Edit filter", "Remove filter", and "Disable filter"
editFilter : false,
removeFilter : false,
disableFilter : false
}
}
}
New configuration with keys changed:
features : {
cellMenu : {
items : {
// Remove "Edit filter" and "Disable filter" default items
filterEdit : false,
filterDisable : false
}
},
headerMenu : {
items : {
// Remove "Edit filter", "Remove filter", and "Disable filter"
filterEdit : false,
filterRemove : false,
filterDisable : false
}
}
}
Store now defaults to use raw data for remotely loaded data
The useRawData setting on Store is now enabled by default when data is loaded remotely using an AjaxStore, but with all sub-settings disabled. This will boost load performance slightly, by not cloning the incoming data objects.
If you want to restore the previous behavior, you can set useRawData : false on the store:
const grid = new Grid({
store :{
useRawData : false
}
});
Multi-select combos now clear typed value on selection
To opt out of this behavior, set clearTextOnSelection : false on the combo.
const combo = new Combo({
multiSelect : true,
clearTextOnSelection : false
});
Changes to events triggered when moving a record
Previously stores would by default trigger a remove event followed by an add event and finally a move event when moving a record. This has been changed, it no longer triggers remove. If you rely on the old behavior, you can configure the store to do so:
const store = new Store({
fireRemoveEventForMoveAction : true
});
Trees now animate toggling of nodes by default
To opt out of this behavior, set animateTreeNodeToggle : false on the (tree)grid:
const tree = new TreeGrid({
animateTreeNodeToggle : false
});
Grid now animates expanding & collapsing regions by default
To opt out of this behavior, set animateCollapseExpand : false on the RegionResize feature:
const grid = new Grid({
features : {
regionResize : {
animateCollapseExpand : false
}
}
});
The relativeToPage argument to Rectangle.from() now defaults to true
If you are calling this function and rely on the old behavior, you will need to set the relativeToPage argument to false:
const rect = Rectangle.from(element, false);
Store.storeId was removed
The deprecation was back in v3.0.0, but we have left the code in place until now for backwards compatibility. If you are relaying on this setting, you will need to change it to use id instead:
Old code
const store = new Store({
storeId : 'MyStoreId'
});
New code
const store = new Store({
id : 'MyStoreId'
});
Store.idField was removed
Deprecated as far back as in v2.0.0, but we have left the code in place until now for backwards compatibility. If you are relaying on this setting to remap the id field, you will need to change it to be remapped in the same way as other fields are (on your Store or Model):
Old code
const store = new Store({
idField : 'MyId'
});
New code
const store = new Store({
fields : [
{ name : 'id', dataSource : 'MyId' }
]
});
// Or
class MyModel extends Model {
static fields = [
{ name : 'id', dataSource : 'MyId' }
];
}
const store = new Store({
modelClass : MyModel
});
RowExpander event deprecation
To match other features, the events triggered by RowExpander have been deprecated and will be removed in v7.0.0. Apps should instead listen to new events that are triggered on the grid itself. The following events have been deprecated:
beforeExpand, replaced bybeforeRowExpandon Gridexpand, replaced byrowExpandon GridbeforeCollapse, replaced bybeforeRowCollapseon Gridcollapse, replaced byrowCollapseon Grid
Please update your code accordingly to avoid it breaking in the future.
Old code
grid.features.rowExpander.on({
beforeExpand : () => {},
expand : () => {},
beforeCollapse : () => {},
collapse : () => {}
});
New code
grid.on({
beforeRowExpand : () => {},
rowExpand : () => {},
beforeRowCollapse : () => {},
rowCollapse : () => {}
});
WidgetHelper 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.
Old code
WidgetHelper.toast('Hello world');
WidgetHelper.mask('Loading...');
New code
Toast.show('Hello world');
Mask.mask('Loading...');
Location class has been renamed to GridLocation
The Grid.util.Location class has been renamed to Grid.util.GridLocation to not match the native Location class name.
Old code
import Location from 'PATH_TO_SOURCE/Grid/util/Location.js';
import { Location } from 'PATH_TO_BUILD/grid.module.js';
import { Location } from '@bryntum/grid';
New code
import GridLocation from 'PATH_TO_SOURCE/Grid/util/GridLocation.js';
import { GridLocation } from 'PATH_TO_BUILD/grid.module.js';
import { GridLocation } from '@bryntum/grid';
Events fired by the RowReorder feature now have a source event param pointing to the Grid instance
Previously, it was referring to the DragHelper instance used internally by the feature. This conforms to how all other Grid features fire their events.
Old code
new Grid({
gridRowDrag({ source }) {
// source here is the DragHelper
}
})
New code
new Grid({
gridRowDrag({ source }) {
// source here is the Grid instance
}
})
Using renderer on a WidgetColumn/CheckColumn is now deprecated, in favor of the new afterRenderCell column callback
To mutate widgets in a WidgetColumn/CheckColumn, you should now use the afterRenderCell callback. You cannot return anything from this method, it's only meant to be used to mutate the cell / row / widgets.
Old code
new Grid({
columns : [
{
type : 'check',
field : 'enabled',
renderer({ record, widgets }) {
// Hide checkboxes in certain rows
widgets[0].hidden = record.readOnly;
}
}
]
});
New code
new Grid({
columns : [
{
type : 'check',
field : 'enabled',
afterRenderCell({ record, widgets }) {
// Hide checkboxes in certain rows
widgets[0].hidden = record.readOnly;
}
}
]
});
Grid v6.0.2
Store count related deprecations
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.
Old code:
const allCount = store.allCount;
const dataCount = store.originalCount;
New code:
const allCount = store.totalCount;
// or
const allCount = store.getCount({ all : true });
const dataCount = store.getCount({ filteredOut: true, collapsed : true });
The boolean signature for Store.getCount() was also deprecated. Use Store.getCount(options) instead for better control of how records are counted.
Old code:
const processed = store.getCount(true);
const real = store.getCount(false);
New code:
const processed = store.getCount({ headersFooters : true });
const real = store.getCount({ visibleData : true });
// or (visibleData is the default)
const real = store.getCount({ });
Grid v6.1.2
Store makeChained deprecated
Use chain or chainTree instead. Calling chain has identical behavior to makeChained:
Old code:
const chainedStore = store.makeChained();
New code:
const chainedStore = store.chain();
Group feature´s groupRecord event param
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.
Old code:
grid.on({
beforeToggleGroup({ groupRecord }) {
}
});
New code:
grid.on({
beforeToggleGroup({ groupRecords }) {
}
});
Grid v6.1.6
Widget ariaLive property was deprecated
Widget ariaLive property was deprecated and will be removed in 7.0.
Grid v6.2.0
Exporting grid with row expander feature to PDF
Row expander feature use Web Components and exporting them requires upgrading PDF Export Server to latest version 2.0.0 which was recently released in the GitHub repository and Docker Hub.
Popups are now draggable by default
If you want to disable this behavior, set draggable config to false in the popup config.
Old code:
const popup = new Popup({
// ...
});
New code:
const popup = new Popup({
// ...
draggable : false
});
Grid cells with overflowing text now use ellipsis by default
If you prefer the old behavior where text is cropped, or if the new approach leads to rendering issues in your app, set Grid's cellEllipsis property to false.
Old code:
const grid = new Grid({
// ...
});
New code:
const grid = new Grid({
// ...
cellEllipsis : false
});
showDirty indicator pseudo-element changed
We changed the showDirty indicator pseudo-element from :before to :after so both the rowReorder grip handle and the showDirty indicator can display simultaneously. If you have custom styles targeting :before for showDirty you will need to update them to target :after instead.
Old code:
.b-cell-dirty:before {
background-color : lightskyblue;
}
New code:
.b-cell-dirty:after {
background-color : lightskyblue;
}
AjaxHelper.fetch credentials change
The AjaxHelper.fetch() utility function is used by AjaxStore to fetch data from the server. Previously it by default used the credentials: 'include' option, which meant that cookies were always sent with the request. To better match the default behavior of the native fetch API, our default value has been removed (thus it instead uses 'same-origin', which is the native default). If you want to restore the old behavior, you can do so using AjaxHelper.DEFAULT_FETCH_OPTIONS:
Old code
new AjaxStore({
readUrl : 'load.php',
autoLoad : true
})
New code
AjaxHelper.DEFAULT_FETCH_OPTIONS = { credentials : 'include' };
new AjaxStore({
readUrl : 'load.php',
autoLoad : true
})
Grid v6.2.4
remoteChildCount deprecated for lazy loaded tree stores
The previously required remoteChildCount field, has been deprecated and will be removed in 7.0.0. Instead, we recommend using the new autodetection system available for tree stores. The backend implementation will be much simpler.
Old response data:
return {
data : [
{ id: 1, name: 'Parent 1', remoteChildCount: 945, expanded: true },
{ id: 2, name: 'Parent 2', remoteChildCount: 211, expanded: true },
{ id: 3, name: 'Parent 3', remoteChildCount: 345, expanded: false }
]
}
New response data:
return {
data : [
{ id: 1, name: 'Parent 1' },
{ id: 2, name: 'Parent 2' },
{ id: 3, name: 'Parent 3' }
]
}
Special cases are handled through the new isFullyLoaded field instead. For example, when including all a parent's children in a single request response.
Old response data:
return {
data : [
{
id: 1,
name: 'Parent 1',
expanded : true,
remoteChildCount: 3,
children : [
{ id: 11, name: 'Child 1' },
{ id: 12, name: 'Child 2' },
{ id: 13, name: 'Child 3' }
]
},
{ id: 2, name: 'Parent 2', remoteChildCount: 211 },
{ id: 3, name: 'Parent 3', remoteChildCount: 345 }
]
}
New response data:
return {
data : [
{
id: 1,
name: 'Parent 1',
expanded: true,
isFullyLoaded : true,
children : [
{ id: 11, name: 'Child 1' },
{ id: 12, name: 'Child 2' },
{ id: 13, name: 'Child 3' },
]
},
{ id: 2, name: 'Parent 2', expanded: true },
{ id: 3, name: 'Parent 3', expanded: true }
]
}