dashboard-extension-dashboard-panel: A TypeScript repository from Developer Express Inc.

⛔ DEPRECATED. This project was moved to a new repository. Visit dashboard-extensions to find an updated version.

The current repository does not support the modular approach for HTML JS Dashboard and will not be updated in the future.

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.

Installation

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.html file 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()

function onBeforeRender(sender) {
  var dashboardControl = sender.GetDashboardControl();
  dashboardControl.registerExtension(new CustomExtensions.CustomDashboardPanelExtension(dashboardControl));
}

API

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.

Development

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 build

You can find the resulting files at ...\dashboard-extension-dashboard-panel\dist: dashboard-panel.js and dashboard-panel.min.js.

License

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.

Support & Feedback

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.