All docs
V21.1
21.2 (EAP/Beta)
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Manage Extensions in React

  • 3 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.

Specify Extension Options

You can use the extensions property to access registered extension settings. Import the Extensions module and the module that corresponds to the extension you want to configure. The code changes the DataInspectorExtension options to enable the Data Inspector:

import DashboardControl, { Extensions, DataInspector } from 'devexpress-dashboard-react';

function App() {
    return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardControl style={{ height: '90%' }} 
                endpoint="http://localhost:5000/api/dashboard">
                <Extensions>
                    <DataInspector 
                    allowInspectAggregatedData="true"
                    allowInspectRawData="true"/>
                </Extensions>
            </DashboardControl>
        </div>
    );
};

Remove an Extension

To remove the registered extension, handle the onBeforeRender event and get the e.component property to get the DashboardControl instance. Call the DashboardControl.unregisterExtension method and pass the extension unique name as a parameter. The following code unregisters the CreateDashboardExtension and removes the ‘New…’ item from the dashboard menu:

import DashboardControl from 'devexpress-dashboard-react';

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

function App() {
    return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardControl style={{ height: '90%' }} 
                endpoint="https://demos.devexpress.com/services/dashboard/api"
                workingMode="Designer"
                onBeforeRender = { onBeforeRender }
            ></DashboardControl>
        </div>
    );
};

Register a New Extension

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

The code below registers the imported DashboardPanelExtension and the HelloWorld custom item from the external HelloWorld.js file:

import DashboardControl from 'devexpress-dashboard-react';
import {DashboardPanelExtension} from 'devexpress-dashboard/common';
import HelloWorldItem from './HelloWorld';

function onBeforeRender(e) { 
    var dashboardControl = e.component;
    dashboardControl.registerExtension(new DashboardPanelExtension(dashboardControl));
    dashboardControl.registerExtension(new HelloWorldItem(dashboardControl));
}

function App() {
    return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardControl style={{ height: '90%' }} 
                endpoint="https://demos.devexpress.com/services/dashboard/api"
                workingMode="Designer"
                onBeforeRender = { onBeforeRender }
            ></DashboardControl>
        </div>
    );
};

export default App;

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.