JavaScript/jQuery 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.
- $(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.
- $(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.
- 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.