Extensions Overview

• Oct 21, 2022
• 4 minutes to read

You can access extensions to customize the Web Dashboard control. The extension is an independent JavaScript module/class that adds specific functionality to the control. For example, the DashboardExportExtension enables users to export dashboard data, the DashboardParameterDialogExtension manages dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox. Each object implements the IExtension interface.

View the DevExpress.Dashboard.Designer module to find extensions used in the Web Dashboard when it operates as a designer. The DevExpress.Dashboard contains extensions used both in Designer and Viewer modes. You can use the DashboardControl.extensions property to get an array of registered extensions you can customize.

This topic explains how to access extensions, customize them, and create new extensions.

Get Underlying DashboardControl

You can customize the Web Dashboard before the underlying control is rendered. For this, you need to get access to the DashboardControl instance.

ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms

Use the BeforeRender event to configure the underlying control:

• ASP.NET Core
• ASP.NET MVC
• ASP.NET Web Forms

Angular, React, Vue Components

Handle the onBeforeRender event and get the e.component property to get the DashboardControl instance:

• Manage Extensions in Angular
• Manage Extensions in React
• Manage Extensions in Vue

Blazor

Configure the underlying DashboardControl instance: JavaScript Customization of Dashboard Component.

JavaScript Applications

Configure the control before you call the render method: Manage Extensions in the JavaScript Dashboard Control.

Note

The dashboardControl variable in the examples below is the obtained DashboardControl instance.

Add or Remove Existing Extensions

To access all enabled extensions, use the DashboardControl.extensions property that returns an array of registered extensions. Each object implements the IExtension interface.

For example, the ViewerApiExtension class is used to customize the Web Dashboard’s visual components. The image below shows a custom button in the dashboard title:

You can modify the following visual components with the ViewerApiExtension’s events:

1. Dashboard menu
2. Toolbox
3. Toolbar
4. Dashboard title
5. Dashboard item caption
6. Dashboard item menu

View the DevExpress.Dashboard.Designer module to find extensions used in the Web Dashboard when it operates as a designer. The DevExpress.Dashboard contains extensions that are used both in Designer and Viewer modes.

Each extension exposes the IExtension.name property, which returns an extension’s unique name. Use this name to access the extension.

To disable an extension, pass its name (IExtension.name) to the DashboardControl.unregisterExtension method. The code below shows how to disable the Web Dashboard’s export functionality:

function onBeforeRender(sender) {
    // ...
    dashboardControl.unregisterExtension("dashboardExport");
}

Note that some extensions (for instance, DashboardPanelExtension) are disabled. The code below shows how to use the DashboardControl.registerExtension method to enable the Dashboard Panel:

// The dashboardControl variable is the obtained DashboardControl instance.
dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));

Customize Existing Extension

To configure the registered extension, use the DashboardControl.findExtension method to obtain its instance and pass the IExtension.name property value as a method parameter.

The code sample below demonstrates how to use the ToolboxExtension.removeMenuItem method to remove the New… command from the dashboard menu (ToolboxExtension):

function onBeforeRender(sender) {
    // ...
    var toolboxExtension = dashboardControl.findExtension("toolbox");
    toolboxExtension.removeMenuItem("create-dashboard");
}

Register a New Extension

See the following topics for information on how to register a new extension depending on the used platform:

• Manage Extensions in ASP.NET Core
• Manage Extensions in ASP.NET MVC
• Manage Extensions in ASP.NET Web Forms
• Manage Extensions in Angular
• Manage Extensions in React
• Manage Extensions in Vue
• Manage Extensions in the JavaScript Dashboard Control
• JavaScript Customization of Dashboard Component (BLazor)

Example: How to Add the Save As and Delete Functionality

This example shows how to implement the custom extensions that add the Save As and Delete menu items to the Web Dashboard’s UI:

• The Save As menu item allows users to save the current dashboard with a new name.
• The Delete menu item deletes the opened dashboard from the dashboard storage.

The image below shows the result of the extensions implementation:

Download the example based on the platform:

View Example: ASP.NET Core View Example: ASP.NET MVC View Example: ASP.NET Web Forms

Example: How to Create Custom Items

In addition to built-in dashboard items, you can implement and embed custom items into the Web Dashboard. A custom item is a JavaScript extension that supports data shaping, interactivity, export, and other item features.

The example shows how to create custom items from the step-by-step Custom Item tutorials.

Download the example based on the platform:

View Example: ASP.NET Core Dashboard View Example: Dashboard for React