# Upgrade guide for Grid v4.2.0

## MessageDialog changes and new APIs

MessageDialog was refactored and now offers `alert`, `prompt` and `confirm` API methods mimicking the native
browser APIs. Each returns a promise which yields the button that was clicked (in the case of prompt, an object with 
the `button` and `text`).

The default Yes / No buttons now say OK and Cancel but can be customized easily:

```javascript
MessageDialog.confirm({
    title        : 'So tell me what you want, what you really really want?',
    message      : 'A message',
    okButton     : 'Yes',
    cancelButton : 'No'
});
```

```javascript
MessageDialog.alert({
    title        : 'Important Message',
    message      : 'Server rebooting in 25 seconds',
    okButton     : 'Got it!'
});
```

```javascript
const result = await MessageDialog.prompt({
    title        : 'Enter message',
    message      : 'Please write a message',
    okButton     : 'Save'
});

if (result.button === MessageDialog.okButton) {
    console.log(result.text); // The text entered by user
}
```

## Scroll Manager moved to the Core package

`Grid/util/ScrollManager` was used by Grid internals to scroll the view in certain conditions. For instance, when moving
pointer close to an edge with `enableScrollingCloseToEdges` set to true, or in Scheduler, when dragging event close to
edges. It also assumed it was used for a Grid, or a subclass thereof. When `startMonitoring` was called with an element,
manager would always assume there is a special vertical overflowing element.

In the new release it was moved to `Core/util/ScrollManger` and untangled from Grid. A new manager does not have any
indirect ties, it only monitors what it is told to and can be used for any component.

```javascript
const manager = new ScrollManager({ element : container });

manager.startMonitoring({
    scrollables : [
        {
            // It supports HTML Element instances
            element : child,
            direction : 'vertical'
        },
        {
            // And selectors
            element : '.selector',
            direction : 'both'
        }
    ]
});
```

Old API is still supported, but we recommend to stick to the new API:

```javascript
manager.startMonitoring({
    element : child,
    direction : 'vertical'
})
```

## GlobalEvents no longer exposed on window

`GlobalEvents` is a singleton that triggers global application level events, such as the `theme` event when changing 
themes. Previously it was exposed on `window`, an approach we are now avoiding to make multiple bundles work better 
together (since they would otherwise use the last loaded bundles instance instead of their own). If you use it in your
application you might have to adjust your code to import it as with all other Bryntum classes.

**Old code:**

```javascript
window.GlobalEvents.on({
    theme() {
        // Code that runs when theme is changed
    }
})
```

**New code:**

```javascript
import GlobalEvents from 'lib/Core/GlobalEvents.js';

GlobalEvents.on({
    theme() {
        // Code that runs when theme is changed
    }
})
```


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