The current repository does not support the modular approach for HTML JS Dashboard and will not be updated in the future.
A custom Parameter item renders dashboard parameter dialog content inside the dashboard layout and allows you to edit and submit parameter values.
Installation
To add a custom Parameter item to the Web Dashboard, follow the steps below.
-
Download the required version of scripts here.
-
Add the dist folder in your project.
-
Attach the download script to the project inside the
<body>section before the end tag onto the page containing Web Dashboard.
<body>
<!-- ... -->
<script src="/dist/parameter-item.min.js"></script>
</body>- 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 Parameter item to the Web Dashboard.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(new parameterItemExtension(dashboardControl));
}Settings
The Parameter dashboard item supports the following settings that you can configure in the Web Dashboard UI:
- Show Headers - Specifies whether to show headers in the parameters table.
- Show Parameter Name - Specifies whether to show the first column with parameter names.
- Automatic Updates - Specifies whether a parameter item is updated automatically. When enabled, this option hides the 'Submit' and 'Reset' buttons.
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-parameter-item.git
cd dashboard-extension-parameter-item- 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-parameter-item\dist:
parameter-item.js and parameter-item.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
- Follow this guideline for general information about a custom extension.
- To learn how to create a custom item, see the following KB article.
- To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.