DataGrid and TreeList - Toolbar customization enhancement

[NickMitrokhin]

The Problem

Currently, the only way to customize toolbar in DataGrid/TreeList is to use onToolbarPreparing event. You cannot use this method to change settings of buttons once toolbar is created. Direct DOM mutations are not recommended when you use React, Angular, and Vue frameworks.

The Proposed Solution

We plan to add a new toolbar option that allows you to customize toolbar items the same way as the Toolbar. Each toolbar item can be specified as an object with the same number of properties as an item of a stand-alone toolbar or a string name from the following list: 'addRowButton', 'applyFilterButton','columnChooserButton', 'exportButton', 'groupPanel', 'revertButton', 'saveButton', 'searchPanel'.
Note that the option will allow you to customize only toolbar items, not the entire toolbar. If you want to customize the toolbar, use the onToolbarPreparing event.

The following code snippet shows how to specify items:

jQuery

$('#container').dxDataGrid({
    ...
    toolbar: {
        items: [
            {
                location: "before",
                widget: "dxButton",
                options: {
                    text: "My button",
                    width: 120,
                    onClick: function(e) {
                        // execute your code when the button is clicked
                    }
                }
            },
            'columnChooserButton'
        ]
    },
    ...   
})

Angular

<dx-data-grid ...>
    ...
    <dxo-toolbar>
        <dxi-item location="before">
            <dx-button
                text="My button"
                width="120"
                (onClick)="onClickHandler($event)">
            </dx-button>        
        </dxi-item>
        <dxi-item name="columnChooserButton"></dxi-item>
    </dxo-toolbar>
    ...   
</dx-data-grid>

React

<DataGrid ...>
    ...
    <Toolbar>
        <Item location='before'>
            <Button
              text='My button'
              width='120'
              onClick={this.onClickHandler} />
        </Item>
        <Item name='columnChooserButton' />
    </Toolbar>        
    ...
</DataGrid>

Vue

<DxDataGrid ...>
    ...
    <DxToolbar>
        <DxItem location="before">
            <DxButton
                text="My button"
                width="120"
                @click="onClickHandler"
            />
        </DxItem>
        <DxItem
            name="columnChooserButton"
        />
    </DxToolbar>        
    ...
</DxDataGrid>

If you need a better solution to customize the whole toolbar, you can share your usage scenario in the comments and we will consider them for future customization API enhancements.

Try It

Live Sandbox

jQuery
React
Vue

We need Your Feedback

Take a Quick Poll

Do the new toolbar option meet your needs?

[jakehockey10]

Looking forward to this! Thank you!

[softboy99]

+1

[Lonli-Lokli]

Just FYI, in React demo

1. onToolbarPreparing={this.onToolbarPreparing} exists but handler is not defined
2. App is broken on Collapse All button click

[NickMitrokhin]

Thank you for pointing out these issues. We updated the example.

[reezan]

is this available on 21.6?

[NickMitrokhin]

Hi @reezan,

This feature will be available only in v21.2.

[alasoft]

I have a detected a possible problem with new dxDataGrid toolbar implementation, can I comment that here ?

Robert

[onebalaban]

@alasoft sure

[Alyar666]

These features are now available in the v21.2 release. I'm closing this thread. In the case of bugs or questions, feel free to create a new ticket in our Support Center.