# What's new in Grid v4.3.0

## Improved WidgetColumn

WidgetColumn now offers two-way binding by configuring the column's field widget with a name corresponding to a Model 
field name. See this demonstrated in the new
[widgetcolumn](https://bryntum.com/products/grid/examples/widgetcolumn/) example.

```javascript
{
    text    : 'Slider bound to age',
    type    : 'widget',
    width   : 250,
    cls     : 'slidercell',
    widgets : [
        {
            type        : 'slider',
            name        : 'age',
            showValue   : false,
            showTooltip : true
        }
    ]
}
```

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

You also now have access to the column `widgets` as a param provided to the `renderer` method. This makes it easy to
hide / show or mutate widgets on a per-row basis.

```javascript
{
    text     : 'Checkboxes',
    type     : 'widget',
    align    : 'center',
    width    : 200,
    renderer : ({ widgets }) => {
        // We have access to the widgets inside the cell renderer method, so you can hide / show widgets or
        // mutate their value or state
    
        // Set some random values
        widgets[Math.floor(Math.random() * 2.99)].checked = true;
    },
    widgets : [
        {
            type : 'checkbox'
        },
        {
            type : 'checkbox'
        },
        {
            type : 'checkbox'
        }
    ]
}
```

## Collapsible Panels

Panels now support the `collapsible` [config](#Core/widget/Panel#config-collapsible). This adds a tool in the panel's
header that is used to reduce the panel to only its header:

<div class="external-example" data-file="Grid/guides/whats-new/4.3.0/panel-collapse.js"></div>

The direction of the panel's collapse can be changed by using a config object for the `collapsible` config (in this
example, the animation is slowed down as well):

<div class="external-example" data-file="Grid/guides/whats-new/4.3.0/panel-collapse-left.js"></div>

## Merging cells to span multiple rows

The new `MergeCells` feature can merge cells with the same value to create a single large cell spanning multiple rows.
Applies to sorted columns configured with `mergeCells : true`.

```javascript
const grid = new Grid({
    features : {
        mergeCells : true,
        sort       : 'city'
    },

    data : [
        { id : 1, city : 'Amsterdam', name : 'Daan', occupation : 'Cheesemaker' },  
        { id : 2, city : 'Amsterdam', name : 'Levi', occupation : 'Tulip farmer' },  
        { id : 3, city : 'Amsterdam', name : 'Emma', occupation : 'Tulip farmer' },  
        { id : 4, city : 'Rome', name : 'Giulia', occupation : 'Art conservator' },  
        { id : 5, city : 'Rome', name : 'Francesco', occupation : 'Cheesemaker' },  
    ],

    columns : [
        { field : 'city', text : 'City', flex : 1, mergeCells : true },
        { field : 'name', text : 'Name', flex : 1 },
        { field : 'occupation', text : 'Occupation', flex : 1, mergeCells : true }
    ]
});
```

<div class="external-example" data-file="Grid/guides/whats-new/4.3.0/MergeCells.js"></div>


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