# Upgrade guide for Grid v4.1.0
## Store move method accepts an array
In version 4.1.0, `store.move()` accepts an array in order to move multiple records in one atomic operation. Due to
this, the resulting `move` event now has a `records` property which is the array of records moved. The `record` event
property is deprecated and will be removed in version 5.0.0.
## ColumnPicker Feature now has ability to add new columns based on defined fields in the Model
By configuring the `ColumnPicker` feature with `createColumnsFromModel : true`, fields defined in the grid's store's
`modelClass` appear in the column menu, and can be added as new columns.
```javascript
features : {
columnPicker : {
createColumnsFromModel : true
}
}
```
By default the column header is the uppercased version of the field name. To define a field with a custom column header
text:
```javascript
fields [{
name : 'priority',
text : 'Event Level'
}]
```
To exempt a field from being added to the column menu by this feature, configure it with `internal : true`:
```javascript
fields [{
name : 'image',
internal : true
}]
```
## Dropped support for RequireJS
In version 4.1.0 we have removed the RequireJS demo from the project, since it is an outdated technology. We instead
recommend using modern ES6 module imports which is supported in all modern browsers
(Chrome, FireFox, Safari, Edge (chromium)).
You could easily upgrade old application code to use new technology.
**Old code:**
`index.html`
```html
```
`scripts/app.js`
```javascript
requirejs.config({
paths : {
grid : '../../../build/grid.umd'
}
});
requirejs(['grid'], function(bryntum) {
new bryntum.Grid({
// config here
});
});
```
**New code:**
`index.html`
```html
```
`scripts/app.js`
```javascript
import { Grid } from '../../../build/grid.module.js';
new Grid({
// config here
});
```
## Prevent listeners from an on-function
Returning `false` from an on-function now prevents any attached listeners from being called. For example:
```javascript
const button = new Button({
onClick() {
return false;
},
listeners : {
click() {
// Won't run when button is clicked, prevented by returning false in onClick() above
}
}
});
```
Prior to this change, the return value of on-functions was not handled at all. We judge the risk of this change as low,
but if you are using both on-functions and listeners on the same instance and are returning a value from the on-function
you might need to adjust your code.
**Old code:**
```javascript
const button = new Button({
onClick() {
// Do something
return false;
},
listeners : {
click() {
console.log('Click');
}
}
});
```
**New code:**
```javascript
const button = new Button({
onClick() {
// Do something
},
listeners : {
click() {
console.log('Click');
}
}
});
```
## Panel Changes
The `Panel` class gained a new wrapper element between the panel's outer `element` and its content element.
Previously, the markup for a `Panel` looked like this:
```html
...
```
The new markup for a `Panel` looks like this:
```html
...
```
Any CSS selectors that target immediate children (`>`) of panels will need to be refactored.
For example, selectors like this:
```css
.my-custom-panel > .b-panel-content {
/*...*/
}
```
Will need to account for the body wrap element:
```css
.my-custom-panel > * > .b-panel-content {
/*...*/
}
```
Be aware that there will be additional wrapper elements created if toolbars are set `dock` to `left` or `right`. In such
cases, it will be simpler to put the classes on the panel's body element directly using the `bodyCls` config.
## TabPanel Changes
The markup for `TabPanel` in previous releases looks like the following:
```html
...
...
```
There are new elements from the `Panel` base class and from the `Toolbar` base class for the new `TabBar` widget. In
addition, the tabs are now a `Tab` widget which extends `Button`. This changed the tabs from a `