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.
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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
$scope.totalCount = getGroupCount('CustomerStoreState');
$scope.expanded = true;
$scope.dataGridOptions = {
dataSource: orders,
keyExpr: 'ID',
showBorders: true,
bindingOptions: {
'grouping.autoExpandAll': 'expanded',
},
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',
}],
onInitialized(e) {
$scope.dataGrid = e.component;
},
toolbar: {
items: [
{
location: 'before',
template: 'totalGroupCount',
}, {
location: 'before',
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) {
$scope.dataGrid.clearGrouping();
$scope.dataGrid.columnOption(e.value, 'groupIndex', 0);
$scope.totalCount = getGroupCount(e.value);
},
},
}, {
location: 'before',
widget: 'dxButton',
options: {
text: 'Collapse All',
width: 136,
onClick(e) {
$scope.expanded = !$scope.expanded;
e.component.option({
text: $scope.expanded ? 'Collapse All' : 'Expand All',
});
},
},
}, {
location: 'after',
widget: 'dxButton',
options: {
icon: 'refresh',
onClick() {
$scope.dataGrid.refresh();
},
},
},
'columnChooserButton',
],
},
};
function getGroupCount(groupField) {
return DevExpress.data.query(orders)
.groupBy(groupField)
.toArray().length;
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.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/23.1.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></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" ng-app="DemoApp" ng-controller="DemoController">
<div id="gridContainer" dx-data-grid="dataGridOptions">
<div data-options="dxTemplate:{ name:'totalGroupCount' }">
<div class="informer">
<h2 class="count">{{totalCount}}</h2>
<span class="name">Total Count</span>
</div>
</div>
</div>
</div>
</body>
</html>
#gridContainer .dx-datagrid-header-panel {
padding: 0;
background-color: rgba(85, 149, 222, 0.6);
}
#gridContainer .dx-datagrid-header-panel .dx-toolbar {
margin: 0;
padding-right: 20px;
background-color: transparent;
}
#gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
height: 70px;
}
#gridContainer .dx-datagrid-header-panel .dx-toolbar-before .dx-toolbar-item:not(:first-child) {
background-color: rgba(103, 171, 255, 0.6);
}
#gridContainer .dx-datagrid-header-panel .dx-toolbar-before .dx-toolbar-item:last-child {
padding-right: 10px;
}
#gridContainer .dx-datagrid-header-panel .dx-selectbox {
margin: auto 10px;
}
#gridContainer .dx-datagrid-header-panel .dx-button {
margin: auto 0;
}
#gridContainer .informer {
height: 70px;
width: 130px;
text-align: center;
color: #fff;
}
#gridContainer .count {
padding-top: 15px;
line-height: 27px;
font-size: 28px;
margin: 0;
}
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',
}];