External Client Libraries

• Jul 23, 2024
• 2 minutes to read

DevExpress Dashboard, Reports, Query Builder, and Charts components require that specific external libraries are available on the client, including DevExtreme resources.

You must add the necessary libraries using automatic or manual registration to ensure the component operates correctly.

Automatic Registration

To load DevExtreme and third-party libraries automatically, add the following references to the resources section to the Web.config file.

<configuration>
  <configSections>
    <sectionGroup name="devExpress">
      <!-- ...  -->
      <section name="resources" type="DevExpress.Web.ResourcesConfigurationSection, DevExpress.Web.v24.1, Version=24.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" />
    </sectionGroup>
  </configSections>
<!-- ...  -->
</configuration>
<!-- ...  -->

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

The above settings mean the following:

ThirdParty

Adds references to required third-party libraries.

DevExtreme

Adds a reference to the DevExtreme package.

When you create a project from the DevExpress Template Gallery, it specifies both settings in the Web.config file.

Manual Registration

Follow the steps below to specify the libraries to deploy on the client:

1. Declare an empty resources section to prevent external client scripts from loading automatically.

   <resources>
   </resources>
   

2. Attach DevExtreme resources and the third-party libraries listed in the Script Libraries section to the web page. It is essential to follow the correct order when adding libraries to the page. Third-party libraries must be added before DevExtreme libraries.

Script Libraries

Dashboards

• jquery.min.js
• knockout-latest.js
• ace.js (required for Dashboard Designer)
• ext-language_tools.js (required for Dashboard Designer)
• jszip.min.js (required for text editing in RichEdit control)
• dx.richedit.min.js (required for text editing in RichEdit control)

• dx.all.js - DevExtreme client libraries

• DevExtreme client libraries

Reporting

• jquery.min.js
• knockout-latest.js
• ace.js (code highlighting in Expression editor)
• ext-language_tools.js (code highlighting in Expression editor)
• jszip.min.js (rich text editing in XRRichEdit control at design time)
• dx.richedit.min.js (rich text editing in XRRichEdit control at design time)
• dx.all.js - DevExtreme client libraries

Query Builder

• jquery.min.js
• knockout-latest.js
• ace.js (code highlighting)
• ext-language_tools.js (code highlighting)
• dx.all.js - DevExtreme client libraries