const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
const productsStore = new DevExpress.data.DataSource(products);
$scope.toolbarOptions = {
items: [{
location: 'before',
widget: 'dxButton',
options: {
type: 'back',
onClick() {
DevExpress.ui.notify('Back button has been clicked!');
},
},
}, {
location: 'before',
widget: 'dxButton',
locateInMenu: 'auto',
options: {
icon: 'refresh',
onClick() {
DevExpress.ui.notify('Refresh button has been clicked!');
},
},
}, {
location: 'center',
locateInMenu: 'never',
template() {
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(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() {
DevExpress.ui.notify('Add button has been clicked!');
},
},
}, {
locateInMenu: 'always',
text: 'Save',
onClick() {
DevExpress.ui.notify('Save option has been clicked!');
},
}, {
locateInMenu: 'always',
text: 'Print',
onClick() {
DevExpress.ui.notify('Print option has been clicked!');
},
}, {
locateInMenu: 'always',
text: 'Settings',
onClick() {
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/22.2.3/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/22.2.3/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;
}
const productTypes = [{
id: 1,
text: 'All',
}, {
id: 2,
text: 'Video Players',
}, {
id: 3,
text: 'Televisions',
}, {
id: 4,
text: 'Monitors',
}, {
id: 5,
text: 'Projectors',
}];
const 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,
}];
