# Upgrade guide for Grid v3.1.0

## Context menu refactoring

### Basic class

New abstract `ContextMenuBase` class was introduced. It has common logic for all context menu features.
It creates a new menu instance, handles event firing, and provides basic functions to work with the menu.

### ContextMenu feature

`ContextMenu` feature was replaced by `CellMenu` and `HeaderMenu`. So now context menu is configured for cells and
headers independently. Items are named objects now:

**Old code:**

```javascript
const grid = new Grid({
    features : {
        contextMenu : {
            headerItems : [
                { text : 'My header item', onItem : () => ... }
            ],
            
            cellItems : [
                { text : 'My cell item', onItem : () => ... }
            ],
            
            processCellItems({items, record}) {
                if (record.cost > 5000) {
                    items.push({ text : 'Split cost' });
                }
            }
        }
    }
});
```

**New code:**

```javascript
const grid = new Grid({
    features : {
        headerMenu : {
            items : {
                myItem : { text : 'My header item', onItem : () => ... }
            }
        },
    
        cellMenu : {
            items : {
                myItem : { text : 'My cell item', onItem : () => ... }
            },
    
            processItems({items, record}) {
                if (record.cost > 5000) {
                    items.costItem = { text : 'Split cost' };
                }
            }
        }
    }
});
```

### `showRemoveRowInContextMenu` config

Grid's `showRemoveRowInContextMenu` config was deprecated in favour of `CellMenu` config. So to remove a default item
please follow this way:

**Old code:**

```javascript
const grid = new Grid({
    showRemoveRowInContextMenu : false
});
```

**New code:**

```javascript
const grid = new Grid({
    features : {
        cellMenu : {
            items : {
                removeRow : false // `removeRow` is a key of default "Remove row" item
            }
        }
    }
});
```

### `cellMenuItems` and `headerMenuItems` column configs

Column's `cellMenuItems` and `headerMenuItems` configs were turned into named objects:

**Old code:**

```javascript
const grid = new Grid({
    columns : [
        {
            text            : 'First name',
            field           : 'firstName',
            headerMenuItems : [
                { text : 'Column specific header item' }
            ],
            cellMenuItems : [
                { text : 'Column specific cell item' }
            ]
        }
    ]
});
```

**New code:**

```javascript
const grid = new Grid({
    columns : [
        {
            text            : 'First name',
            field           : 'firstName',
            headerMenuItems : {
                firstColumnItem : { text : 'Column specific header item' }
            },
            cellMenuItems : {
                firstColumnItem : { text : 'Column specific cell item' }
            }
        }
    ]
});
```

### Context menu events

Some of Grid's events provided by `ContextMenu` feature were replaced by `CellMenu` and `HeaderMenu` features. Here is 
the list of changes:

- `cellContextMenuBeforeShow` -> `cellMenuBeforeShow`;
- `cellContextMenuShow` -> `cellMenuShow`;
- `headerContextMenuBeforeShow` -> `headerMenuBeforeShow`;
- `headerContextMenuShow` -> `headerMenuShow`;
- `contextMenuItem` -> `cellMenuItem` and `headerMenuItem`;
- `contextMenuToggleItem` -> `cellMenuToggleItem` and `headerMenuToggleItem`;

For example:

**Old code:**

```javascript
const grid = new Grid({
    listeners : {
        cellContextMenuBeforeShow : () => {...}
        cellContextMenuShow : () => {...}
        headerContextMenuBeforeShow : () => {...}
        headerContextMenuShow : () => {...}
        contextMenuItem : () => {...}
        contextMenuToggleItem : () => {...}
    }
});
```

**New code:**

```javascript
const grid = new Grid({
    listeners : {
        cellMenuBeforeShow : () => {...}
        cellMenuShow : () => {...}
        cellMenuItem : () => {...}
        cellMenuToggleItem : () => {...}
        headerMenuBeforeShow : () => {...}
        headerMenuShow : () => {...}
        headerMenuItem : () => {...}
        headerMenuToggleItem : () => {...}
    }
});
```


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