# Upgrade guide for Grid v5.0.0

## Grid's `selectionMode` config

The `selectionMode` config controlling row / cell selection behavior is now merged with the config object
you provide (previously the outside config object overwrote the default settings).

**Pre 5.0 code**

```javascript
const grid = new Grid({
    selectionMode : {
        multiSelect : false
    }
})

// The code object resulted in a selectionMode object with only a `multiSelect` property.
```

**Post 5.0 code**

```javascript
const grid = new Grid({
    selectionMode : {
        multiSelect : false
    }
})

/* In 5.0 - the same code results in merge of the outside config and the defaults, i.e.:
selectionMode : {
    row                              : true,
    cell                             : true,
    rowCheckboxSelection             : false,
    multiSelect                      : false,
    checkbox                         : false,
    showCheckAll                     : false,
    deselectFilteredOutRecords       : false,
    includeChildren                  : false,
    preserveSelectionOnPageChange    : false,
    preserveSelectionOnDatasetChange : true,
    deselectOnClick                  : false
}
*/
```

## Store `remove` method now always returns Array

Previously it returned `null` if no records were removed. In 5.0, the return value is always an array.


## Store `beforeRemove` and `remove` events fired in batch

For tree store, previously the store fired one `beforeRemove` and `remove` event for every removed record when
removing multiple. This caused performance issues when removing many nodes. In 5.0, removing multiple nodes in a tree
triggers a batch event similar to how a flat store works.


**Pre 5.0 code**

```javascript
const store = new Store({
    tree : true,
    listeners : {
        remove({ parent, index, isChild, allRecords, isMove, records }) {

        }
    }
})

// Triggers 1 remove event for every removed node
store.remove([store.getById(1), store.getById(2)]);
```


**Post 5.0 code**

In 5.0, when removing multiple records, the `parent` and `index` parameters are omitted.

```javascript
const store = new Store({
    tree : true,
    listeners : {
        remove({ isChild, allRecords, isMove, records }) {

        }
    }
})

// Will trigger just 1 remove event
store.remove([store.getById(1), store.getById(2)]);
```

### TextAreaField split into two classes

TextAreaField was split into two classes. The old `TextAreaField` was renamed to `TextAreaPickerField` and is intented
for use as a column cell editor and `TextAreaField` for use in an "inline" form type context. NoteColumn in Gantt has been
updated to use `TextAreaPickerField` and the TaskEditor NotesTab is using the `TextAreaField`.

If you relied on the `inline` flag of the old TextAreaField, you should refactor your code to use one of classes above.

**Old code:**

```javascript
const field = new TextAreaField({
    inline : false
});
```

**New code:**

```javascript
const field = new TextAreaPickerField({
    // ...
});
```

## React wrappers now use module bundle

The React wrappers previously used the UMD bundle to import required classes:

**Old code:**
```javascript
import { Model } from '@bryntum/grid/grid.umd.js';
```

UMD bundle is not used anymore in the wrappers so the import line in the above code needs to be changed:

**New code:**
```javascript
import { Model } from '@bryntum/grid';
```

Imports from `@bryntum/grid-react` remain same.


## WidgetColumn behaviour changes

WidgetColumn supports two-way binding since version 4.3.0. It uses the `defaultBindProperty` config of Widgets 
contained in it to determine how to apply a value. For fields the new behaviour should be straightforward to use, but
if you are using a `Button` in it and are relying on the cell value being shown on the button you will have to adjust 
your code to use `defaultBindProperty: 'text'`.

**Old code:**
```javascript
const grid = new Grid({
    columns : [{
        text  : 'Button',
        type  : 'widget',
        field : 'age',
        widgets : [
            {
                type     : 'button',
                icon     : 'b-fa b-fa-plus',
                onAction : () => {}
            }
        ]
    }]
});
```

**New code:**
```javascript
const grid = new Grid({
    columns : [{
        text  : 'Button',
        type  : 'widget',
        field : 'age',
        widgets : [
            {
                type                : 'button',
                icon                : 'b-fa b-fa-plus',
                defaultBindProperty : 'text',
                onAction            : () => {}
            }
        ]
    }]
});
```


<p class="last-modified">Last modified on 2023-10-26 8:19:11</p>