DashboardToolbarItem Class

A toolbar item of a specified dashboard toolbar group.

Declaration

export class DashboardToolbarItem

Remarks

Create a new DashboardToolbarItem class instance and pass it with a group name to the addToolbarItem property to add a new item to the specified Toolbar‘s group:

var toolbarItem = new DevExpress.Dashboard.Designer.DashboardToolbarItem('toolbarItem1', function () { /* ... */ }, "toolbox-icon");
dashboardControl.findExtension('toolbox').addToolbarItem('undoRedo', toolbarItem);

To obtain a list of dashboard toolbar items in a specified group, get access to the ToolboxExtension extension and use the items method.

var toolbarItems = dashboardControl.findExtension('toolbox').toolbarGroups()[0].items();

constructor(name, click)

Initializes a new instance of the DashboardToolbarItem class.

Declaration

constructor(
    name: string,
    click: (itemTypeName: string) => void,
    icon?: string,
    title?: string
)

Parameters

Name	Type	Description
name	string	A toolbar item’s unique name.
click	(itemTypeName: string) => void	A function that is executed when a click occurs.
icon	string	An icon in the SVG format that is displayed in the Toolbox.
title	string	A toolbar item’s title.

Properties

click Property

Specifies a custom function that is invoked when a click occurs.

Declaration

click: (itemTypeName: string) => void

Property Value

Type	Description
(itemTypeName: string) => void	A function that is executed when a click occurs.

disabled Property

Specifies whether a toolbar item should be disabled.

Declaration

disabled: ko.Subscribable<boolean>

Property Value

Type	Description
Subscribable<boolean>	true, if a toolbar item is disabled; otherwise, false.

icon Property

Specifies the icon of the dashboard toolbar item.

Declaration

icon: string

Property Value

Type	Description
string	A string value that is the icon id from the SVG definition.

Remarks

Web Dashboard supports icons in the SVG format. To provide an icon for the toolbox element, add the SVG definition onto the page and assign the id value from the definition to the icon property.

See Predefined Colors for information on which color constants you can use to natively embed an icon in the Web Dashboard application.

The recommended icon size is 24 x 24 px.

name Property

Specifies the unique name of the dashboard toolbar item.

Declaration

name: string

Property Value

Type	Description
string	A string value that is a unique toolbar item name.

Remarks

Use the name property value to address the toolbar item.

template Property

Specifies a knockout extension template.

Declaration

template: string

Property Value

Type	Description
string	A string value that is an id of the knockout template.

Remarks

The code sample below shows you how to create a simple template for the toolbar. This template has a “dx-extension-button” id and consists of a button.

<script type="text/html" id="dx-extension-button">
    <div class='dx-viewer-button' data-bind="click: click, text: 'Edit'"></div>
</script>

To use this template for a dashboard toolbar, assign the id of the template to the template property.

To learn more about knockout templates, refer to Knockout Documentation.

title Property

Specifies a dashboard toolbar item title.

Declaration

title: string

Property Value

Type	Description
string	A string value that is a dashboard toolbar item title.