Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Toolbar
Documentation
The Toolbar is a UI component containing items that usually manage screen content. Those items can be plain text or widgets.
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.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var productsStore = new DevExpress.data.DataSource(products);
$scope.toolbarOptions = {
items: [{
location: 'before',
widget: 'dxButton',
options: {
type: 'back',
onClick: function() {
DevExpress.ui.notify("Back button has been clicked!");
}
}
}, {
location: 'before',
widget: 'dxButton',
locateInMenu: 'auto',
options: {
icon: "refresh",
onClick: function() {
DevExpress.ui.notify("Refresh button has been clicked!");
}
}
}, {
location: 'center',
locateInMenu: 'never',
template: function() {
return $("<div class='toolbar-label'><b>Tom's Club</b> Products</div>");
}
}, {
location: 'after',
widget: 'dxSelectBox',
locateInMenu: 'auto',
options: {
width: 140,
items: productTypes,
valueExpr: "id",
displayExpr: "text",
value: productTypes[0].id,
onValueChanged: function(args) {
if(args.value > 1) {
productsStore.filter("type" , "=", args.value);
} else {
productsStore.filter(null);
}
productsStore.load();
}
}
}, {
location: 'after',
widget: 'dxButton',
locateInMenu: 'auto',
options: {
icon: "plus",
onClick: function() {
DevExpress.ui.notify("Add button has been clicked!");
}
}
}, {
locateInMenu: 'always',
text: 'Save',
onClick: function() {
DevExpress.ui.notify("Save option has been clicked!");
}
}, {
locateInMenu: 'always',
text: 'Print',
onClick: function() {
DevExpress.ui.notify("Print option has been clicked!");
}
}, {
locateInMenu: 'always',
text: 'Settings',
onClick: function() {
DevExpress.ui.notify("Settings option has been clicked!");
}
}
]
};
$scope.listOptions = {
dataSource: productsStore
};
});
<!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/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/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/20.2.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 dx-toolbar="toolbarOptions"></div>
<div id="products" dx-list="listOptions"></div>
</div>
</body>
</html>
.toolbar-label,
.toolbar-label > b {
font-size: 16px;
}
#products {
margin-top: 10px;
}
var productTypes = [{
id: 1,
text: "All"
}, {
id: 2,
text: "Video Players"
}, {
id: 3,
text: "Televisions"
}, {
id: 4,
text: "Monitors"
}, {
id: 5,
text: "Projectors"
}];
var products = [{
text: "HD Video Player",
type: 2
}, {
text: "SuperHD Video Player",
type: 2
}, {
text: "SuperLCD 42",
type: 3
}, {
text: "SuperLED 42",
type: 3
}, {
text: "SuperLED 50",
type: 3
}, {
text: "SuperLCD 55",
type: 3
}, {
text: "DesktopLCD 19",
type: 4
}, {
text: "DesktopLCD 21",
type: 4
}, {
text: "DesktopLED 21",
type: 4
}, {
text: "Projector Plus",
type: 5
}, {
text: "Projector PlusHD",
type: 5
}];