JavaScript/jQuery Data Grid - Toolbar

The JavaScript DataGrid includes an integrated toolbar that displays predefined and custom controls. To add or remove toolbar items, declare the toolbar.items[] array.

If toolbar.items[] is specified, JavaScript DataGrid does not display controls missing from the array. Ensure this array includes controls for all enabled features.

Backend API

$(() => { const dataGrid = $('#gridContainer').dxDataGrid({ dataSource: orders, keyExpr: 'ID', showBorders: true, columnChooser: { enabled: true, }, loadPanel: { enabled: true, }, columns: [{ dataField: 'OrderNumber', caption: 'Invoice Number', }, 'OrderDate', 'Employee', { caption: 'City', dataField: 'CustomerStoreCity', }, { caption: 'State', groupIndex: 0, dataField: 'CustomerStoreState', }, { dataField: 'SaleAmount', alignment: 'right', format: 'currency', }], toolbar: { items: [ { location: 'before', template() { return $('<div>') .addClass('informer') .append( $('<div>') .addClass('count') .text(getGroupCount('CustomerStoreState')), $('<span>') .text('Total Count'), ); }, }, { location: 'before', locateInMenu: 'auto', widget: 'dxSelectBox', options: { width: 225, items: [{ value: 'CustomerStoreState', text: 'Grouping by State', }, { value: 'Employee', text: 'Grouping by Employee', }], displayExpr: 'text', valueExpr: 'value', value: 'CustomerStoreState', onValueChanged(e) { dataGrid.clearGrouping(); dataGrid.columnOption(e.value, 'groupIndex', 0); $('.informer .count').text(getGroupCount(e.value)); }, }, }, { location: 'before', locateInMenu: 'auto', widget: 'dxButton', options: { text: 'Collapse All', width: 136, onClick(e) { const expanding = e.component.option('text') === 'Expand All'; dataGrid.option('grouping.autoExpandAll', expanding); e.component.option('text', expanding ? 'Collapse All' : 'Expand All'); }, }, }, { location: 'after', locateInMenu: 'auto', showText: 'inMenu', widget: 'dxButton', options: { icon: 'refresh', text: 'Refresh', onClick() { dataGrid.refresh(); }, }, }, 'columnChooserButton', ], }, }).dxDataGrid('instance'); function getGroupCount(groupField) { return DevExpress.data.query(orders) .groupBy(groupField) .toArray().length; } });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.6"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>

#gridContainer .informer { display: grid; width: 120px; grid-template-columns: 100%; padding-right: 20px; text-align: center; } #gridContainer .count { font-size: 18px; font-weight: 500; } #gridContainer .dx-toolbar-items-container { min-height: 44px; }

const orders = [{ ID: 1, OrderNumber: 35703, OrderDate: new Date(2014, 3, 10), SaleAmount: 11800, Terms: '15 Days', TotalAmount: 12175, CustomerStoreState: 'California', CustomerStoreCity: 'Los Angeles', Employee: 'Harv Mudd', }, { ID: 4, OrderNumber: 35711, OrderDate: new Date(2014, 0, 12), SaleAmount: 16050, Terms: '15 Days', TotalAmount: 16550, CustomerStoreState: 'California', CustomerStoreCity: 'San Jose', Employee: 'Jim Packard', }, { ID: 5, OrderNumber: 35714, OrderDate: new Date(2014, 0, 22), SaleAmount: 14750, Terms: '15 Days', TotalAmount: 15250, CustomerStoreState: 'Nevada', CustomerStoreCity: 'Las Vegas', Employee: 'Harv Mudd', }, { ID: 7, OrderNumber: 35983, OrderDate: new Date(2014, 1, 7), SaleAmount: 3725, Terms: '15 Days', TotalAmount: 3850, CustomerStoreState: 'Colorado', CustomerStoreCity: 'Denver', Employee: 'Todd Hoffman', }, { ID: 9, OrderNumber: 36987, OrderDate: new Date(2014, 2, 11), SaleAmount: 14200, Terms: '15 Days', TotalAmount: 14800, CustomerStoreState: 'Utah', CustomerStoreCity: 'Salt Lake City', Employee: 'Clark Morgan', }, { ID: 11, OrderNumber: 38466, OrderDate: new Date(2014, 2, 1), SaleAmount: 7800, Terms: '15 Days', TotalAmount: 8200, CustomerStoreState: 'California', CustomerStoreCity: 'Los Angeles', Employee: 'Harv Mudd', }, { ID: 14, OrderNumber: 39420, OrderDate: new Date(2014, 1, 15), SaleAmount: 20500, Terms: '15 Days', TotalAmount: 9100, CustomerStoreState: 'California', CustomerStoreCity: 'San Jose', Employee: 'Jim Packard', }, { ID: 15, OrderNumber: 39874, OrderDate: new Date(2014, 1, 4), SaleAmount: 9050, Terms: '30 Days', TotalAmount: 19100, CustomerStoreState: 'Nevada', CustomerStoreCity: 'Las Vegas', Employee: 'Harv Mudd', }, { ID: 18, OrderNumber: 42847, OrderDate: new Date(2014, 1, 15), SaleAmount: 20400, Terms: '30 Days', TotalAmount: 20800, CustomerStoreState: 'Wyoming', CustomerStoreCity: 'Casper', Employee: 'Todd Hoffman', }, { ID: 19, OrderNumber: 43982, OrderDate: new Date(2014, 4, 29), SaleAmount: 6050, Terms: '30 Days', TotalAmount: 6250, CustomerStoreState: 'Utah', CustomerStoreCity: 'Salt Lake City', Employee: 'Clark Morgan', }, { ID: 29, OrderNumber: 56272, OrderDate: new Date(2014, 1, 6), SaleAmount: 15850, Terms: '30 Days', TotalAmount: 16350, CustomerStoreState: 'Utah', CustomerStoreCity: 'Salt Lake City', Employee: 'Clark Morgan', }, { ID: 30, OrderNumber: 57429, OrderDate: new Date(2013, 11, 31), SaleAmount: 11050, Terms: '30 Days', TotalAmount: 11400, CustomerStoreState: 'Arizona', CustomerStoreCity: 'Phoenix', Employee: 'Clark Morgan', }];

This demo illustrates how to add the following items to the toolbar:

Predefined Controls
Create an object and specify the name and properties that you want to customize. If a control does not need customization, include its name in the items[] array. Ensure that items[] contain controls for all features that you enabled in your JavaScript DataGrid. In this demo, we enable the columnChooser and add the "columnChooserButton" to the items[] array.
DevExtreme Components
Specify a widget that you want to add and its options. In this demo, we extended the toolbar's item collection with a Button and a SelectBox.
Custom Elements
Specify a template for your custom element. In this demo, the custom element displays the total group count.