Angular Data Grid - Toolbar Customization

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

NOTE

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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
<dx-data-grid
  id="gridContainer"  [dataSource]="orders"  keyExpr="ID"  [showBorders]="true">  <dxo-grouping [autoExpandAll]="expandAll"></dxo-grouping>  <dxo-column-chooser [enabled]="true"></dxo-column-chooser>  <dxo-load-panel [enabled]="true"></dxo-load-panel>​  <dxi-column dataField="OrderNumber" caption="Invoice Number"></dxi-column>  <dxi-column dataField="OrderDate"></dxi-column>  <dxi-column dataField="Employee"></dxi-column>  <dxi-column dataField="CustomerStoreCity" caption="City"></dxi-column>  <dxi-column    dataField="CustomerStoreState"    caption="State"    [groupIndex]="0"  ></dxi-column>  <dxi-column    dataField="SaleAmount"    alignment="right"    format="currency"  ></dxi-column>​  <dxo-toolbar>    <dxi-item location="before">      <div *dxTemplate class="informer">        <div class="count">{{ totalCount }}</div>        <span>Total Count</span>      </div>    </dxi-item>    <dxi-item location="before" locateInMenu="auto">      <div *dxTemplate>        <dx-select-box          width="225"          [items]="groupingValues"          [inputAttr]="{ 'aria-label': 'Value' }"          displayExpr="text"          valueExpr="value"          value="CustomerStoreState"          (onValueChanged)="toggleGroupColumn($event)"        >        </dx-select-box>      </div>    </dxi-item>    <dxi-item      location="before"      locateInMenu="auto"      widget="dxButton"      [options]="toggleButtonOptions"    >    </dxi-item>    <dxi-item      location="after"      locateInMenu="auto"      showText="inMenu"      widget="dxButton"      [options]="refreshButtonOptions"    >    </dxi-item>    <dxi-item name="columnChooserButton"></dxi-item>  </dxo-toolbar></dx-data-grid>​

xxxxxxxxxx
 
import {
  NgModule, Component, ViewChild, enableProdMode,} from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import {  DxDataGridModule,  DxDataGridComponent,  DxTemplateModule,  DxButtonModule,} from 'devextreme-angular';import { DxButtonTypes } from 'devextreme-angular/ui/button';import query from 'devextreme/data/query';import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';import { Service, Order } from './app.service';​if (!/localhost/.test(document.location.host)) {  enableProdMode();}​let modulePrefix = '';// @ts-ignoreif (window && window.config?.packageConfigPaths) {  modulePrefix = '/app';}​@Component({  selector: 'demo-app',  templateUrl: `app/app.component.html`,  styleUrls: [`app/app.component.css`],  providers: [Service],})export class AppComponent {  @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;​  orders: Order[];​  totalCount: number;​  expandAll = true;​  groupingValues = [{    value: 'CustomerStoreState',    text: 'Grouping by State',  }, {    value: 'Employee',    text: 'Grouping by Employee',  }];​  refreshButtonOptions: DxButtonTypes.Properties = {    icon: 'refresh',    text: 'Refresh',    onClick: () => {      this.dataGrid.instance.refresh();    },  };​  toggleButtonOptions: DxButtonTypes.Properties = {    text: this.expandAll ? 'Collapse All' : 'Expand All',    width: 136,    onClick: () => {      this.toggleExpandAll();      this.toggleButtonOptions = {        ...this.toggleButtonOptions,        text: this.expandAll ? 'Collapse All' : 'Expand All',      };    },  };​  constructor(service: Service) {    this.orders = service.getOrders();    this.totalCount = this.getGroupCount('CustomerStoreState');  }​  getGroupCount(groupField: string) {    return query(this.orders)      .groupBy(groupField)      .toArray().length;  }​  toggleGroupColumn(e: DxSelectBoxTypes.ValueChangedEvent) {    this.dataGrid.instance.clearGrouping();    this.dataGrid.instance.columnOption(e.value, 'groupIndex', 0);    this.totalCount = this.getGroupCount(e.value);  }​  toggleExpandAll() {    this.expandAll = !this.expandAll;  }}​@NgModule({  imports: [    BrowserModule,    DxDataGridModule,    DxTemplateModule,    DxSelectBoxModule,    DxButtonModule,  ],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule { }​platformBrowserDynamic().bootstrapModule(AppModule);​

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

xxxxxxxxxx
 
import { Injectable } from '@angular/core';
​export class Order {  ID: number;​  OrderNumber: number;​  OrderDate: Date;​  SaleAmount: number;​  Terms: string;​  TotalAmount: number;​  CustomerStoreState: string;​  CustomerStoreCity: string;​  Employee:string;}​const orders: Order[] = [{  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',}];​@Injectable()export class Service {  getOrders(): Order[] {    return orders;  }}​

xxxxxxxxxx
 
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/const componentNames = [  'accordion',  'action-sheet',  'autocomplete',  'bar-gauge',  'box',  'bullet',  'button-group',  'button',  'calendar',  'chart',  'chat',  'check-box',  'circular-gauge',  'color-box',  'context-menu',  'data-grid',  'date-box',  'date-range-box',  'defer-rendering',  'diagram',  'draggable',  'drawer',  'drop-down-box',  'drop-down-button',  'file-manager',  'file-uploader',  'filter-builder',  'form',  'funnel',  'gallery',  'gantt',  'html-editor',  'linear-gauge',  'list',  'load-indicator',  'load-panel',  'lookup',  'map',  'menu',  'multi-view',  'nested',  'number-box',  'pagination',  'pie-chart',  'pivot-grid-field-chooser',  'pivot-grid',  'polar-chart',  'popover',  'popup',  'progress-bar',  'radio-group',  'range-selector',  'range-slider',  'recurrence-editor',  'resizable',  'responsive-box',  'sankey',  'scheduler',  'scroll-view',  'select-box',  'slider',  'sortable',  'sparkline',  'speed-dial-action',  'splitter',  'switch',  'tab-panel',  'tabs',  'tag-box',  'text-area',  'text-box',  'tile-view',  'toast',  'toolbar',  'tooltip',  'tree-list',  'tree-map',  'tree-view',  'validation-group',  'validation-summary',  'validator',  'vector-map',];window.exports = window.exports || {};window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,  },  meta: {    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    '@angular/platform-browser-dynamic': {      'esModule': true,    },    '@angular/platform-browser': {      'esModule': true,    },    '@angular/core': {      'esModule': true,    },    '@angular/common': {      'esModule': true,    },    '@angular/common/http': {      'esModule': true,    },    '@angular/animations': {      'esModule': true,    },    '@angular/forms': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    /* @angular */    '@angular/compiler': 'bundles:@angular/compiler.umd.js',    '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js',    '@angular/core': 'bundles:@angular/core.umd.js',    '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js',    '@angular/common': 'bundles:@angular/common.umd.js',    '@angular/common/http': 'bundles:@angular/common-http.umd.js',    '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js',    '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js',    '@angular/forms': 'bundles:@angular/forms.umd.js',    /* devextreme */    'devextreme': 'npm:devextreme@24.2.5/cjs',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'devextreme/bundles/dx.all': 'npm:devextreme@24.2.5/bundles/dx.all.js',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.59',    /* devextreme-angular umd maps */    'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js',    'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js',    'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',    ...componentNames.reduce((acc, name) => {      acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;      acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`;      return acc;    }, {}),    'tslib': 'npm:tslib/tslib.js',    'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',    'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'app': {      main: './app.component.ts',      defaultExtension: 'ts',    },    'devextreme': {      defaultExtension: 'js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },    'rxjs': {      defaultExtension: 'js',    },    'rxjs/operators': {      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',    'npm:rxjs@7.5.3/package.json',    'npm:rxjs@7.5.3/operators/package.json',    'npm:devexpress-diagram@2.2.15/package.json',    'npm:devexpress-gantt@4.1.59/package.json',  ],};System.config(window.config);// System.import('@angular/compiler').catch(console.error.bind(console));​

xxxxxxxxxx
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <demo-app>Loading...</demo-app>    </div>  </body></html>​

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

Predefined Controls
Declare a toolbar item element and specify the name and properties that you want to customize. If a control does not need customization, include its name only. Ensure that items[] contain controls for all features that you enabled in your DataGrid. In this demo, we enable the columnChooser and add the "columnChooserButton" to the items[] array.
DevExtreme Components
Configure the desired DevExtreme component within a toolbar item element. 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 within a toolbar item. In this demo, the custom element displays the total group count.