Installation

DevExtreme has the following dependencies.

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 libraries required by it.

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
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/js/globalize.min.js"></script>
    <script type="text/javascript" src="/js/dx.phonejs.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
    <link rel="dx-theme" data-theme="ios.default" href="/css/dx.ios.default.css" />
  • Knockout

    HTML
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/js/globalize.min.js"></script>
    <script type="text/javascript" src="js/knockout-3.3.0.js"></script>
    <script type="text/javascript" src="/js/dx.phonejs.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
    <link rel="dx-theme" data-theme="ios.default" href="/css/dx.ios.default.css" />
  • AngularJS

    HTML
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/js/angular.js"></script>
    <script type="text/javascript" src="/js/angular-sanitize.js"></script>
    <script type="text/javascript" src="/js/dx.phonejs.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
    <link rel="dx-theme" data-theme="ios.default" href="/css/dx.ios.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
    <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>
    <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/14.2.12/js/dx.phonejs.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.ios.default.css" />
  • Knockout

    HTML
    <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>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/14.2.12/js/dx.phonejs.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.ios.default.css" />
  • AngularJS

    HTML
    <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>
    <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="http://cdn3.devexpress.com/jslib/14.2.12/js/dx.phonejs.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.ios.default.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 can not load DevExtreme libraries to Visual Studio 15 ASP.NET 5 Web Application using NuGet packages. Use Bower packages instead.
See Also