Toolbar
Documentation
The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
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',
text: '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.1.0/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/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.android5.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.ios7.default.css" />
<link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.win10.black.css" />
<link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.win10.white.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/18.2.7/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
}];