# What's new in Grid v5.6.0

## New npm packages for combining products

This release introduces a new set of npm packages and framework components, that allows combining multiple Bryntum
products in the same application.

These packages contain the product specific code only, as opposed to the current packages that has all code for the 
products each product builds upon (for example Scheduler contains all code from Grid & Core).

The new packages are called `thin` packages, and moving forward it will be the recommended way of using Bryntum
products in npm based applications (for all supported frameworks). The packages are initially available for licensed
users only, but will be made available for trial users in the near future.

The following packages are available:

| Package                    | Purpose                                     |
|----------------------------|---------------------------------------------|
| @bryntum/core-thin         | Bryntum Core data and UI components package |
| @bryntum/grid-thin         | Bryntum Grid component package              |
| @bryntum/scheduler-thin    | Bryntum Scheduler component package         |
| @bryntum/schedulerpro-thin | Bryntum Scheduler Pro component package     |
| @bryntum/gantt-thin        | Bryntum Gantt component package             |
| @bryntum/calendar-thin     | Bryntum Calendar component package          |
| @bryntum/taskboard-thin    | Bryntum TaskBoard component package         |
| @bryntum/engine-thin       | Bryntum Scheduling engine component package |

Applications should install packages for the products they use, and the products those are built upon (see links to 
guides below for more information). For example an application using Scheduler Pro should also install Scheduler, Grid &
Core:

```bash
npm install @bryntum/core-thin @bryntum/grid-thin @bryntum/scheduler-thin @bryntum/schedulerpro-thin
```

There are also new corresponding wrappers for the supported frameworks, which should be used instead of the current
wrappers. For example for React:

| Package                          | Purpose                                        |
|----------------------------------|------------------------------------------------|
| @bryntum/core-react-thin         | Bryntum Core UI widgets React wrappers package |
| @bryntum/grid-react-thin         | Bryntum Grid React wrapper package             |
| @bryntum/scheduler-react-thin    | Bryntum Scheduler React wrapper package        |
| @bryntum/schedulerpro-react-thin | Bryntum Scheduler Pro React wrapper package    |
| @bryntum/gantt-react-thin        | Bryntum Gantt React wrapper package            |
| @bryntum/calendar-react-thin     | Bryntum Calendar React wrapper package         |
| @bryntum/taskboard-react-thin    | Bryntum TaskBoard React wrapper package        |

Applications should install wrappers **only** for the products they use, there is **no** need to install them for the 
products those are built upon. For example an application using Scheduler Pro:

```bash
npm install @bryntum/schedulerpro-react-thin
```

More information:
* [Multiple products in Angular](#Grid/guides/integration/angular/multiple-products.md)
* [Multiple products in React](#Grid/guides/integration/react/multiple-products.md)
* [Multiple products in Vue](#Grid/guides/integration/vue/multiple-products.md)

## Group by array field

Stores can now group by an array field, which means that one record can be a member of more than one group. Linked
records are used when a record must appear more than once in a store.

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

## Drag resizing rows

We have added a new feature called `RowResize`, that lets users resize rows by dragging their bottom border. It can be 
configured to allow resizing individual rows, or to apply the same size to all rows. See the updated `rowheight` example 
for a demonstration, or try it out below:

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

## Collapsible list groups

The lightweight `List` widget now supports collapsing / expanding groups: 

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

## Default filtering UI changed

The more advanced filtering UI introduced in 5.2.0 (under the `isMulti` flag) has been made the default for the `Filter` 
feature. The previous UI can still be used by specifying `legacyMode : true`.

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

## RowExpander now supports configuring one widget per region

The [RowExpander](#Grid/feature/RowExpander) feature now supports rendering one Bryntum widget inside each of the configured regions of the
expanded row. Just provide a widget configuration object for each region like below.

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

```javascript
new Grid({
   features : {
       rowExpander : {
           widget : {
               locked : {
                   type : 'detailGrid',
                   // If your widgets uses different data sources, out the dataField
                   //  property in the widget configuration object
                   dataField : 'orderDetails'
               },
               normal : {
                   type : 'summaryGrid',
                   dataField : 'sumDetails'
               }
           }
       }
   }
});
``` 

## RowExpander can span over Grid regions

The [RowExpander](#Grid/feature/RowExpander) feature now supports rendering an element or a widget that spans over several Grid regions. That
element will always have a full Grid width, regardless of any horizontal scroll. 

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

Simply set the [spanRegions](#Grid/feature/RowExpander#config-spanRegions) config to `true` to activate this behavior.
Everything else works the same.

```javascript
new Grid({
   features : {
       rowExpander : {
           spanRegions : true,
           dataField   : 'orderDetails',
           widget      : {
               type : 'detailGrid',
           }
       }
   }
});
``` 

## Tree node animation 
When the [animateTreeNodeToggle](#Grid/view/GridBase#config-animateTreeNodeToggle) is set to `true`, tree node
expand and collapse operations are animated.

<div class="external-example" data-file="Grid/view/TreeGrid.js"></div>


## Functions and events declarations for TypeScript have been improved

Declarations of class config/property functions and events (which are represented as **onEventName** functions) were
improved to contain all available parameters and return type.

See examples below:

**Old declarations:**

```typescript
    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: Function|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: Function
```

**New declarations:**

```typescript
    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: ((event : { source: Combo, value: string, event: Event }) => void)|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: (record: Model, combo: Combo) => string|null
```


## Client side print / PDF export

A new [Print feature](#Grid/feature/export/Print) was added to allow printing Grid content using the browser print
dialog. It extends the [PDFExport feature](#Grid/feature/export/PdfExport) and uses same configs which manage HTML
markup rendering (exporters, columns, paper size, etc.). The only difference is that instead of sending generated HTML
to a backend, the feature creates an iframe element with generated content and opens the browser print dialog from it.


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