Client Script Libraries

• Jul 18, 2024
• 3 minutes to read

Required Libraries

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

1. jQuery
2. Knockout
3. dx.all.js. You should also include a theme stylesheet: dx.light.css or dx.dark.css.

Scripts must be registered in the order listed above.

Optional Libraries

• Ace.js editor - required for intelligent code completion in the Expression Editor and Filter Editor in the Web Report Designer and Query Builder. The following libraries and stylesheets are necessary for reporting components:

  • ace.js
  • ext-language_tools.js
  • theme-ambiance.js
  • theme-dreamweaver.js
  • snippets/text.js
  • ace.css
  • dreamweaver.css
  • ambiance.css

• DevExpress Rich Text Editor - enables you to edit rich text in the XRRichText control at design time. The following libraries and stylesheets are necessary for reporting components:

  • jszip.min.js
  • dx.richedit.min.js
  • dx.richedit.css

  You can exclude optional libraries to reduce the size of the downloaded packages.

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

View Example: Reporting for Web Forms - Manual Client-Side Library 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>  

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

<%--Required libraries--%>
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/knockout/build/output/knockout-latest.js" type="text/javascript"></script>

<%--The following libraries and styles are used in the Expression Editor to highlight and validate code--%>
<script src="node_modules/ace-builds/src-min-noconflict/ace.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/ext-language_tools.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/snippets/text.js" type="text/javascript"></script>
<link href="node_modules/ace-builds/css/ace.css" rel="stylesheet" type="text/css" />
<link href="node_modules/ace-builds/css/theme/dreamweaver.css" rel="stylesheet" type="text/css" />
<link href="node_modules/ace-builds/css/theme/ambiance.css"  rel="stylesheet" type="text/css" />

<%--Required DevExtreme client control library--%>
<script src="node_modules/devextreme-dist/js/dx.all.js" type="text/javascript"></script>

<%--The following libraries and styles are used to display and edit rich text 
    in the XRRichText control at design time--%>
<script src="node_modules/jszip/dist/jszip.min.js" type="text/javascript"></script>
<script src="node_modules/devexpress-richedit/dist/dx.richedit.min.js" type="text/javascript">></script>
<link href="node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" type="text/css" />

<%--Required styles--%>
<link href="node_modules/devextreme-dist/css/dx.common.css" rel="stylesheet" type="text/css" />

Note

Make sure that the scripts are registered in the same order as in the code snippet below. Insert correct paths to script libraries after you copy the code above to your application.

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 as described in the Manual Registration section previously, except the following:

• DevExtreme client control library dx.all.js
• DevExtreme stylesheet dx.light.css (or another DevExtreme stylesheet)

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.