# What's new in Grid v5.4.0

## Native clipboard support for RowCopyPaste

The [RowCopyPaste](#Grid/feature/RowCopyPaste) feature has been enhanced to usa 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.

Another improvement is that both the `beforeCopy` and `beforePaste` events are now asynchronously preventable.

You can try this out in the [Multiple instances demo](https://bryntum.com/products/grid/examples/multipleinstances/).

Please note that this enhancement has required API changes:
* The `copyRows` and `pasteRows` functions are now asynchronous

## Widget support in the RowExpander

The [RowExpander](#Grid/feature/RowExpander) feature now supports rendering any Bryntum widget inside the expanded row.
This makes it possible, for example, to show a detail Grid when expanding a row. Either configure the RowExpander with a
[widget](#Grid/feature/RowExpander#config-widget):

<div class="external-example" data-file="Grid/feature/RowExpanderWidget.js"></div>

```javascript
new Grid({
    features : {
        rowExpander : {
            widget : {
                // Custom grid class defined elsewhere
                type : 'detailGrid', 
                // This field is used to populate the detailGrid with data
                dataField : 'orderDetails'
            }
        }
    }
});
```

Or return a widget configuration in the [renderer](#Grid/feature/RowExpander#config-renderer):

```javascript
new Grid({
   features : {
       rowExpander : {
           async renderer({record, region, expanderElement}){
               const myData = await fetch('myURL');
               return {
                  type : 'grid',
                  autoHeight : true,
                  columns : [
                      ...
                  ],
                  data : myData
               };
           }
       }
   }
});
```

You can try it out in the new [Master detail demo](https://bryntum.com/products/grid/examples/master-detail/) or the new
[Nested grids demo](https://bryntum.com/products/grid/examples/rowexpander-widget/).

## New color editing widgets

In this release we have added three new widgets that can be used for displaying and editing color values. They are used
internally for the Scheduler's and Gantt's new `eventColor` editors.

### ColorPicker

The `ColorPicker` is meant for usage in a `Menu`. It comes with a range of default colors, which can easily be
overridden.

<div class="external-example" data-file="Core/widget/ColorPicker.js"></div>

Usage example:

```javascript
new Button({
  text : 'Show color menu',
  menu : {
    items : [
      {
        text : 'Color',
        menu : {
          color : {
            type   : 'colorpicker',
            // This overrides the default colors
            colors : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
          }
        }
      }
    ]
  }
});
```

### ColorField

The `ColorField` shows a (optional) label and a colored element. If the user clicks the element, the `ColorPicker` shows
up and lets the user select from a pre-defined range of colors. It uses the `ColorPicker's` default colors as its
default colors.

<div class="external-example" data-file="Core/widget/ColorField.js"></div>

Usage example:

```javascript
new ColorField({
    label    : 'Color',
    // This overrides the default colors
    colors   : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
});
```

### ColorColumn

The `ColorColumn` can be added to any Grid (or Grid-based widget) and used as a display and an editor of a color value.
It renders a colored element similar to the `ColorField` and upon interaction lets the user select from the `ColorMenu`.

<div class="external-example" data-file="Grid/column/ColorColumn.js"></div>

Usage example:

```javascript
const grid = new Grid({
    columns    : [
        { 
          type   : 'color',
          field  : 'color',
          text   : 'ColorColumn',
          width  : 100,
          colors : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
        }
    ]
});
```

## Split grid feature

Grid has a new feature called [Split](#Grid/feature/Split) which allows you to split the grid into multiple parts (two
or four). This lets you access different parts of the grid that might not otherwise fit in the same viewport. Try it in 
the live demo below, and in the new `split` demo:

<div class="external-example" data-file="Grid/feature/Split.js"></div>

## Merge cells in any column

The `MergeCells` feature now supports merging cells in any column, not just sorted columns: 

<div class="external-example" data-file="Grid/feature/MergeCellsAll.js"></div>

Opt in to this new behavior by configuring the feature with `sortedOnly: false`:

```javascript
const grid = new Grid({
    features : {
        mergeCells : {
            sortedOnly : false
        }
    }
});
```


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