Installation

The following DevExtreme libraries exist.

NOTE
Reference only one of the following libraries per application. Their combination may cause unexpected results.

DevExtreme has the following dependencies.

Optionally, you can use DevExtreme with the following MVVM frameworks.

Some functionality relies on additional libraries.

  • Globalize version 1.x
    Allows you to localize your app and use custom date, number and currency formatting.

    You need to reference Globalize only if your application should support the following functionality.

    1. Non-English locales
    2. Custom message dictionaries
    3. Non-USD currency formatting
    4. Custom date and number formatting

    To learn more about how to use the globalize library, refer to the Localization topic.

  • JSZIP library

    Reference the JSZIP library only when exporting data to a file.

  • Webpack version 1.13 (available via npm only)

    Allows you to create your own DevExtreme modules that include only what you need.

NOTE
Reference the DevExtreme scripts after external scripts.

This article shows from where to download DevExtreme and its required libraries and how to install them.

Local Scripts

You can find all the required files in your DevExtreme package. Place the Lib folder of this package into the folder with your application. Then, depending on the library or framework you use in your app, link the needed files within the <head> tag of your index page in the given order.

  • jQuery

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.viz-web.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.mobile.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="/css/dx.ios7.default.css" />
  • Knockout

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
    <!-- The Knockout library -->
    <script type="text/javascript" src="/js/knockout-3.4.0.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.viz-web.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.mobile.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="/css/dx.ios7.default.css" />
  • AngularJS

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
    <!-- The AngularJS library -->
    <script type="text/javascript" src="/js/angular.min.js"></script>
    <script type="text/javascript" src="/js/angular-sanitize.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.viz-web.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.mobile.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="/css/dx.ios7.default.css" />

Localized apps and apps that use custom date, number or currency formatting require the Globalize library as well.

HTML
<!-- Globalize scripts -->
<script type="text/javascript" src="/js/cldr.min.js"></script>
<script type="text/javascript" src="/js/cldr/event.min.js"></script>
<script type="text/javascript" src="/js/cldr/supplemental.min.js"></script>
<script type="text/javascript" src="/js/globalize.min.js"></script>
<script type="text/javascript" src="/js/globalize/message.min.js"></script>
<script type="text/javascript" src="/js/globalize/number.min.js"></script>
<script type="text/javascript" src="/js/globalize/currency.min.js"></script>
<script type="text/javascript" src="/js/globalize/date.min.js"></script>
NOTE
Globalize scripts need to go before DevExtreme scripts.

If you use the client-side export, add references to the JSZip library.

HTML
<!--jzip library-->
<script type="text/javascript" src="/js/jszip.js"></script>
NOTE
Reference the JSZip scripts before the DevExtreme scripts.

CDN Services

Instead of delivering DevExtreme and other required libraries with your app, you can load them from Content Delivery Network (CDN) services. Depending on the library or framework you use in your app, link the needed resources within the <head> tag of your index page in the given order.

  • jQuery

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz-web.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.mobile.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.1.13/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.1.13/css/dx.light.css" />
  • Knockout

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"></script>
    <!-- The Knockout library -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz-web.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.mobile.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.1.13/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.1.13/css/dx.light.css" />
  • AngularJS

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"></script>
    <!-- The AngularJS library -->
    <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.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz-web.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.mobile.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.1.13/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.1.13/css/dx.light.css" />

Localized apps and apps that use custom date, number or currency formatting require the Globalize library as well.

HTML
<!-- Globalize scripts -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.5/cldr.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.5/cldr/event.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.5/cldr/supplemental.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/message.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/number.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/currency.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/date.js"></script>
NOTE
Globalize scripts need to go before DevExtreme scripts.

If you use the client-side export, add references to the JSZip library.

HTML
<!--jzip library-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.0/jszip.min.js"></script>
NOTE
Reference the JSZip scripts before the DevExtreme scripts.

NuGet Package

When using Visual Studio, you can add the DevExtreme libraries to your application using the DevExtreme Web NuGet package. To install this package, run the following command in the Package Manager Console.

Install-Package DevExtreme.Web

The jQuery and Globalize packages, upon which DevExtreme depends, will be installed as well, but the Knockout and AngularJS packages will not. If you need them, install them individually. Note that Knockout and AngularJS are not supposed to be used together.

Install-Package knockoutjs
Install-Package AngularJS.Sanitize

Another way to install or update the DevExtreme Web package is to use the Manage NuGet Packages dialog in Visual Studio. You can find more information here. When using the Manage NuGet Packages dialog, make sure that you have nuget.org as your online source. Type DevExtreme Web (DevExtreme Mobile) within the Search Online text box.

After installing all the necessary packages, link the needed scripts within the <head> tag of your index page as shown in the Local Scripts article.

See Also

Bower Package

Whatever IDE you develop apps in, you can always add the DevExtreme libraries to your project using the devextreme Bower package. To install this package, open the console, navigate to your app folder and run the following command.

bower install devextreme-web#~16.1 --save // installs the DevExtreme Web package
bower install devextreme#~16.1 --save // installs the DevExtreme Complete package

The jQuery and Globalize packages, upon which DevExtreme depends, will be installed as well, but the Knockout and AngularJS packages will not. If you need them, install them individually. Note that Knockout and AngularJS are not supposed to be used together.

bower install knockout
bower install angular-sanitize

If you use the client-side export, also install the JSZip library.

bower install Stuk/jszip

After installation is completed, you can find all the libraries in the bower_components folder. Link them within the <head> tag of your index page.

HTML
<script type="text/javascript" src="/bower-components/jquery/dist/jquery.min.js"></script>

<!-- Reference either Knockout or AngularJS, if you do -->
<script type="text/javascript" src="/bower_components/knockout/dist/knockout.js"></script>
<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>

<!-- Reference Globalize if you need to localize app or your app uses custom date, number or currency formatting --> 
<script type="text/javascript" src="/bower_components/cldrjs/dist/cldr.js"></script>
<script type="text/javascript" src="/bower_components/cldrjs/dist/cldr/event.js"></script>
<script type="text/javascript" src="/bower_components/cldrjs/dist/cldr/supplemental.js"></script>
<script type="text/javascript" src="/bower_components/globalize/dist/globalize.js"></script>
<script type="text/javascript" src="/bower_components/globalize/dist/globalize/message.js"></script>
<script type="text/javascript" src="/bower_components/globalize/dist/globalize/number.js"></script>
<script type="text/javascript" src="/bower_components/globalize/dist/globalize/currency.js"></script>
<script type="text/javascript" src="/bower_components/globalize/dist/globalize/date.js"></script>

<!-- Reference JSZip scripts if you need client-side export -->
<script type="text/javascript" src="/bower_components/jszip/dist/jszip.js"></script>

<script type="text/javascript" src="/bower-components/devextreme/js/dx.all.js"></script>
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.mobile.js"></script>-->
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.web.js"></script>-->
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.viz.js"></script>-->
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.viz-web.js"></script>-->
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/bower-components/devextreme/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="/bower-components/devextreme/css/dx.light.css" />
See Also

Add Bower Packages to a Visual Studio 2015 ASP.NET 5 Application

The Visual Studio 2015 MVC 5 Web Application template supports Bower out of the box. Follow the steps below to add the DevExtreme libraries to an MVC 5 application using Bower.

  1. Open the bower.json file located in the root folder of your application project.

    Bower - .json file

  2. Find the dependencies section in this file, put a comma after the last entry and copy-paste the following line.

    "devextreme-web": "~16.1", // for restoring the DevExtreme Web package
    "devextreme": "~16.1" // for restoring the DevExtreme Complete package

    Wait a few seconds until the libraries are loaded. DevExtreme scripts will be located in the wwwroot/lib/devextreme folder.

  3. Link the needed libraries within the <head> tag of your index page.

    HTML
    <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
    . . .
    <script type="text/javascript" src="/lib/devextreme/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.mobile.js"></script>-->
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.web.js"></script>-->
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.viz.js"></script>-->
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.viz-web.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/lib/devextreme/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="/lib/devextreme/css/dx.light.css" />
NOTE
The Knockout and AngularJS libraries are not included in the DevExtreme Bower package or its dependencies.

npm Package

DevExtreme is available through the npm package manager. To install the DevExtreme package, run the following command.

npm install devextreme
NOTE
npm ver. 3 will not install the DevExtreme dependencies automatically. Run the following commands to install them manually.
// Required by DevExtreme
npm install jquery@2.2.3

// Optional: allow you to use the MVVM approach
npm install knockout@3.4
npm install angular@1
npm install angular-sanitize@1

// Optional: enable you to localize your app
npm install globalize@1
npm install cldr-data

// Optional: enables you to use the client-side export
npm install jszip

// Optional: enables you to create DevExtreme modules
npm install webpack@1.13

After installation is completed, you can find all the libraries in the node_modules folder. Link them within the <head> tag of your index page.

HTML
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>

<!-- Reference either Knockout or AngularJS, if you do -->
<script type="text/javascript" src="/node_modules/knockout/build/output/knockout-latest.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular-sanitize.min.js"></script>

<script type="text/javascript" src="/node_modules/cldrjs/dist/cldr.min.js"></script>
<script type="text/javascript" src="/node_modules/cldrjs/dist/cldr/event.min.js"></script>
<script type="text/javascript" src="/node_modules/cldrjs/dist/cldr/supplemental.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/message.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/number.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/currency.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/date.min.js"></script>

<!-- Reference the JSZip script if you need client-side export -->
<script type="text/javascript" src="/node_modules/jszip/dist/jszip.js"></script>

<script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.all.js"></script>
<!-- <script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.mobile.js"></script> -->
<!-- <script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.viz.js"></script> -->
<!-- <script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.viz-web.js"></script> -->
<!-- <script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.web.js"></script>  -->

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/node_modules/devextreme/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/devextreme/dist/css/dx.ios7.default.css" />
See Also
  • npm Documentation - solves any difficulties you may encounter working with npm.
  • Modularity - shows how you can create your own DevExtreme module that includes only what you need.