The Dashboard Panel is a Web Dashboard extension that displays a list of available dashboards and lets you switch between the designer and viewer modes.
You can see the dashboard panel in action by visiting the DevExpress Web Dashboard Demo.
-
Download the latest version of the extension here.
-
Add the dist/dashboard-panel.css and dist/dashboard-panel.min.js files in your project.
-
Attach the download script (dashboard-panel.min.js) to the project inside the
<head>section onto the page containing Web Dashboard.
<head>
<script src="/dist/dashboard-panel.min.js"></script>
<!-- ... -->
</head>- Attach the download style sheet file (dashboard-panel.css) to the project.
<head>
<link rel="stylesheet" type="text/css" href="/dist/dashboard-panel.css" />
<!-- ... -->
</head>-
Add the
/dist/dashboard-panel.htmlfile content inside the<body>section. -
Handle the Web Dashboard's BeforeRender event to perform client-side customization of the Web Dashboard control before the control and its elements have been rendered.
<!-- For ASP.NET Web Forms -->
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" DashboardStorageFolder="~/App_Data/Dashboards">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>@* For ASP.NET MVC *@
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()- Register the custom item extension to add the Dashboard Panel to the Web Dashboard.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(new CustomExtensions.CustomDashboardPanelExtension(dashboardControl));
}The DashboardPanelExtension class contains the following public properties:
- DashboardPanelExtension.allowSwitchToDesigner property - Gets or sets whether you can switch into the designer mode. This property control the visibility of the Edit in Designer button.
- DashboardPanelExtension.name property - Gets a unique name of a Web Dashboard extension. The default value is 'dashboard-panel'.
- DashboardPanelExtension.panelWidth property - Gets or sets the width of the Dashboard Panel extension. The default value is 250 px.
- DashboardPanelExtension.visible property - Gets or sets whether the Dashboard Panel is visible.
You can use this extension code as a base for your own dashboard item extension development.
Before you start, we advise you to fork this repository and work with your own copy.
- Clone this extension to get a local copy of the repository.
git clone https://github.com/DevExpress/dashboard-extension-dashboard-panel.git
cd dashboard-extension-dashboard-panel- In this extension we use the Node.js toolset. Use the command below to install all modules listed as dependencies in the extension's package.json file.
npm install- Then install Gulp to build the solution. You can install it globally...
npm install -g gulp
gulp build... or use a local Gulp version.
.\node_modules\.bin\gulp buildYou can find the resulting files at ...\dashboard-extension-dashboard-panel\dist:
dashboard-panel.js and dashboard-panel.min.js.
This extension is distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.
- Refer to this section for general information about client-side extensions.
- To learn how to work with extensions, see the following KB article.
- To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.