Modify Extensions

• Jan 25, 2021
• 2 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 the dashboard’s data, the DashboardParameterDialogExtension adds dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox.

Specify Extension Options

You can use the extensions property to access registered extension settings. The code below changes the DataInspectorExtension options to enable the Data Inspector:

app.component.html

<div class="content">
  <dx-dashboard-control 
    endpoint='http://localhost:5000/api/dashboard'>
    <dxo-extensions>
        <dxo-data-inspector
          allowInspectAggregatedData="true"
          allowInspectRawData="true"
        >
        </dxo-data-inspector>
    </dxo-extensions>
  </dx-dashboard-control>
</div>

Remove an Extension

To remove the registered extension, call the DashboardControl.unregisterExtension method and pass the extension’s unique name as a parameter. The following code unregisters the CreateDashboardExtension and removes the ‘New…’ item from the dashboard menu:

app.component.ts

onBeforeRender(e){
  let dashboardControl = e.component;
  dashboardControl.unregisterExtension('createDashboard');
}

Register a New Extension

Import the extension module. Register an extension in the beforeRender event. Use the e.component property to get the dashboard control instance. Pass the extension instance as the control’s registerExtension method parameter.

The code below registers the imported DashboardPanelExtension:

app.component.ts

import { Component } from "@angular/core";
import { DashboardPanelExtension } from 'devexpress-dashboard/common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    onBeforeRender(e){
        let dashboardControl = e.component;
        dashboardControl.registerExtension(new DashboardPanelExtension(dashboardControl)); 
    }
}

app.component.html

<dx-dashboard-control 
    style="display: block;width:100%;height:800px;" 
    endpoint='https://demos.devexpress.com/services/dashboard/api'
    workingMode="Designer"
    (onBeforeRender) = "onBeforeRender($event)"        
>
</dx-dashboard-control>

More Examples

The following topic describes how to register the TextBoxItemEditorExtension: Enable Text Editor Functionality

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.

Tip

Documentation:

• Extensions Overview
• UI Elements and Customization