All docs
V21.2
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Required Client Libraries

  • 2 minutes to read

The Web Dashboard uses the following client libraries:

Required Libraries

Optional Libraries

  • globalize 1.0+

    You can use Globalize as Intl alternative. The Web Dashboard uses the core Globalize script and four Globalize modules (message, number, date, and currency), as well as certain cldrjs scripts.

    Read more about Globalize modules and requirements in the Globalize documentation.

Integration

  1. Use the MvcServiceCollectionExtensions.AddDevExpressControls method without parameters to provide the middleware that is assembled into an application pipeline to handle requests and responses:

    using DevExpress.DashboardAspNetCore;
    using DevExpress.AspNetCore;
    using DevExpress.DashboardWeb;
    
    // ...
    
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddDevExpressControls();
    }
    
  2. Install the latest version of the npm packages listed below in your project:

  3. Bundle the resources and then add them to the View page. Install the BuildBundlerMinifier NuGet package and create the bundleconfig.json file with the following content:

    [
        {
            "outputFileName": "wwwroot/css/site.min.css",
            "inputFiles": [
                "node_modules/devextreme/dist/css/dx.light.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
                "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
            ],
            "minify": { "enabled": false, "adjustRelativePaths": false }
        },
        {
            "outputFileName": "wwwroot/js/site.min.js",
            "inputFiles": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/jquery-ui-dist/jquery-ui.min.js",
                "node_modules/knockout/build/output/knockout-latest.js",
                "node_modules/ace-builds/src-min-noconflict/ace.js",
                "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
                "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
                "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
                "node_modules/devextreme/dist/js/dx.all.js",
                "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
                "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
                "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
            ],
            "minify": {
                "enabled": false
            },
            "sourceMap": false
        }
    ]
    

    Note

    See the following topic for information on how to add scripts when you use Globalize to format dates, numbers, and currencies: Localize ASP.NET Core Dashboard Control.

  4. Attach the bundled resources to the page.

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Dashboard Web Application</title>
        <!-- Attach the bundled CSS files and scripts. -->
        <link href="css/site.min.css" rel="stylesheet" />
        <script src="js/site.min.js"></script>
        <!-- ... -->
    </head>
    <body>
        @RenderBody()
    </body>
    </html>
    

    Important

    You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.

  5. Create the libman.json file in the root directory of the project and add the following LibMan configuration to copy icon fonts to the application’s static content folder:

    {
    "version": "1.0",
    "defaultProvider": "filesystem",
    "libraries": [
        {
        "library": "node_modules/devextreme/dist/css/icons/",
        "destination": "wwwroot/css/icons/",
        "files": [
            "dxicons.ttf",
            "dxicons.woff",
            "dxicons.woff2"
        ]
        }
    ]
    }
    

    Note

    This step requires the Microsoft.Web.LibraryManager.Build NuGet package to be installed.