All docs
V20.2
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

  • 3 minutes to read

The Web Dashboard uses the following client libraries:

Required

Optional

  • 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.

        <script src="Scripts/cldrjs/cldr.js"></script>
        <script src="Scripts/cldrjs/cldr.event.js"></script>
        <script src="Scripts/globalize/cldr.supplemental.js"></script>
    
        <script src="Scripts/globalize/globalize.js"></script>
        <script src="Scripts/globalize/globalize.message.js"></script>
        <script src="Scripts/globalize/globalize.number.js"></script>
        <script src="Scripts/globalize/globalize.currency.js"></script>
        <script src="Scripts/globalize/globalize.date.js"></script>
    

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

    The basic cldr content is included in the library. However, for locales other than "en" (or currencies other than "USD"), cldr content should be loaded additionally (read more in the Globalize documentation).

Automatic Integration

For the ASP.NET Web Forms Dashboard Control or ASP.NET MVC Dashboard Extension, 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 when you use wrappers.

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 20.2\Components\Sources\DevExpress.Web.Resources\Css\
    • Scripts - C:\Program Files (x86)\DevExpress 20.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>
        <script src="https://unpkg.com/devextreme-cldr-data/supplemental.js" charset="UTF-8"></script>
        <script src="https://unpkg.com/devextreme-cldr-data/en.js" charset="UTF-8"></script>
    
        <link href="CSS/DevExtreme/dx.common.css" rel="stylesheet" />
        <link href="CSS/DevExtreme/dx.light.css" rel="stylesheet" />
        <script src="Scripts/DevExtreme/dx.all.js"></script>
    </head>
    ...
    </html>
    
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 to the Visual Studio application.

NOTE

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