Installation

DevExtreme has the following dependencies.

  • jQuery version 2.1 (or 1.10 - 1.11 for IE8 support)
  • Globalize version 0.x

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

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
    <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.all.js"></script>
  • 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.4.0.js"></script>
    <script type="text/javascript" src="/js/dx.all.js"></script>
  • AngularJS

    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/angular.min.js"></script>
    <script type="text/javascript" src="/js/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="/js/dx.all.js"></script>

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="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>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.all.js"></script>
  • Knockout

    HTML
    <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>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.all.js"></script>
  • AngularJS

    HTML
    <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>
    <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>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.15/js/dx.all.js"></script>

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.

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 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>
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.

  2. Find the dependencies section in this file, put a comma after the last entry and copy-paste one of the following lines depending on the DevExtreme package you need.

    "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-web or 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>
NOTE
The Knockout and AngularJS libraries are not included in the DevExtreme Bower package or its dependencies.