3rd-Party Libraries and Frameworks Integration

DevExtreme provides many instruments for mobile and web development. At the same time, it is not a standalone product. It can be combined with other libraries and frameworks in certain tasks. In this article, you will learn about the third-party libraries and frameworks for which DevExtreme is adapted and tested.

Required Libraries

The PhoneJS, WebAppJS and ChartJS DevExtreme libraries that come with DevExtreme Packages require the jQuery and Globalize JavaScript libraries to be linked. Currently, the following versions of these libraries are supported.

  • jQuery version 2.0 - 2.1 (1.10 - 1.11 for IE 8)

  • Globalize version v0.1.1

These libraries are included to your DevExtreme Package.

You can also load these libraries from a Content Delivery Network (CDN).

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>

Data Binding and SPA Frameworks

When using DevExtreme UI widgets, you may need Knockout or AngularJS for data binding. In addition, you can use AngularJS as an SPA framework and build applications utilizing UI widgets.

Currently, the following versions are supported.

  • Knockout version 2.2.3+

  • Angular version 1.2.X or 1.3.X
    Notes:
    - When using version 1.3.X, pay attention to the Migration Guide.
    - Angular version 1.3.X does not work in IE 8. In this instance, use version 1.2.X.

These scripts are accessible within your DevExtreme Package.

You can also load these libraries from a Content Delivery Network (CDN).

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-sanitize.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
NOTE
When using the DevExtreme SPA Framework to build a single-page application, referencing Knockout is required.

Data Access Libraries

The DevExtreme data layer includes the Store data access interface, which is supported by all DevExtreme UI widgets working with data, such as the dxList, dxGallery, dxDataGrid widgets, etc. DevExtreme includes several Store implementations out-of-the-box. To consume OData web services, use the ready-to-use ODataStore.

In addition to the ODataStore, we introduced the BreezeJS and JayData extensions, which contain classes accessing data using the BreezeJS and JayData libraries respectively.

Exporting Libraries

DevExtreme comes with the dxExporter widget that allows you to export any DevExtreme data visualization widget into an image or a document. To do this successfully, dxExporter requires the PhantomJS WebKit. You will need to download the PhantomJS zip-archive. Note that PhantomJS version 1.9.X is required.

The DevExtreme dxDataGrid widget also supports data export - see Export. To accomplish this, a reference to the jsZip.js JavaScript library is required. This library is accessible within your DevExtreme Package.

Template Engines

DevExtreme widgets are built so that you can provide custom templates for their elements. Along with a built-in template engine that allows you to provide a custom rendering function, DevExtreme enables you to use 3rd-party template engines to customize the appearance of widget elements. The following template engines are supported.

NOTE
Use the latest versions of these template engines.
See Also

Bootstrap Framework

DevExtreme UI widgets can be used in applications built using the Bootstrap framework version 3.3.X.