Manage Extensions in ASP.NET Core
- 5 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. Each extension implements the IExtension interface. For example, the DashboardExportExtension enables users to export dashboard data, the DashboardParameterDialogExtension manages dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox. If you disable the extension, the functionality this extension provides is unavailable.
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.
Configure an Extension
Set the Extension Option’s Initial Values
Call the DashboardBuilder.Extensions method to get access to the DashboardExtensionsOptionBuilder and configure initial settings of the registered extensions.
The code below calls the DataInspectorOptionBuilder.AllowInspectAggregatedData and DashboardExportOptionBuilder.AllowExportDashboard methods:
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
@(Html.DevExpress().Dashboard("dashboardControl1")
.ControllerName("DefaultDashboard")
.Width("100%")
.Height("100%")
.Extensions(ext => {
ext.DataInspector(opt => {
opt.AllowInspectAggregatedData(true);
});
ext.DashboardExport(opt => {
opt.AllowExportDashboard(true);
});
});
)
</div>
Customize the Extension’s Options at Runtime
Use the DashboardControl‘s client API to customize the extension options at runtime.
Call the DashboardControl.option(name, value) method and pass the extension option with its new value to update the option at runtime. Follow the extensions.extensionName.optionName pattern when you pass the option name to the method’s name parameter. The available extension’s options you can find in the ...ExtensionOptions types (for example, DataInspectorExtensionOptions).
The following code shows how to enable the Data Inspector depending on the dashboardId:
function onDashboardInitializing(args) {
let dashboardControl = args.component;
let dashboardId = args.dashboardId;
// Enables the `allowInspectRawData` option only for the `customers` dashboard:
if (dashboardId == "customers") {
dashboardControl.option("extensions.dataInspector.allowInspectRawData", true);
} else {
dashboardControl.option("extensions.dataInspector.allowInspectRawData", false);
}
}
You cannot call the option method to change values of the following properties at runtime:
- endpoint
- initialDashboardId
- loadDefaultDashboard
- showConfirmationOnBrowserClosing
- useCardLegacyLayout
- mobileLayoutEnabled
These properties are set once before the control is rendered.
Handle the Extension’s Events
Find the extension by its name and pass the extension’s event handler name to the extension’s on/off methods to subscribe/unsubscribe on the the extension events. Refer to the ...ExtensionEvents types to get available event handlers for the extension (for example, ViewerApiExtensionEvents).
In this example, a new button is added to the dashboard item caption and displays the item’s componentName when you click on this button:
function onBeforeRender(dashboardControl) {
let viewerApiExtension = dashboardControl.findExtension("viewerApi");
if (viewerApiExtension) {
// Pass the `itemCaptionToolbarUpdated` event handler to the `ViewerApiExtension.on` method call.
viewerApiExtension.on('itemCaptionToolbarUpdated', customizeCaptionToolbar);
}
}
function customizeCaptionToolbar(e) {
e.options.actionItems.push({
type: "button",
text: "Name",
hint: "Show Component Name",
click: function () {
DevExpress.ui.notify("The component name of this dashboard item is " + e.itemName, "info");
}
});
}
An equivalent way is to pass the extension handler to the DashboardControl.option(name, value) method call. Follow the extensions.extensionName.eventHandlerName pattern when you pass the event handler to the method’s name parameter. You can find available event handlers for the extension in the ...ExtensionOptions types (for example, DashboardExportExtensionOptions).
This example adds the same button as in the example above:
function onBeforeRender(dashboardControl) {
// Pass the `extensions.viewerApi.onItemCaptionToolbarUpdated` event handler to the `DashboardControl.option` method call.
dashboardControl.option("extensions.viewerApi.onItemCaptionToolbarUpdated", customizeCaptionToolbar);
}
function customizeCaptionToolbar(e) {
e.options.actionItems.push({
type: "button",
text: "Name",
hint: "Show Component Name",
click: function () {
DevExpress.ui.notify("The component name of this dashboard item is " + e.itemName, "info");
}
});
}
Note
See the following topic for more information about the DashboardControl: DashboardControl’s Client-Side API Overview.
Remove an Extension
You can unregister the extension to remove specific functionality from the Web Dashboard. For example, you can remove the export functionality if you unregister the DashboardExportExtension.
To remove the registered extension, handle the DashboardBuilder.OnBeforeRender event. The sender is 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: