Prerequisites

Important

This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.

Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:

This document provides information on the requirements for using the Web Viewer.

Embedding Client Libraries

To run the Web Viewer, the following script files should be installed on the client web browser.

  • jQuery 1.11.3+
  • globalize 1.0+

    The Web Dashboard Viewer requires the core Globalize script and four Globalize modules (message, number, date and currency), as well as some cldrjs scripts. Here is a list of the required Globalize scripts:

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

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

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

All JavaScript files should be downloaded and placed into your application's Scripts folder, and the correct paths to these libraries should be set in the src attribute.

To include these script files in a client application, do one of the following.

  • Automatic Integration

    Include these client-side libraries on the web page automatically by adding the "resources" section to the application's Web.config file, as shown below.

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

    To avoid automatic loading of any libraries by a control (e.g., when such libraries are already referenced on the web page), do the following.

    • Declare an empty "resources" section in the Web.config file.

      <resources>
      </resources>
      
    • Manually attach DevExtreme resources and the required third-party libraries (such as jQuery and Globalize) to the web page.

      <html>
      <head>
          <script src="Scripts/jquery-3.3.1.js"></script>
      
          <script src="Scripts/globalize/cldr.js"></script>
          <script src="Scripts/globalize/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>
      
          <link href="Css/dx.common.css" rel="stylesheet" />
          <link href="Css/dx.light.css" rel="stylesheet" />
          <script src="Scripts/dx.all.js"></script>
      </head>
      ...
      </html>
      
      Note

      You can find the required DevExtreme resources in the following locations:

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

For a list of web browsers supported by the Web Viewer, refer to the following document: Supported Browsers.