Modularity

DevExtreme provides a set of modules. Each module contains a small portion of the DevExtreme functionality. Using modules has the following advantages in comparison with standard libraries (dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js).

  • Less memory is allocated by your application, because only the required functionality is loaded.

  • Application loading is faster, because of the smaller size of the loaded code and the capability to load modules at runtime by demand.

DevExtreme modules are distributed as an npm package. Install the package to the directory where you wish to store the files.

npm install devextreme
NOTE
DevExtreme modules are available only via npm.

Alternatively, you can create a custom bundle using the DevExtreme Bundler tool. For more information, see the Create a Custom Bundle section of this article.

NOTE
You may require 3-rd party libraries and frameworks integration. For details on supported versions, see the 3rd-Party Libraries and Frameworks Integration topic.

Link Modules

Use one of the following ways to link up the required modules to your application.

  • Load modules automatically using RequireJS.

  • Create a bundle using Webpack.

  • Load modules using the jspm package manager.

Use Webpack

First, ensure the Webpack is installed globally. If not, execute the following command.

npm install webpack -g

Install the DevExtreme package to the directory where you wish to store the files.

npm install devextreme

To link up the modules to your application using Webpack, begin by defining the configuration object.

JavaScript
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

Link the bundle script file to your HTML page.

HTML
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>

Add themes to your application.

HTML
<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.light.css" />

Create an entry script of your application. For example, it can specify required modules.

JavaScript
var $ = require('jquery');
var dialog = require('devextreme/ui/button');
...

Then, create the bundle.

webpack
NOTE
Check the supported versions of 3rd-party libraries. For details, see the 3rd-Party Libraries and Frameworks Integration topic.

The example below demonstrates how to create an application with a single button using modules, and how to configure Webpack to pick up and bundle all the required scripts to your application.

jQuery

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.js

JavaScript
var $ = require('jquery');
var dialog = require('devextreme/ui/dialog');

require('devextreme/ui/button');

$("#myButton").dxButton({
    text: "Say 'Hello world'",
    onClick: function() {
        dialog.alert('Hello world!', '', false);
    }
});

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with Webpack and Knockout example</title>
  <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.light.css" />
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div id="myButton"></div>
  </div>
  <!-- Include the bundle script -->
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>
AngularJS
NOTE
To use AngularJS and DevExtreme widget modules with Webpack, load the DevExtreme integration and angular modules.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
var path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    }
};

index.js

JavaScript
var angular = require('angular');
var dialog = require('devextreme/ui/dialog');

require('devextreme/integration/angular');
require('devextreme/ui/button');

var myApp = angular.module('myApp', ['dx']);
myApp.controller("myController", function($scope) {
  $scope.buttonOptions = {
    text: "Say 'Hello world'",
    onClick: function() {
      dialog.alert('Hello world!', '', false);
    }
  };
});

angular.bootstrap(document, ['myApp']);

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with Webpack and AngularJS example</title>
  <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.light.css" />
</head>

<body>
  <div ng-controller="myController">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
      <div dx-button="buttonOptions"></div>
    </div>
  </div>
  <!-- Include the bundle script -->
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>
Knockout
NOTE
To use KnockoutJS and DevExtreme widget modules with Webpack, load the DevExtreme integration module.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.js

JavaScript
var ko = require('knockout');
var dialog = require('devextreme/ui/dialog');

require('devextreme/integration/knockout');
require('devextreme/ui/button');

var viewModel = {
    buttonOptions: {
        text: "Say 'Hello world'",
        onClick: function() {
            dialog.alert('Hello world!', '', false);
        }
    }
};
ko.applyBindings(viewModel);

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with Webpack and Knockout example</title>
  <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.light.css" />
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div data-bind="dxButton: buttonOptions"></div>
  </div>
  <!-- Include the bundle script -->
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>

Use jspm

First, install jspm in your application folder. For detailed information on installing, see the jspm documentation.

npm install jspm
NOTE
Install the DevExtreme package with the help of jspm.
jspm install npm:devextreme

To link up the modules to your application using jspm, first add links to the library and then the configuration file to your application.

HTML
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

Create an entry script of your application. For example, it can specify the required modules.

JavaScript
import $ from 'jquery';
import 'devextreme/ui/button';
...

Then, in the HTML page, import your application's main entry point.

HTML
<script>
    System.import('./index.js');
</script>
NOTE
Check the supported versions of 3rd-party libraries. For details, see the 3rd-Party Libraries and Frameworks Integration topic.

The example below demonstrates how to create an application with a single button using the modules from a local directory.

jQuery

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
import 'devextreme/dist/css/dx.common.css!';
import 'devextreme/dist/css/dx.light.css!';

import $ from 'jquery';
import 'devextreme/ui/button';
import dialog from 'devextreme/ui/dialog';

$("#myButton").dxButton({
  text: "Say 'Hello world'",
  onClick: function() {
    dialog.alert('Hello world!', '', false);
  }
});

index.html

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DevExtreme with Jspm and jQuery example</title>
        <!--Include SystemJS loader and the config file-->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
    </head>
    <body>
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
            <div id="myButton"></div>
        </div>
        <!--Import of the application main entry point-->
         <script>
            System.import('./index.js');
        </script>
    </body>
</html>
AngularJS
NOTE
To use AngularJS and DevExtreme widget modules with RequireJS, you should load the DevExtreme integration and angular modules.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
import 'devextreme/dist/css/dx.common.css!';
import 'devextreme/dist/css/dx.light.css!';

import angular from 'angular';
import 'devextreme/integration/angular';
import dialog from 'devextreme/ui/dialog';
import 'devextreme/ui/button';

var myApp = angular.module('myApp', ['dx']);
myApp.controller("myController", function($scope) {
  $scope.buttonOptions = {
    text: "Say 'Hello world'",
    onClick: function() {
      dialog.alert('Hello world!', '', false);
    }
  };
});

angular.bootstrap(document, ['myApp']);

index.html

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DevExtreme with Jspm and AngularJS example</title>
        <!--Include SystemJS loader and the config file-->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
    </head>
    <body>
        <div ng-controller="myController">
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
            <div dx-button="buttonOptions"></div>
            </div>
        </div>
        <!--Import of the application main entry point-->
         <script>
            System.import('./index.js');
        </script>
    </body>
</html>
Knockout
NOTE
To use KnockoutJS and DevExtreme widget modules with RequireJS, load the DevExtreme integration module.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
import 'devextreme/dist/css/dx.common.css!';
import 'devextreme/dist/css/dx.light.css!';

import ko from 'knockout';
import 'devextreme/integration/knockout';
import dialog from 'devextreme/ui/dialog';
import 'devextreme/ui/button';

var viewModel = {
    buttonOptions: {
        text: "Say 'Hello world'",
        onClick: function() {
        dialog.alert('Hello world!', '', false);
        }
    }
};
ko.applyBindings(viewModel);

index.html

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DevExtreme with Webpack and Knockout example</title>
        <!--Include SystemJS loader and the config file-->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
    </head>
    <body>
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
            <div data-bind="dxButton: buttonOptions"></div>
        </div>
        <!--Import of the application main entry point-->
        <script>
            System.import('./index.js');
        </script>
    </body>
</html>

Use RequireJS

First, install RequireJS to your application folder.

npm install requirejs

Then, install the DevExtreme package.

npm install devextreme

DevExtreme modules are defined using the CommonJS format. RequireJS does not support this format. Thus, convert DevExtreme modules to the AMD format before using them with RequireJS. Use the RequireJS conversion tool to convert modules. Follow these steps to convert the modules.

  • Add the devextreme package to the 'node_modules/devextreme' directory

    npm i devextreme
  • Add global 'r_js' command

    npm i r.js -g
  • Convert the devextreme package and save it to the 'devextreme_amd' directory

    r_js -convert node_modules/devextreme devextreme_amd

To link up the modules to your application using RequireJS, begin by adding themes to your application.

HTML
<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.light.css" />

Then, link RequireJS and define the configuration object.

HTML
<script src="node_modules/requirejs/require.js"></script>
NOTE
Check the supported versions of 3rd-party libraries. For details, see the 3rd-Party Libraries and Frameworks Integration topic.

The example below demonstrates how to create an application with a single button using the modules from a local directory.

jQuery

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with RequireJS and jQuery example</title>

  <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.light.css" />
  <!-- Include RequireJS -->
  <script src="node_modules/requirejs/require.js"></script>
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div id="myButton"></div>
  </div>

  <script>
    require.config({
      paths: {
        "jquery": "node_modules/jquery/dist/jquery",
        // The path where the devExtreme modules are located.
        "devextreme": "node_modules/devextreme"
      }
    });
    // Loads the required scripts.
    require(["jquery", "devextreme/ui/dialog", "devextreme/ui/button"], function($, dialog) {
      $("#myButton").dxButton({
        text: "Say 'Hello world'",
        onClick: function() {
          dialog.alert('Hello world!', '', false);
        }
      });
    });
  </script>
</body>
</html>
AngularJS
NOTE
To use AngularJS and DevExtreme widget modules with RequireJS, load the DevExtreme integration and angular modules.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with RequireJS and AngularJS examples</title>

  <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.light.css" />
  <!-- Include RequireJS -->
  <script src="node_modules/requirejs/require.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
      <div dx-button="buttonOptions"></div>
    </div>
  </div>
  <script>
    require.config({
      paths: {
        "jquery": "node_modules/jquery/dist/jquery",
        "angular": "node_modules/angular/angular",
        // The path where the devExtreme modules are located.
        "devextreme": "node_modules/devextreme"
      },
      shim: {
        "angular": {
          deps: ["jquery"],
          exports: 'angular'
        },
        "devextreme/integration/angular": {
          deps: ['angular']
        }
      }
    });
    // Loads the required scripts. Note that for correct integration with AngularJS,
    // you should load the DevExtreme integration module.
    require(["angular", "devextreme/ui/dialog", "devextreme/integration/angular", "devextreme/ui/button"], function(angular, dialog) {
      var myApp = angular.module('myApp', ['dx']);
      myApp.controller("myController", function($scope) {
        $scope.buttonOptions = {
          text: "Say 'Hello world'",
          onClick: function() {
            dialog.alert('Hello world!', '', false);
          }
        };
      });
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>

</html>
Knockout
NOTE
To use KnockoutJS and DevExtreme widget modules with RequireJS, load the DevExtreme integration module.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with RequireJS and Knockout examples</title>

  <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.light.css" />
  <!-- Include RequireJS -->
  <script src="node_modules/requirejs/require.js"></script>
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div data-bind="dxButton: buttonOptions"></div>
  </div>
  <script>
    require.config({
      paths: {
        "jquery": "node_modules/jquery/dist/jquery",
        "knockout": "node_modules/knockout/build/output/knockout-latest",
        // The path where the DevExtreme modules are located.
        "devextreme": "node_modules/devextreme"
      }
    });
    // Loads the required scripts. Note that for correct integration with KnockoutJS,
    // you should load the devExtreme integration module.
    require(["knockout", "devextreme/ui/dialog", "devextreme/integration/knockout", "devextreme/ui/button"], function(ko, dialog) {
      viewModel = {
        buttonOptions: {
          text: "Say 'Hello world'",
          onClick: function() {
            dialog.alert('Hello world!', '', false);
          }
        }
      };
      ko.applyBindings(viewModel);
    });
  </script>
</body>

</html>
NOTE
We recommend you use other approaches (for example, webpack or jspm) for better productivity.

Create a Custom Bundle

To create a custom bundle using the DevExtreme Bundler tool, you need Webpack and the DevExtreme package installed globally.

npm install -g webpack  
npm install -g devextreme  

Create the DevExtreme configuration file in your project folder.

devextreme-bundler-init <bundle_name>

Here, is a name of the configuration file without an extension. By default, it is dx.custom.

After the file is created, you can edit it and leave only modules and exports you need.

NOTE
To use the DevExtreme widgets with the Knockout approach, check to ensure you use the Knockout integration module.
NOTE
To use the DevExtreme widgets with the AngularJS approach, check to ensure you use the AngularJS integration module.

The following command produces a minified bundle.

devextreme-bundler <bundle_name|file_name>

Then, link the bundle script file to your HTML page.

HTML
<script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>

Link themes to your application.

HTML
<!--Link Themes-->
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.ios7.default.css" />

The example below demonstrates how to create an application with a single button using the modules and shows the reduced configuration file.

jQuery

index.html

HTML
<!DOCTYPE html>
<html>
<head>
  <title>DevExtreme with a custom bundle example</title>
  <meta charset="utf-8">
    <!--External Scripts-->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>
    <!--DevExtreme Bundle-->
    <script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>
    <!--Themes-->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.ios7.default.css" />
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div id="myButton"></div>
  </div>

  <script>
     $("#myButton").dxButton({
        text: "Say 'Hello world'",
        onClick: function() {
          DevExpress.ui.dialog.alert('Hello world!', '', false);
        }
      });
  </script>
</body>

</html>

dx.custom.config.js

JavaScript
/* Core (dx.module-core.js) */
var DevExpress = require("devextreme/bundles/modules/core");
/* UI core (dx.module-core.js) */
var ui = DevExpress.ui = require("devextreme/bundles/modules/ui");
ui.dialog = require("devextreme/ui/dialog");
/* Base widgets (dx.module-widgets-base.js) */
ui.dxButton = require("devextreme/ui/button");
AngularJS Approach

index.js

HTML
<!DOCTYPE html>
<html>
<head>
  <title>DevExtreme with a custom bundle and AngularJS example</title>
  <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <!--DevExtreme Bundle-->
    <script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>
    <!--Link Themes-->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.ios7.default.css" />
</head>
<body>
  <div ng-controller="myController">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
      <div dx-button="buttonOptions"></div>
    </div>
  </div>
  <script>
     var myApp = angular.module('myApp', ['dx']);
      myApp.controller("myController", function($scope) {
        $scope.buttonOptions = {
          text: "Say 'Hello world'",
          onClick: function() {
            DevExpress.ui.dialog.alert('Hello world!', '', false);
          }
        };
      });
      angular.bootstrap(document, ['myApp']);
  </script>
</body>

</html>

dx.custom.config.js

JavaScript
/* Core (dx.module-core.js) */
var DevExpress = require("devextreme/bundles/modules/core");
/* Integrations (dx.module-core.js) */
require("devextreme/integration/angular");
/* UI core (dx.module-core.js) */
var ui = DevExpress.ui = require("devextreme/bundles/modules/ui");
ui.dialog = require("devextreme/ui/dialog");
/* Base widgets (dx.module-widgets-base.js) */
ui.dxButton = require("devextreme/ui/button");
Knockout Approach

index.html

HTML
<!DOCTYPE html>
<html>
<head>
  <title>DevExtreme with a custom bundle and Knockout example</title>
  <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <!--DevExtreme Bundle-->
    <script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>
    <!--Link Themes-->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.ios7.default.css" />
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div data-bind="dxButton: buttonOptions"></div>
  </div>

  <script>
     viewModel = {
        buttonOptions: {
          text: "Say 'Hello world'",
          onClick: function() {
            DevExpress.ui.dialog.alert('Hello world!', '', false);
          }
        }
      };
      ko.applyBindings(viewModel);
  </script>
</body>
</html>

dx.custom.config.js

JavaScript
/* Core (dx.module-core.js) */
var DevExpress = require("devextreme/bundles/modules/core");
/* Integrations (dx.module-core.js) */
require("devextreme/integration/knockout");
/* UI core (dx.module-core.js) */
var ui = DevExpress.ui = require("devextreme/bundles/modules/ui");
ui.dialog = require("devextreme/ui/dialog");
/* Base widgets (dx.module-widgets-base.js) */
ui.dxButton = require("devextreme/ui/button");

DevExtreme Modules Structure

DevExtreme modules have the following structure.

animation

A folder containing modules that expose animation features.

frame

Exposes methods for working with animation.

Exports:

  • requestAnimationFrame - The requestAnimationFrame method

    require("animation/frame").requestAnimationFrame
  • cancelAnimationFrame - The cancelAnimationFrame method

    require("animation/frame").cancelAnimationFrame

fx

Exposes an object that serves as a namespace for the methods that are used to animate UI elements.

Exports:

  • default - The fx object

    require("animation/fx")

presets

Exposes a repository of animations.

Exports:

transition_executor

Exposes an object that serves as a namespace for the methods that are used to perform several specified animations at a time.

Exports:

core

A folder containing core modules.

config

Exposes the global configuration object.

Exports:

devices

Exposes the object that defines the device on which the application is running.

Exports:

  • default - The device object

    require("core/devices")

guid

Exposes an object used to generate and hold the GUID.

Exports:

  • default - The Guid object

    require("core/guid")

data

A folder containing modules used to provide data for widgets.

array_store

Exposes the ArrayStore data access interface.

Exports:

  • default - The ArrayStore data access interface

    require("data/array_store")

custom_store

Exposes the CustomStore data access interface.

Exports:

  • default - The CustomStore data access interface

    require("data/custom_store")

data_source

Exposes the DataSource object.

Exports:

  • default - The DataSource object

    require("data/data_source")

endpoint_selector

Exposes an object used to get URLs that vary in a locally running application and the application running on production..

Exports:

errors

Exposes errors and warnings that may occur when using the DevExtreme Data Library.

Exports:

  • errorHandler - The function called when the Store causes an error. Assign a function to perform a custom action.

    require("data/errors").errorHandler = function(){
        // Implement logic here
    }

local_store

Exposes the LocalStore data access interface.

Exports:

  • default - The LocalStore data access interface

    require("data/local_store")

odata

A folder containing modules exposing OData service.

context

Exposes the ODataContext data access interface.

Exports:

  • default - The ODataContext data access interface

    require("data/odata/context")
store

Exposes the ODataStore data access interface.

Exports:

  • default - The ODataStore data access interface

    require("data/odata/store")
utils

Exposes OData utility objects.

Exports:

  • EdmLiteral - The EdmLiteral object

    require("data/odata/utils").EdmLiteral
  • keyConverters - The odata.keyConverters object

    require("data/odata/utils").keyConverters

query

Exposes a data query interface object.

Exports:

  • default - The Query interface object.

    require("data/query")

utils

Exposes utility objects provided by the DevExtreme data layer.

Exports:

  • base64_encode - The base64_encode method.

    require("data/utils").base64_encode

events

A folder containing modules that expose UI events.

click

Exposes the dxclick event.

require("events/click")

contextmenu

Exposes the dxcontextmenu event.

require("events/contextmenu")

dblclick

Exposes the dxdblclick event.

require("events/dblclick")

drag

Exposes the dxdrag dxdragstart, dxdragend, dxdrop, dxdragenter, dxdragleave events.

require("events/drag")

hold

Exposes the dxhold event.

require("events/hold")

hover

Exposes the dxhoverend, dxhoverstart events.

require("events/hover")

pointer

Exposes the dxpointercancel, dxpointerdown, dxpointerenter, dxpointerleave, dxpointermove, dxpointerout, dxpointerover, dxpointerup events.

require("events/pointer")

swipe

Exposes the dxswipe, dxswipeend, dxswipestart events.

require("events/swipe")

framework

A folder containing modules that expose SPA Framework features.

command

Exposes a markup component used to define markup options for a command.

Exports:

  • default - The dxCommand markup component

    require("framework/command")

html

A folder containing modules that expose HTML application functionality.

command_container

Exposes a markup component used to indicate a widget in a layout markup as a command container.

Exports:

  • default - The dxCommandContainer markup component

    require("framework/html/command_container")
html_application

Exposes an object used to manage views, as well as control the application life cycle.

Exports:

  • default - The HtmlApplication object

    require("framework/html/html_application")
view_engine_components

Exposes components that can be used when defining the markup of an application page.

Exports:

  • dxView - The dxView markup options

    require("framework/html/view_engine_components").dxView
  • dxLayout - The dxLayout markup options

    require("framework/html/view_engine_components").dxLayout
  • dxViewPlaceholder - The dxViewPlaceholder markup options

    require("framework/html/view_engine_components").dxViewPlaceholder
  • dxContentPlaceholder - The dxContentPlaceholder markup options

    require("framework/html/view_engine_components").dxContentPlaceholder
  • dxTransition - The dxTransition markup options

    require("framework/html/view_engine_components").dxTransition
  • dxContent - The dxContent markup options

    require("framework/html/view_engine_components").dxContent

router

Exposes an object responsible for routing.

Exports:

  • default - The router object

    require("framework/router")

state_manager

Exposes an object used to store the current application state.

Exports:

  • default - The stateManager object

    require("framework/state_manager")

view_cache

Exposes an object used to store information on the views displayed in an application.

Exports:

  • default - The viewCache object

    require("framework/view_cache")

integration

A folder containing modules that expose integration features.

angular

The module required for intergation with AngularJS framework.

require("integration/angular")

knockout

The module required for intergation with Knockout framework.

require("integration/knockout")

localization

A folder containing modules that expose localization features.

Besides the listed modules, this folder contains the "messages" folder that provides access to json files containing localized messages. You can use them in the following way.

var deMessages = require('devextreme/localization/messages/de.json');

globalize

A folder that contains modules exposing Globalize integration features.

currency

The module required for custom currency formatting rather than USD.

require("/localization/globalize/currency")
date

The module required for custom date formatting.

require("/localization/globalize/date")
message

The module required for using a custom message dictionary.

require("/localization/globalize/message")
number

The module required for custom number formatting.

require("/localization/globalize/number")

mobile

A folder containing modules that expose mobile utilities.

hide_top_overlay

Exposes the hideTopOverlay method.

Exports:

  • default - The hideTopOverlay method

    require("mobile/hide_top_overlay")

init_mobile_viewport

Exposes the initMobileViewport method.

Exports:

process_hardware_back_button

Exposes the processHardwareBackButton method.

Exports:

ui

A folder that contains modules exposing UI widgets.

accordion

Exposes the Accordion widget.

Exports:

  • default - The Accordion widget

    require("ui/accordion")

action_sheet

Exposes the ActionSheet widget.

Exports:

  • default - The ActionSheet widget

    require("ui/action_sheet")

autocomplete

Exposes the Autocomplete widget.

Exports:

  • default - The Autocomplete widget

    require("ui/autocomplete")

box

Exposes the Box widget.

Exports:

  • default - The Box widget

    require("ui/box")

button

Exposes the Button widget.

Exports:

  • default - The Button widget

    require("ui/button")

calendar

Exposes the Calendar widget.

Exports:

  • default - The Calendar widget

    require("ui/calendar")

check_box

Exposes the CheckBox widget.

Exports:

  • default - The CheckBox widget

    require("ui/check_box")

color_box

Exposes the ColorBox widget.

Exports:

  • default - The ColorBox widget

    require("ui/color_box")

context_menu

Exposes the ContextMenu widget.

Exports:

  • default - The ContextMenu widget

    require("ui/context_menu")

data_grid

Exposes the DataGrid widget.

Exports:

  • default - The DataGrid widget

    require("ui/data_grid")

date_box

Exposes the DateBox widget.

Exports:

  • default - The DateBox widget

    require("ui/date_box")

defer_rendering

Exposes the DeferRendering widget.

Exports:

dialog

Exposes an object that serves as a namespace for methods displaying a message in an application/site.

Exports:

  • alert - The alert method

    require("ui/dialog").alert
  • confirm - The confirm method

    require("ui/dialog").confirm
  • custom - The custom method

    require("ui/dialog").custom

drop_down_box

Exposes the DropDownBox widget.

Exports:

  • default - The DropDownBox widget

    require("ui/drop_down_box")

file_uploader

Exposes the FileUploader widget.

Exports:

  • default - The FileUploader widget

    require("ui/file_uploader")  

form

Exposes the Form widget.

Exports:

  • default - The Form widget

    require("ui/form")

gallery

Exposes the Gallery widget.

Exports:

  • default - The Gallery widget

    require("ui/gallery")

list

Exposes the List widget.

Exports:

  • default - The List widget

    require("ui/list")

load_indicator

Exposes the LoadIndicator widget.

Exports:

  • default - The LoadIndicator widget

    require("ui/load_indicator")

load_panel

Exposes the LoadPanel widget.

Exports:

  • default - The LoadPanel widget

    require("ui/load_panel")

lookup

Exposes the Lookup widget.

Exports:

  • default - The Lookup widget

    require("ui/lookup")

map

Exposes the Map widget.

Exports:

  • default - The Map widget

    require("ui/map")

menu

Exposes the Menu widget.

Exports:

  • default - The Menu widget

    require("ui/menu")

multi_view

Exposes the MultiView widget.

Exports:

  • default - The MultiView widget

    require("ui/multi_view")

nav_bar

Exposes the NavBar widget.

Exports:

  • default - The NavBar widget

    require("ui/nav_bar")

notify

Exposes methods that create a toast message.

Exports:

number_box

Exposes the NumberBox widget.

Exports:

  • default - The NumberBox widget

    require("ui/number_box")

panorama

Exposes the Panorama widget.

Exports:

  • default - The Panorama widget

    require("ui/panorama")

pivot

Exposes the Pivot widget.

Exports:

  • default - The Pivot widget

    require("ui/pivot")

pivot_grid

Exposes the PivotGrid widget.

Exports:

  • default - The PivotGrid widget

    require("ui/pivot_grid")
data_source

Exposes an object that provides acess to data for the PivotGrid data.

Exports:

xmla_store

Exposes the XmlaStore data access interface.

Exports:

  • default - The XmlaStore data access interface

    require("ui/pivot_grid/xmla_store")

pivot_grid_field_chooser

Exposes the PivotGridFieldChooser widget.

Exports:

popover

Exposes the Popover widget.

Exports:

  • default - The Popover widget

    require("ui/popover")

popup

Exposes the Popup widget.

Exports:

  • default - The Popup widget

    require("ui/popup")

progress_bar

Exposes the ProgressBar widget.

Exports:

  • default - The ProgressBar widget

    require("ui/progress_bar")

radio_group

Exposes the RadioGroup widget.

Exports:

  • default - The RadioGroup widget

    require("ui/radio_group")

range_slider

Exposes the RangeSlider widget.

Exports:

  • default - The RangeSlider widget

    require("ui/range_slider")

resizable

Exposes the Resizable widget.

Exports:

  • default - The Resizable widget

    require("ui/resizable")

responsive_box

Exposes the ResponsiveBox widget.

Exports:

  • default - The ResponsiveBox widget

    require("ui/responsive_box")

scheduler

Exposes the Scheduler widget.

Exports:

  • default - The Scheduler widget

    require("ui/scheduler")

scroll_view

Exposes the ScrollView widget.

Exports:

  • default - The ScrollView widget

    require("ui/scroll_view")

select_box

Exposes the SelectBox widget.

Exports:

  • default - The SelectBox widget

    require("ui/select_box")

set_template_engine

Exposes methods that specify a template engine.

Exports:

slide_out

Exposes the SlideOut widget.

Exports:

  • default - The SlideOut widget

    require("ui/slide_out")

slide_out_view

Exposes the SlideOutView widget.

Exports:

  • default - The SlideOutView widget

    require("ui/slide_out_view")

slider

Exposes the Slider widget.

Exports:

  • default - The Slider widget

    require("ui/slider")

switch

Exposes the Switch widget.

Exports:

  • default - The Switch widget

    require("ui/switch")

tab_panel

Exposes the TabPanel widget.

Exports:

  • default - The TabPanel widget

    require("ui/tab_panel")

tabs

Exposes the Tabs widget.

Exports:

  • default - The Tabs widget

    require("ui/tabs")

tag_box

Exposes the TagBox widget.

Exports:

  • default - The TagBox widget

    require("ui/tag_box")

text_area

Exposes the TextArea widget.

Exports:

  • default - The TextArea widget

    require("ui/text_area")

text_box

Exposes the TextBox widget.

Exports:

  • default - The TextBox widget

    require("ui/text_box")

themes

Exposes an object that serves as a namespace for the methods that work with DevExtreme CSS Themes.

Exports:

tile_view

Exposes the TileView widget.

Exports:

  • default - The TileView widget

    require("ui/tile_view")

toast

Exposes the Toast widget.

Exports:

  • default - The Toast widget

    require("ui/toast")

toolbar

Exposes the Toolbar widget.

Exports:

  • default - The Toolbar widget

    require("ui/toolbar")

tooltip

Exposes the Tooltip widget.

Exports:

  • default - The Tooltip widget

    require("ui/tooltip")

tree_list

Exposes the TreeList widget.

Exports:

  • default - The TreeList widget

    require("ui/tree_list")

tree_view

Exposes the TreeView widget.

Exports:

  • default - The dxTrackBar widget

    require("ui/tree_view")

validation_engine

Exposes an object that serves as a namespace for the methods required to perform validation.

Exports:

validation_group

Exposes the ValidationGroup widget.

Exports:

validation_summary

Exposes the ValidationSummary widget.

Exports:

validator

Exposes the Validator widget.

Exports:

  • default - The Validator widget

    require("ui/validator")

viz

A folder containing modules that expose data visualization widgets.

bar_gauge

Exposes the BarGauge widget.

Exports:

  • default - The BarGauge widget

    require("viz/bar_gauge")

bullet

Exposes the Bullet widget.

Exports:

  • default - The Bullet widget

    require("viz/bullet")

chart

Exposes the Chart widget.

Exports:

  • default - The Chart widget

    require("viz/chart")

circular_gauge

Exposes the CircularGauge widget.

Exports:

  • default - The CircularGauge widget

    require("viz/circular_gauge")

export

Exposes export-related methods.

Exports:

linear_gauge

Exposes the LinearGauge widget.

Exports:

  • default - The LinearGauge widget

    require("viz/linear_gauge")

palette

Exposes methods that control palettes.

Exports:

pie_chart

Exposes the PieChart widget.

Exports:

  • default - The PieChart widget

    require("viz/pie_chart")

polar_chart

Exposes the PolarChart widget.

Exports:

  • default - The PolarChart widget

    require("viz/polar_chart")

range_selector

Exposes the RangeSelector widget.

Exports:

  • default - The RangeSelector widget

    require("viz/range_selector")

sparkline

Exposes the Sparkline widget.

Exports:

  • default - The Sparkline widget

    require("viz/sparkline")

themes

Exposes methods that control themes.

Exports:

tree_map

Exposes the TreeMap widget.

Exports:

  • default - The TreeMap widget

    require("viz/tree_map")

utils

Exposes utility methods.

Exports:

  • refreshPaths - The refreshPaths() method

    require("viz/utils").refreshPaths

vector_map

Exposes the VectorMap widget.

Exports:

  • default - The VectorMap widget

    require("viz/vector_map")
projection

Exposes methods of the DevExpress.viz.map object.

Exports:

  • projection - The projection method

    require("viz/vector_map/projection").projection

utils

Exposes the common utility objects.

Exports:

  • compileGetter - The compileGetter method

    require("utils").compileGetter
  • compileSetter - The compileSetter method

    require("utils").compileSetter

aspnet

Exposes client-side utilities required by DevExtreme ASP.NET MVC Controls.

Exports:

  • default - client-side utilities required by DevExtreme ASP.NET MVC Controls

    require("aspnet")