The current repository does not support the modular approach for HTML JS Dashboard and will not be updated in the future.
A custom Simple Table item renders data from the measure / dimensions as an HTML table.
You can use the Simple Table as a detail item along with the Master-Filtering feature.
Installation
To add a custom Simple Table item extension to the Web Dashboard, follow the steps below.
-
Download the latest 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/simple-table.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 Simple Table to the Web Dashboard.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(new CustomItemSimpleTableExtension(dashboardControl));
}Settings
The Simple Table dashboard item supports the following setting that you can configure in the Web Dashboard UI:
- Show Headers - Specifies whether to show the field headers in the table. The default value is Auto.
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-simple-table.git
cd dashboard-extension-simple-table- 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-simple-table\dist:
simple-table.js and simple-table.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 create a custom item, see the following KB article.
- To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.