# What's new in Grid v4.2.0

## Improved MessageDialog

MessageDialog now offers `alert()`, `prompt()` and `confirm()` functions:

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

They are all async and accept a single object argument to configure them:

```javascript
// Showing a basic alert
MessageDialog.alert({
    title   : 'Important information',
    message : 'An alert displaying some very important information' 
});

// Confirming some user action
const result = await MessageDialog.confirm({
    title : 'Confirm action',
    message : 'Proceed with removing all tasks?'
});

if (result.button === MessageDialog.okButton) {
    // ...
}

// Prompting for input
const result = await MessageDialog.prompt({
    title: 'New task',
    message : 'Enter name:'
});

if (result.button === MessageDialog.okButton) {
    newTask.name = result.text;
}
```

## New Responsive mixin

New mixin added to Core to be used by the new TaskBoard component, but can be mixed into any Widget to simplify giving 
it responsive behaviour. For example to create a responsive `Button`:

```javascript
class ResponsiveButton extends Button.mixin(Responsive) {}

const button = new ResponsiveButton({
    breakpoints : {
        width : {
            // When width drops to 50 or below, hide text and show icon
            50 : {
                name    : 'small',
                configs : { text : null, icon : 'b-fa b-fa-plus' }
            },
            // When width is above 50, hide icon and show text
            '*' : {
                 name    : 'large',
                 configs : { text : 'Add', icon : null }
            }
        }
    }
});
```

See the [API docs](#Core/widget/mixin/Responsive) for more information.

## List with grouped store

The [List](#Core/widget/List) widget now renders group headers when used with a grouped store. Useful for example in a 
[Combo](#Core/widget/Combo) picker when there are a lot of items:

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


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