DesignerToolbarItem Interface
An item in the Designer Toolbar.
#Declaration
export interface DesignerToolbarItem extends dxToolbarItem
#Remarks
The Designer Toolbar contains a set of predefined toolbar items and allows you to add custom toolbar items.
Handle the DesignerToolbarExtensionOptions.onPreparing event and modify the e.items collection:
- Access predefined toolbar items by name to customize or remove them.
- Add custom commands. More information: items.
To set the location of items on the toolbar, use the location
property. More information: Specify Item Location.
You can use built-in icons for those DevExtreme UI components that have an icon
property. Pick any icon and assign its name to the UI element’s icon
property.
To modify the Designer Toolbar’s elements, handle the DesignerToolbarExtensionOptions.onPreparing event to customize the toolbar before it is rendered:
function customizeDesignerToolbar(e) {
let dashboardControl = e.component;
// Add a "Reload" button.
e.items.unshift({
widget: 'dxButton',
cssClass: 'dx-refresh-custom-button',
options: {
type: 'default',
icon: 'pulldown'
},
location: 'before',
onClick: () => {
dashboardControl.refresh();
}
},
{
name: "separator",
location: 'before'
});
// Add a "Viewer" button.
e.items.push({
widget: 'dxButton',
cssClass: 'dx-viewer-custom-button',
options: {
type: 'default',
text: 'Viewer'
},
location: 'after',
onClick: () => {
dashboardControl.switchToViewer();
}
});
// Remove the width editing UI elements.
e.items = e.items.filter(function (item) {
return ['widthLabel', 'widthButtonGroup', 'widthNumberBox', 'widthPixelLabel', 'widthSeparator'].indexOf(item.name) === -1
});
}
The image below shows the result:
Refer to the DevExtreme documentation for more information about toolbar configuration: Configuration.
#Properties
#name Property
Specifies a name of the Designer Toolbar item.
#Declaration
name?: string
#Property Value
Type | Description |
---|---|
string | A string that is a name of the Designer Toolbar item. |
#Remarks
The Designer Toolbar contains a set of predefined toolbar items. You can access them by name to customize or remove them:
Name | Description |
---|---|
undo |
A dx |
redo |
A dx |
undo |
A 1px vertical line that is located after redo . |
width |
A label in the width editing widgets. |
width |
A dx |
width |
A dx |
width |
A 1px vertical line that is used as a separator after width . |
height |
A label in the height editing widgets. |
height |
A dx |
height |
A dx |
height |
A 1px vertical line that is located after height . |
separator |
A 1px vertical line that you can use as a separator between toolbar items. |
The following code adds a separator to the end of the before
collection:
function customizeDesignerToolbar(e) {
e.items.push({
name: "separator",
location: 'before'
})
}