Extensions Overview

  • 6 minutes to read

You can access extensions to customize the HTML JavaScript Dashboard. The extension is an independent JavaScript module/class that adds specific functionality to the control. For example, the DashboardExportExtension enables users to export the dashboard's data, the DashboardParameterDialogExtension adds dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox.

This topic explains how to access extensions, customize them, or 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. Use the BeforeRender event to configure the underlying part for wrappers (Web Forms, MVC, and ASP.NET Core controls). Refer to the following topics on how to obtain the DashboardControl:

For the HTML JavaScript control, configure the control before you call the render method:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        // Here you configure the control's options.
    });    
    // Here you can customize a control.

    dashboardControl.render();
}
NOTE

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

Add or Remove Existing Extensions

To access all the enabled extensions, use the DashboardControl.extensions property that returns an array of objects. 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:

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

Visual Components Customization

TIP

See the DevExpress.Dashboard.Designer module to find all available extensions.

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("dashboard-export");
}

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:

function onBeforeRender(sender) {
    // ...
    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 to remove the New... command from the dashboard menu (ToolboxExtension):

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

Example: How to Add Save As and Delete Functionality to the ASP.NET Core Dashboard

This example demonstrates how to add the "Save As" and "Delete" menu items to the Web Dashboard's UI by implementing the corresponding custom extensions:

  • The "Save As" menu item allows end-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.

wdd-custom-extension-save-as.png

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using NetCoreWebApplication.Models;
using NetCoreWebApplication.Storages;

namespace NetCoreWebApplication.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult About()
        {
            ViewData["Message"] = "Your application description page.";

            return View();
        }

        public IActionResult Contact()
        {
            ViewData["Message"] = "Your contact page.";

            return View();
        }

        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }

        public IActionResult DeleteDashboard(string DashboardID) {
            CustomDashboardFileStorage newDashboardStorage = new CustomDashboardFileStorage("App_Data\\Dashboards");
            newDashboardStorage.DeleteDashboard(DashboardID);
            return new EmptyResult();
        }
    }
}
See Also