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
Public Event DashboardTitleToolbarUpdated As ASPxClientDashboardTitleToolbarUpdatedEventHandler

Event Data

The DashboardTitleToolbarUpdated event handler receives an argument of the ASPxClientDashboardTitleToolbarUpdatedEventArgs type. 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 () {
                // ...
            }
        },
    })
}

Examples

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();
        }
    });
}
See Also