All docs
V21.1
21.2 (EAP/Beta)
21.1
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
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 ASP.NET Core

  • 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

Call the DashboardBuilder.Extensions method to get access to the DashboardExtensionsOptionBuilder and configure extension options.

You can also use the DashboardControl‘s API to manage the registered extension settings on the client. To access all the enabled extensions, use the DashboardControl.extensions property that returns an array of registered extensions.

Refer to the following topic for details and code samples: Client-Side API Overview for ASP.NET Core Dashboard.

Remove an Extension

To remove the registered extension, handle the BeforeRender event. Use the ASPxClientDashboard.GetDashboardControl method 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:

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Dashboard Web Application</title>
    <link href="css/site.min.css" rel="stylesheet" />

    <script type="text/javascript">
        function onBeforeRender(dashboardControl) {
            dashboardControl.unregisterExtension('createDashboard');
        }
    </script>
</head>
<body>
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
    @(Html.DevExpress().Dashboard("dashboardControl1")
        .Width("100%")
        .Height("100%")
        .OnBeforeRender("onBeforeRender")
    )
    </div>
    <script src="js/site.min.js"></script>
</body>
</html>

Register a New Extension

Add the extension script on the page after @Html.DevExpress().Dashboard and after scripts used by the Web Dashboard (the site.min.js file). Register an extension in the OnBeforeRender(String) event handler. Pass the extension instance as the DashboardControl.registerExtension method parameter.

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

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Dashboard Web Application</title>
    <link href="css/site.min.css" rel="stylesheet" />

    <script type="text/javascript">
        function onBeforeRender(dashboardControl) {
            dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
            dashboardControl.registerExtension(new HelloWorldCustomItem(dashboardControl));
        }
    </script>
</head>
<body>
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
    @(Html.DevExpress().Dashboard("dashboardControl1")
        .Width("100%")
        .Height("100%")
        .OnBeforeRender("onBeforeRender")
    )
    </div>
    <script src="js/site.min.js"></script>
    <script src="js/HelloWorldItem.js"></script>
</body>
</html>

More Examples

The following topic describes how to register the TextBoxItemEditorExtension that is disabled by default: Enable Text Editor 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:

View Example