# What's new in Grid v5.2.0

## Collapsible columns

Parent columns (group columns) can now be made collapsible by configuring them with `collapsible: true`. Collapsible
columns renders a collapse / expand button into their headers, clicking it will collapse or expand the column. They can
also be toggled using the header context menu, or by programmatically setting `column.collapsed = true / false`.

There are two `collapseMode`s available:

* 'showFirst' (default) - the first column in the group is always visible, the rest are hidden.
* 'toggleAll' - all columns in the group are collapsed or expanded depending on the current state. Which can be used to
  show a different set of columns when the group is collapsed or expanded.

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

## Column renaming

A [ColumnRename](#Grid/feature/ColumnRename) feature has been added which allows the user to rename columns by either
right-clicking column header or using keyboard shortcuts (`F2`) when column header is focused.

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

## Asynchronous cell editing

[CellEdit](#Grid/feature/CellEdit) feature [startEditing](#Grid/feature/CellEdit#function-startEditing) and 
[finishEditing](#Grid/feature/CellEdit#function-finishEditing) methods are now `async`.

[finishEditing](#Grid/feature/CellEdit#function-finishEditing) and 
[cancelEditing](#Grid/feature/CellEdit#function-cancelEditing) methods are now exposed on Grid.

**Sample code:**

```javascript
const
    grid = new Grid({
        appendTo : document.body,
        features : {
            cellEdit : true
        },
        columns : [
            { text : 'Name', field : 'name', editor : 'text' }
        ],
        data : [
            { id : 1, name : 'Peter' }
        ]
    }),
    testEditinig = async() => {
        if (await grid.startEditing({ record : grid.store.first, field : 'name' })) {
            console.log('Started editing of name cell');
            if (await grid.finishEditing()) {
                console.log('Finished editing of name cell');
            }
        }
    };

testEditinig().then(() => {
    console.log('Cell editing is ok!');
});
```
## Improved PDF Export feature

Pdf Export feature now renders exported content directly and does not scroll the view anymore. This significantly
improves performance (by an order of magnitude) and robustness of the export process. You can enable old behavior by
setting `enableDirectRendering` config on the export feature to `false`. Old behavior is deprecated and will be removed
in the next major release. Please report issues that make you disable direct rendering.

## Multi-filter widget

You can now create UI to define and manage a set of `CollectionFilter`s using the `GridFieldFilterPickerGroup`
widget. The widget is configured with a reference to a Grid, and shows a set of filters that filter the Grid's
store as they are modified. The widget supports a variety of filtering operators based on the filter's selected
data field type, including new date range operators.

The Grid's `filter` feature can also be configured with `isMulti` to show the new multi-filter UI in the column
header popup.

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


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