External Client Libraries

• Jul 23, 2024
• 3 minutes to read

DevExpress MVC Extensions require that specific external libraries are available on the client. The most of our MVC Extensions are implemented as wrappers around Web Forms controls, for instance, GridView, Splitter, and Data Editors. These extensions require jQuery scripts to work properly. Other extensions are based on our DevExtreme controls and require additional external libraries, including DevExtreme resources.

To ensure an extension works correctly, you need to do one of the following:

• Add all the required external libraries.
• Add the resources section to the Web.config file so the control can load the external libraries automatically.

Client Libraries

Every DevExpress MVC extension requires the following scripts:

• jquery-3.5.1.min.js
• jquery.validate.min.js (1.17)
• jquery.validate.unobtrusive.min.js (3.2.6)
• jquery.unobtrusive-ajax.min.js (3.2.4)

The following extensions are based on DevExtreme controls and require additional external libraries, including DevExtreme resources:

• Dashboard
• Reports
• Query Builder
• Charts

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

Register Client Libraries Automatically

The GetScripts(Script[]) method attaches the DevExtreme libraries to the View when you add any of the following extensions: All, Dashboard, Report, QueryBuilder, or Chart. To load both 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 code snippet above allows you to register the following resources:

ThirdParty

Adds references to required third-party libraries.

DevExtreme

Adds a reference to the DevExtreme package. DevExtreme scripts are loaded only if you add any of the DevExtreme-based suites.

When you create a project from the DevExpress Template Gallery, it automatically registers the resources in the Web.config file. In this case, all necessary client-side libraries are automatically passed to the client.

Register Client Libraries Manually

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 (see the Required Script Libraries section) to the web page. DevExpress extension scripts modify the jQuery libraries for our own purposes, so you should register the resources in the following order:

   • Third-party libraries
   • The DevExtreme packages
   • Specific control scripts