Client-Side Configuration (Global Namespaces)

This approach is based on the client-server model, that is, you need to create a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts and HTML-templates.

The HTML JavaScript Dashboard control allows you to create dashboards in web applications. This topic describes how to add the HTML JavaScript Dashboard control to the web page using the approach with global namespaces.


To learn how to build the HTML JavaScript Dashboard application from scratch, see Create an HTML JavaScript Dashboard Application with an ASP.NET MVC Backend.

Add a Container

First, you need to place the DashboardControl in a container, which is a <div> HTML element. Add a <div> to the <body> tag of your page and make sure that this <div> has the ID attribute specified.

   <div id="web-dashboard" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0">

Add the JavaScript Files and Style Sheets

The HTML JavaScript Dashboard control requires attaching the styleesheet and scripts located in the npm package.


Visual Studio 2017 has integrated support of npm and allows you to interact with npm natively. For previous supported versions, use the Node.js Tools extension from the Marketplace: for Visual Studio 2012, for Visual Studio 2013, and for Visual Studio 2015.

Right-click the project, click Add | New Item... and add npm Configuration File to the project.

Open the created package.json file and add the latest version of the devexpress-dashboard and jquery-ui-dist packages:

  // ...
  "dependencies": {
    "devexpress-dashboard": "{version-number}", 
    "jquery-ui-dist": "{version-number}"

Right-click the package.json file and select Restore Packages.

Attach the JavaScript Files and Style Sheets

In the HTML markup, attach the required stylesheet and scripts inside the <head> section in the following order:

    <!-- ... -->
    <link href="node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" />
    <link href="node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" />
    <link href="node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css" rel="stylesheet" />
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/jquery-ui-dist/jquery-ui.js"></script>
    <script src="node_modules/knockout/build/output/knockout-latest.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/ace.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js"></script>
    <script src="node_modules/cldrjs/dist/cldr.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/event.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/supplemental.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/unresolved.js"></script>
    <script src="node_modules/globalize/dist/globalize.js"></script>
    <script src="node_modules/globalize/dist/globalize/message.js"></script>
    <script src="node_modules/globalize/dist/globalize/number.js"></script>
    <script src="node_modules/globalize/dist/globalize/currency.js"></script>
    <script src="node_modules/globalize/dist/globalize/date.js"></script>
    <script src="node_modules/devextreme/dist/js/dx.all.js"></script>
    <script src="node_modules/devextreme-cldr-data/supplemental.js" charset="UTF-8"></script>
    <script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></script>
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js"></script>
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js"></script>
    <script src="node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"></script>

The following script is used to set the English culture:

 <script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></script>

Add scripts for other languages to support corresponding cultures:

 <script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></script>
 <script src="node_modules/devextreme-cldr-data/de.js" charset="UTF-8"></script>
 <script src="node_modules/devextreme-cldr-data/fr.js" charset="UTF-8"></script>

Initialize the DashboardControl

In the <head> section, insert the following script after the scripts from the previous section. The endpoint property specifies the URL used to interact with a backend (to send data requests to a server). The value should consist of a base URL where the Web Dashboard's server side is hosted and the route prefix - a value that is set in the MVC / .NET Core backend.

    <!-- ...-->
        window.onload = function () {
            var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                endpoint: "{baseURL}/api/dashboard"                

Specify one of the added locales in the Globalize.locale() method to change the culture:

window.onload = function () {
    // ...
See Also