Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Reporting for Web > Common Features > Client-Side Functionality > Client Script Libraries
All docs
V23.2
Reporting
Product Information
.NET / .NET Core Support
Get Started with DevExpress Reporting
Create Different Report Types (Walkthroughs)
Detailed Guide to DevExpress Reporting
Localize Reporting Applications
Security Considerations
Visual Studio Report Designer
VS Code Report Designer
Reporting for Desktop
Reporting for .NET MAUI
Reporting for Web
Common Features
Security
Printing and Export
Accessibility
Integrate Document Viewer Components
Client-Side Functionality
Document Viewer Client-Side API
Report Designer Client-Side API
Client Script Libraries
Themes and Styles
Localization
Supported Browsers
Display Documents from the Report and Dashboard Server
Custom HTML Templates
Web Farm and Web Garden Support
Document Viewer for Web
End-User Report Designer for Web
Web UI Development Bundles that Include Reports
Reporting for Blazor
Reporting for ASP.NET Core
Reporting for Angular
Reporting for Knockout-based Applications
Reporting for React
Reporting for Vue
Reporting for ASP.NET MVC
Reporting for ASP.NET Web Forms
Version Upgrade Guide
Troubleshooting
Cloud Integration
Cross-Platform .NET App UI
Backend Web API Service / REST API for Reporting
WCF Report Service
End-User Documentation
Redistribution and Deployment
API Reference
ASP.NET Core API Reference
Blazor API Reference
Client API Reference
Client API Reference (Web Forms & MVC)
Download CHM

Client Script Libraries

  • 3 minutes to read

Libraries

Reporting components for web require the following client-side script libraries for correct operation:

  • jQuery 3.5.1+
  • knockout 3.5.1+

  • Optional. globalize v1.0.1+.

    Include the cldr 0.4.3 scripts first:

    • cldr
    • cldr.event
    • cldr.supplemental

    Next, include the globalize scripts:

    • number
    • currency
    • date
    • message
  • ace.js 1.4.13 The library is required for intelligent code completion in the Expression Editor and Filter Editor in the Web Report Designer and Query Builder. Include the ext\-language\_tools script.
  • dx.all.js. You should also include the dx.common.css stylesheet along with the theme stylesheet: dx.light.css or dx.dark.css.
  • Optional. The Rich Edit Bundle is required to edit formatted text in the XRRichText control. You can exclude these libraries to reduce the size of the downloaded packages:

Registration (All Web Platforms)

Include script libraries in the HTML page header section with the <script\> tags, as shown in the following code snippet.

Important

Make sure that the scripts are registered in the same order as in the code snippet below.

<html>  
<head>  
    <script src="Scripts/jquery/jquery.js"></script>
    <script src="Scripts/knockout/knockout.js"></script> 

    <!-- Optional. If your app requires formatted text editing in the XRRichText control. -->
    <script src="Scripts/jszip/jszip.min.js"></script>

    <!-- Optional. -->
    <script src="Scripts/cldrjs/cldr.js"></script>
    <script src="Scripts/cldrjs/cldr/event.js"></script>
    <script src="Scripts/cldrjs/cldr/unresolved.js"></script>
    <script src="Scripts/cldrjs/cldr/supplemental.js"></script>

  <script src="Scripts/globalize/globalize.js"></script>
  <script src="Scripts/globalize/globalize/currency.js"></script>
  <script src="Scripts/globalize/globalize/message.js"></script>
  <script src="Scripts/globalize/globalize/number.js"></script>
  <script src="Scripts/globalize/globalize/date.js"></script>

    <!-- Optional. These libraries are required for syntax highlighting in the Expression Editor window. -->
    <script src="Scripts/ace/ace.js"></script>
    <script src="Scripts/ace/ext-language_tools.js"></script>
  <link href="CSS/Ace/ace.css" rel="stylesheet" />
  <link href="CSS/Ace/theme/dreamweaver.css"  rel="stylesheet" />
  <link href="CSS/Ace/theme/ambiance.css"  rel="stylesheet" />

  <link href=".../dx.common.css" rel="stylesheet" type="text/css" />
  <link href=".../dx.light.css" rel="stylesheet" type="text/css" />
  <script src=".../dx.all.js" type="text/javascript"></script>
    ...  
</head>  
...  
</html>

Note

Insert correct paths to script libraries after you copy the code above to your application.

The empty resources section of your Web.config file should appear as follows to disable automatic registration:

<configuration>  
  <devExpress>  
    ...  
    <resources>  
    </resources>  
  </devExpress>  
</configuration>

View Example: How to register third-party and DevExtreme client-side libraries manually for Web Reporting widgets.

Registration in ASP.NET WebForms & MVC Projects

Automatic Registration

You can register both Third-Party and DevExtreme libraries automatically in the Web.config file (<resources> section): 

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

Manual Registration

To include both Third-Party and DevExtreme libraries manually, leave the resources section in the Web.config file empty.

The empty resources section of your Web.config file should appear as follows to disable automatic registration:

<configuration>  
  <devExpress>  
    ...  
    <resources>  
    </resources>  
  </devExpress>  
</configuration>

Combination Script Registration

There is an option to register Third-Party libraries manually and have DevExtreme libraries registered automatically. To implement this option, register DevExtreme libraries in the resources section of your Web.config file: 

<configuration>  
  <devExpress>  
    ...  
    <resources>  
      <add type="DevExtreme" />  
    </resources>  
  </devExpress>  
</configuration>

You should include script libraries in the HTML page header section with the <script\> tags, as shown in the following code snippet.

Important

Make sure that the scripts are registered in the same order as in the code snippet below.

<html>  
<head>  
    <script src="Scripts/jquery/jquery.js"></script>
    <script src="Scripts/knockout/knockout.js"></script> 

    <!-- Optional. If your app requires formatted text editing in the XRRichText control. -->
    <script src="Scripts/jszip/jszip.min.js"></script>

    <!-- Optional. -->
    <script src="Scripts/cldrjs/cldr.js"></script>
    <script src="Scripts/cldrjs/cldr/event.js"></script>
    <script src="Scripts/cldrjs/cldr/unresolved.js"></script>
    <script src="Scripts/cldrjs/cldr/supplemental.js"></script>

  <script src="Scripts/globalize/globalize.js"></script>
  <script src="Scripts/globalize/globalize/currency.js"></script>
  <script src="Scripts/globalize/globalize/message.js"></script>
  <script src="Scripts/globalize/globalize/number.js"></script>
  <script src="Scripts/globalize/globalize/date.js"></script>

    <!-- Optional. These libraries are required for syntax highlighting in the Expression Editor window. -->
    <script src="Scripts/ace/ace.js"></script>
    <script src="Scripts/ace/ext-language_tools.js"></script>

  <link href="CSS/Ace/ace.css" rel="stylesheet" />
  <link href="CSS/Ace/theme/dreamweaver.css"  rel="stylesheet" />
  <link href="CSS/Ace/theme/ambiance.css"  rel="stylesheet" />

    ...  
</head>  
...  
</html>

Note

DevExtreme requires that third-party libraries be included in the page before DevExtreme registration. This means that you cannot register DevExtreme libraries manually and Third-Party libraries automatically.