Angular Toolbar - Customize Item Appearance

For a minor customization of Toolbar items, you can define specific fields in item data objects. For example, the following code generates four toolbar items: the first is a UI component, the second is hidden, the third is disabled, the fourth is relocated.

JavaScript
HTML
  • $(function() {
  • $("#toolbarContainer").dxToolbar({
  • items: [{
  • widget: 'dxButton',
  • options: {
  • type: 'back',
  • text: 'Back'
  • },
  • location: 'before'
  • }, {
  • text: 'Change',
  • locateInMenu: 'always',
  • visible: false
  • }, {
  • text: 'Remove',
  • locateInMenu: 'always',
  • disabled: true
  • }, {
  • text: 'Products',
  • location: 'center'
  • }]
  • });
  • });
  • <div id="toolbarContainer"></div>

If you need a more flexible solution, define an itemTemplate and menuItemTemplate to customize toolbar items and commands in the overflow menu, respectively.

JavaScript
HTML
  • $(function() {
  • $("#toolbarContainer").dxToolbar({
  • items: toolbarItems,
  • itemTemplate: function(itemData, itemIndex, itemElement) {
  • itemElement.append("<b style='color: green;'>" + itemData.text + "</b>");
  • },
  • menuItemTemplate: function(itemData, itemIndex, itemElement) {
  • itemElement.append("<b style='font-style: italic;'>" + itemData.text + "</b>");
  • }
  • });
  • });
  • <div id="tabPanelContainer"></div>

You can also customize an individual toolbar item or menu command. For this purpose, declare a template for this item or command as a script and pass its id to the template or menuItemTemplate property, respectively.

JavaScript
HTML
  • var toolbarItems = [{
  • text: "Back",
  • location: "before",
  • template: $("#individualItemTemplate")
  • }, {
  • text: "Change",
  • locateInMenu: "always",
  • menuItemTemplate: $("#individualMenuItemTemplate")
  • },
  • // ...
  • ];
  • <script id="individualItemTemplate" type="text/html">
  • <!-- ... -->
  • </script>
  •  
  • <script id="individualMenuItemTemplate" type="text/html">
  • <!-- ... -->
  • </script>
See Also