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

  • globalize 1.0+

    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.

Automatic Integration

Add the “resources” section to the application’s Web.config file to include client-side libraries on a web page:

<devExpress>
    <!-- ... -->
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>

Note

The DevExpress Analytics Components library is attached automatically.

Manual Integration

You can prevent a control from loading libraries automatically (for example, when the libraries are already referenced on the web page).

  1. Declare an empty <resources> section in the Web.config file:

    <devExpress>
        <!-- ... -->
        <resources>
        </resources>
    </devExpress>
    
  2. Copy the “Ace” and “DevExtreme” folders to the project from the following locations:

    • CSS files - C:\Program Files (x86)\DevExpress 21.2\Components\Sources\DevExpress.Web.Resources\Css\
    • Scripts - C:\Program Files (x86)\DevExpress 21.2\Components\Sources\DevExpress.Web.Resources\Scripts\

    Note

    Web Dashboard comes with an icon library that provides font icons for all Web Dashboard themes. The icons should be in the same folder in the project as the DevExtreme CSS files.

  3. Attach the following scripts and stylesheets to the <head> section of the page that contains the Web Dashboard.

    <html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://knockoutjs.com/downloads/knockout-3.5.0.js"></script>
    
        <script src="Scripts/Ace/ace.js"></script>
        <script src="Scripts/Ace/ext-language_tools.js"></script>
        <script src="Scripts/Ace/theme-dreamweaver.js"></script>
        <script src="Scripts/Ace/theme-ambiance.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/event.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/supplemental.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/message.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/number.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/date.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/currency.js"></script>
    
        <link href="CSS/DevExtreme/dx.light.css" rel="stylesheet" />
        <script src="Scripts/DevExtreme/dx.all.js"></script>
    </head>
    ...
    </html>
    

    The order of script references is important. You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.

Tip

You can download scripts from npm. For this, use the following packages:

Refer to package.json configuration for details on how to install npm packages for use in a Visual Studio application.