Installation

DevExtreme has the following dependencies.

  • jQuery version 2.0 - 2.1 (but 1.10 - 1.11 for IE 8)
  • Globalize version 0.x

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

NOTE
Reference the DevExtreme scripts after external scripts.

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

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.1.4.min.js"></script>
    <script type="text/javascript" src="/js/globalize.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/js/dx.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.webappjs.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.phonejs.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.1.4.min.js"></script>
    <script type="text/javascript" src="/js/globalize.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.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.webappjs.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.phonejs.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.1.4.min.js"></script>
    <!-- The AngularJS library -->
    <script type="text/javascript" src="/js/angular.js"></script>
    <script type="text/javascript" src="/js/angular-sanitize.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/js/dx.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.webappjs.js"></script>-->
    <!--<script type="text/javascript" src="/js/dx.phonejs.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" />

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.1.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.webappjs.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.phonejs.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/15.2.15/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/15.2.15/css/dx.light.css" />
  • Knockout

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.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/15.2.15/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.webappjs.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.phonejs.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/15.2.15/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/15.2.15/css/dx.light.css" />
  • AngularJS

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.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.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.webappjs.js"></script>-->
    <!--<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.phonejs.js"></script>-->
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/15.2.15/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/15.2.15/css/dx.light.css" />

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.

NOTE
You cannot load DevExtreme libraries to Visual Studio 15 ASP.NET 5 Web Application using NuGet packages. Use Bower packages instead.
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 one of the following commands depending on the DevExtreme package you need.

bower install devextreme-web#~15.2--save // installs the DevExtreme Web package
bower install devextreme#~15.2 --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

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>
. . .
<script type="text/javascript" src="/bower-components/devextreme/js/dx.all.js"></script>
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.phonejs.js"></script>-->
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.chartjs.js"></script>-->
<!--<script type="text/javascript" src="/bower-components/devextreme/js/dx.webappjs.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": "~15.2", // for restoring the DevExtreme Web package
    "devextreme": "~15.2" // 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 type="text/javascript" src="/lib/devextreme/js/dx.all.js"></script>
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.phonejs.js"></script>-->
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.chartjs.js"></script>-->
    <!--<script type="text/javascript" src="/lib/devextreme/js/dx.webappjs.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" />
NOTE
The Knockout and AngularJS libraries are not included in the DevExtreme Bower package or its dependencies.