ASPxClientDashboard.DashboardTitleToolbarUpdated Event
Allows you to customize a dashboard title (for instance, add custom buttons, menus, etc.).
Namespace: DevExpress.DashboardWeb.Scripts
Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.Scripts.dll
Declaration
public event ASPxClientDashboardTitleToolbarUpdatedEventHandler DashboardTitleToolbarUpdated
Event Data
The DashboardTitleToolbarUpdated event's data class is ASPxClientDashboardTitleToolbarUpdatedEventArgs. The following properties provide information specific to this event:
Property | Description |
---|---|
Options | Provides access to dashboard title options. |
Remarks
You can handle the DashboardTitleToolbarUpdated event to customize the dashboard’s title. For instance, you can add custom command buttons, create additional menus, add static texts, etc. The DashboardTitleToolbarOptions class contains options used to customize a dashboard title’s elements (the ViewerToolbarItem objects).
The following code snippet shows how to add a custom button with a drop-down menu to the dashboard’s title. This button belongs to the actionItems collection and is displayed on the right (like the Export To and Parameters buttons).
function onDashboardTitleToolbarUpdated(s, e) {
e.Options.actionItems.push({
text: 'Custom Menu',
type: "menu",
menu: {
type: 'list',
items: ['first', 'second', 'third'],
selectionMode: 'single',
itemClick: function () {
// ...
}
},
})
}
Example
The code snippet below shows how to add a custom command button to a dashboard title by handling ASPxClientDashboard.DashboardTitleToolbarUpdated
. In this example, a custom ‘Refresh’ button with the specified SVG icon allows end-users to refresh the entire dashboard. Clicking this button calls the ASPxClientDashboard.Refresh method.
var refreshIcon = '<svg id="refreshIcon" ... /></svg>';
function onBeforeRender(s, e) {
DevExpress.Dashboard.ResourceManager.registerIcon(refreshIcon);
// ...
}
function onDashboardTitleToolbarUpdated(s, e) {
e.Options.actionItems.unshift({
type: "button",
icon: "refreshIcon",
hint: "Refresh Dashboard",
click: function (element) {
clientDashboardDesigner1.Refresh();
}
});
}