Dashboard Title
- 4 minutes to read
The Dashboard Title is located at the top of the dashboard surface and can contain static text, svg images, and command buttons. These elements are called toolbar items:
- Title Settings
- Customization
- Example 1: Add a Toolbar Item
- Example 2: Change a Toolbar Item
- Example 3: Remove a Toolbar Item
Title Settings
To change title settings, invoke the dashboard menu and open the Title page.
Here you can specify the following options.
Option | Description |
---|---|
Text | Specifies the dashboard title text. |
Visible | Specifies whether the dashboard title is visible. |
Alignment | Specifies the alignment of the dashboard title. |
Include Master Filter | Specifies whether to show the state of master filter items in the dashboard title. When an end-user hovers over the filter icon (), all master filters applied to the dashboard are displayed in the invoked popup. |
Image | Allows you to specify the image displayed within the dashboard title. |
The dashboard title can contain command buttons.
Command Button | Description |
---|---|
Export To | Allows end-users to export the dashboard. To learn more about exporting, see Exporting. |
Parameters | Allows end-users to modify dashboard parameter values. To learn more about parameters, see Parameters. |
Customization
The Web Dashboard allows customizing the dashboard item caption and dashboard title. For instance, you can add custom command buttons, create additional menus, add static texts, etc. Use the DashboardTitleToolbarOptions class to get access to a specific toolbar item’s collection in the dashboard title (like command buttons or static text). The ViewerToolbarItem object represents a toolbar item.
Use the following members to customize the dashboard title:
Event | Description |
---|---|
Allows you to customize a dashboard title (for instance, add custom buttons, menus, etc.). | |
DashboardViewerApiOptionBuilder.OnDashboardTitleToolbarUpdated | Specifies the JavaScript function (or its name) executed before the dashboard title toolbar is updated. |
DashboardControlClientSideEvents.DashboardTitleToolbarUpdated | Gets or sets the name of the JavaScript function or the entire code which will handle the client ASPxClientDashboard.DashboardTitleToolbarUpdated event. |
Specifies a handler for the event occurring before the dashboard title toolbar is updated. |
Example 1: Add a Toolbar Item
The following example shows how to add a toolbar item to the dashboard title. The code snippet below creates a custom button with a popup menu. The DashboardTitleToolbarUpdated event is used to customize the dashboard title. The button belongs to the actionItems collection and is displayed on the right (like the Export To and Parameters buttons).
The image below shows the result:
extensions: {
'viewer-api': {
onDashboardTitleToolbarUpdated: function (e) {
e.options.actionItems.push({
icon: 'grayTriangle',
type: "menu",
menu: {
title: 'Custom Menu',
type: 'list',
items: ['First Item', 'Second Item', 'Third Item'],
selectionMode: 'single',
itemClick: function (itemData, itemElement, index) {
alert(itemData.toString());
}
}
})
},
}
}
Example 2: Change a Toolbar Item
The following example shows how to change the specific toolbar item. The code snippet below changes a dashboard title:
extensions: {
'viewer-api': {
onDashboardTitleToolbarUpdated: function (e) {
var caption = e.options.contentItems.filter(function(item) {
return item.name === 'dashboard-title'
});
if(caption.length > 0) {
caption[0].text = 'Sales Overview';
}
}
}
}
Example 3: Remove a Toolbar Item
The following example shows how to delete a specific element from the toolbar items collection. The code snippet below removes the ‘Export To’ button from the dashboard title:
extensions: {
'viewer-api': {
onDashboardTitleToolbarUpdated: function (e) {
e.options.actionItems = e.options.actionItems.filter(function(item) {
return item.name !== 'export-menu'
});
}
}
}
}
See Client-Side API Overview to learn more about available client-side customization capabilities.
Refer to the Array documentation for information on how to manage the collection of toolbar items.