DevExtreme jQuery/JS

https://js.devexpress.com/jQuery/Documentation/19_1/
Admin
DevExtreme is a component suite offering 50+ UI components for creating highly responsive web...
Tokens:1,567,722
Snippets:17,284
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Run One-Command Setup

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application

Use the DevExtreme CLI to automatically install and configure DevExtreme and its dependencies.

```bash
npx -p devextreme-cli devextreme add devextreme-vue
```

--------------------------------

### Start the React Application

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/React_Components/Add_DevExtreme_to_a_React_Application

Execute the start command to launch the development server.

```bash
  1. npm start
```

--------------------------------

### start()

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Common/Utils/TransitionExecutor

Starts all registered animations and returns a promise.

```APIDOC
## start()

### Description
Starts all the animations registered using the enter and leave methods beforehand.

### Returns
- **PromiseLike** - A Promise that is resolved after all the animations are finished.
```

--------------------------------

### Initialize a Form Widget

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/Form/Overview

This example demonstrates the basic setup of a Form widget by binding a data object to a container element.

```html
  1. <div id="formContainer"></div>
```

```javascript
  1. $(function() {
  2.     $("#formContainer").dxForm({
  3.         formData: {
  4.             firstName: "John",
  5.             lastName: "Heart",
  6.             position: "CEO",
  7.             officeNo: 901,
  8.             birthDate: new Date(1964, 3, 15),
  9.             hireDate: new Date(2012, 4, 13),
  10.             city: "Los Angeles",
  11.             phone: "+1(213) 555-9392",
  12.             email: "jheart@dx-email.com"
  13.         }
  14.     });
  15. });
```

--------------------------------

### start()

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Common/Utils

Starts the execution of all registered animations.

```APIDOC
## start()

### Description
Triggers the transition process for all animations registered via enter() and leave() methods.
```

--------------------------------

### Custom Bundle Application Example

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Create_a_Custom_Bundle

A complete example showing an HTML page using a custom bundle and a corresponding configuration file.

```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://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!--DevExtreme Bundle-->
    <script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>
    <!--Themes-->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.1.16/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.1.16/css/dx.light.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>
```

```javascript
/* Core (dx.module-core.js) */
var DevExpress = require("devextreme/bundles/modules/core");
/* Integrations (dx.module-core.js) */
require("devextreme/integration/jquery");
/* 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");
```

--------------------------------

### Install DevExtreme CLI

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Getting_Started/DevExtreme_CLI

Install the DevExtreme CLI globally using npm.

```bash
  1. npm i -g devextreme-cli
```

--------------------------------

### Console Output Example

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/ButtonGroup/Getting_Started_with_ButtonGroup

Example of the message logged to the console when multiple items are selected.

```text
  1. The following styles are selected: bold, underline, strike
```

--------------------------------

### Install Knockout or AngularJS via Bower

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Getting_Started/Installation/Bower_Package

Optional commands to install framework dependencies if required by your project.

```bash
  1. bower install knockout
```

```bash
  1. bower install angular
```

--------------------------------

### Console Output Example

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/ButtonGroup/Getting_Started_with_ButtonGroup

Example of log messages displayed in the browser console when selection changes.

```text
  1. The following style is added: underline
  2. The following style is removed: bold
```

--------------------------------

### Install DevExtreme via Yarn

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Getting_Started/Installation/npm_Package

Commands to install the main DevExtreme package or the latest pre-release version using Yarn.

```bash
yarn add devextreme@19.1 --exact
```

```bash
yarn add devextreme@19.1-next --exact
```

--------------------------------

### Install DevExtreme via CLI

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/React_Components/Add_DevExtreme_to_a_React_Application

Use the DevExtreme CLI to automatically install and configure dependencies in a project with a src folder.

```bash
  1. npx -p devextreme-cli devextreme add devextreme-react
```

--------------------------------

### getStartViewDate()

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/UI_Widgets/dxScheduler/Methods

Gets the current view's start date.

```APIDOC
## getStartViewDate()

### Description
Gets the current view's start date.

### Return Value
- **Date** - The view's start date.
```

--------------------------------

### slice(skip, take)

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Query/Methods

Gets a specified number of data items starting from a given index.

```APIDOC
## slice(skip, take)

### Description
Gets a specified number of data items starting from a given index. Returns a Query object with the transformed data.

### Parameters
- **skip** (Number) - Required - The index of the first data item to get.
- **take** (Number | undefined) - Optional - The number of data items to get.

### Return Value
- **Query** - The Query with transformed data.
```

--------------------------------

### Load entry point with System.import

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Link_Modules

Using System.import to load the main application entry point.

```html
    1. <script>
    2.     System.import('./index.js');
    3. </script>
```

--------------------------------

### Customize keyboard navigation with onFocusedCellChanging

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/UI_Widgets/dxDataGrid/Configuration

This example demonstrates how to loop cell navigation within a single row by resetting the column index when the user reaches the start or end of the row.

```JavaScript
  1. $(function() {
  2.     $("#dataGridContainer").dxDataGrid({
  3.         // ...
  4.         onFocusedCellChanging: function (e) {
  5.             if (e.newColumnIndex == e.prevColumnIndex) {
  6.                 e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0)
  7.             }
  8.         }
  9.     });
  10. });
```

--------------------------------

### Run the Application

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application

Execute the development server command to start the Vue application.

```bash
  1. npm run serve
```

--------------------------------

### Guid Constructor and Methods

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid

Methods available for the Guid object to create instances and retrieve the GUID string value.

```APIDOC
## Guid()

### Description
Creates a new Guid instance. If no value is provided, a new GUID is generated. If a value is provided, the instance contains the specified GUID.

### Methods
- **ctor()**: Creates a new Guid instance that contains a generated GUID.
- **ctor(value)**: Creates a new Guid instance that contains the specified GUID.
- **toString()**: Returns the GUID string. Works identically to valueOf().
- **valueOf()**: Returns the GUID string. Works identically to toString().
```

--------------------------------

### Define Sample Data

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Creates an array of objects for data transformation examples.

```JavaScript
  1. const data = [
  2.     {
  3.         firstName: "John",
  4.         lastName: "Smith",
  5.         city: "San Francisco"
  6.     },
  7.     {
  8.         firstName: "Xavier",
  9.         lastName: "Lee",
  10.         city: "New York"
  11.     },
  12.     {
  13.         firstName: "Maria",
  14.         lastName: "Gomez",
  15.         city: "Denver"
  16.     }
  17. ];
```

--------------------------------

### Configure DataSource store

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/DataSource/Configuration/store

Demonstrates initializing a DataSource with an ArrayStore instance, a configuration object, or a raw array.

```javascript
  1. var ds = new DevExpress.data.DataSource({
  2.     store: new DevExpress.data.ArrayStore({
  3.         // ArrayStore instance
  4.     })
  5.     // ===== or =====
  6.     store: {
  7.         type: "array",
  8.         // ArrayStore configuration object
  9.     }
  10.     // ===== or =====
  11.     store: [
  12.         { id: 1, name: "John Doe" }
  13.     ]
  14. });
```

--------------------------------

### Access Method Values

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Example of using a getter to retrieve the return value of a method.

```JavaScript
    1. const getter = DevExpress.data.utils.compileGetter("getBirthYear");
    2. // the getter returns 1985 and assigns it to the 'year' variable
    3. const year = getter(person); 
```

--------------------------------

### Use Custom Getter Function

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Example of passing a function to compileGetter for custom logic.

```JavaScript
    1. const getter = DevExpress.data.utils.compileGetter(function(dataItem) {
    2.   return dataItem.firstName + " " + dataItem.lastName;
    3. });
    4. // the getter returns "John Smith" and assigns it to the 'fullName' variable
    5. const fullName = getter(person); 
```

--------------------------------

### DataSource Configuration

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Library/DataSource

Example of initializing a DataSource with custom load and byKey functions.

```APIDOC
var infiniteList = new DevExpress.data.DataSource({
    load: function (loadOptions) {
        // Loading data objects
    },
    byKey: function (key) {
        // Retrieving a data object by key
    }
});
```

--------------------------------

### Access Multiple Properties

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Example of passing an array of strings to compileGetter to return an object with multiple properties.

```JavaScript
    1. const getter = DevExpress.data.utils.compileGetter(["firstName", "lastName", "address.city", "getBirthYear"]);
    2. const personData = getter(person); 
```

```Code
    1. {
    2.     firstName: "John",
    3.     lastName: "Smith",
    4.     getBirthYear: 1985,
    5.     address: {
    6.         city: "Los Angeles"
    7.     }
    8. }
```

--------------------------------

### Access Top-Level Properties

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Example of using compiled accessors for a top-level property.

```JavaScript
    1. const getter = DevExpress.data.utils.compileGetter("firstName");
    2. const setter = DevExpress.data.utils.compileSetter("firstName");
    3. // the getter returns "John" and assigns it to the 'name' variable
    4. const name = getter(person);
    5. // assigns "Michael" to 'person.firstName'
    6. setter(person, "Michael");
```

--------------------------------

### Import entry point via SystemJS

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity

Use SystemJS to load the application entry point.

```html
<script>
    System.import('./index.js');
</script>
```

--------------------------------

### Install jspm

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity

Install jspm locally in your application folder.

```bash
npm install jspm
```

--------------------------------

### Use 'this' as Getter

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Example of using 'this' to return the object itself, useful for sorting or grouping simple values.

```JavaScript
    1. const getter = DevExpress.data.utils.compileGetter("this");
    2. // the getter returns "A text" and assigns it to the 'text' variable
    3. const text = getter("A text");
```

--------------------------------

### Create a Widget Instance

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/Common/Advanced/3rd-Party_Frameworks_Integration_API

Demonstrates widget instantiation using both modular imports and the global DevExpress namespace.

```javascript
  1. import Accordion from "devextreme/ui/accordion";
  2. ...
  3. let container = document.getElementById("root");
  4. let element = document.createElement("div");
  5. container.appendChild(element);
  6. let instance = new Accordion(element, options);
  7. ...
```

```javascript
  1. let instance = new DevExpress.ui.dxAccordion(element, options);
```

--------------------------------

### core/guid

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/DevExtreme_Modules_Structure

Exposes the Guid object used to generate and hold GUIDs.

```APIDOC
import Guid from "devextreme/core/guid";
```

--------------------------------

### Access Nested Properties

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Howto/Data_Layer/Data_Layer

Example of using compiled accessors for second or higher level properties.

```JavaScript
    1. const getter = DevExpress.data.utils.compileGetter("address.city");
    2. const setter = DevExpress.data.utils.compileSetter("address.city");
    3. // the getter returns "Los Angeles" and assigns it to the 'city' variable
    4. const city = getter(person); 
    5. // assigns "San Francisco" to 'person.address.city'
    6. setter(person, "San Francisco"); 
```

--------------------------------

### ctor()

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid/Methods

Creates a new Guid instance that contains a generated GUID.

```APIDOC
## ctor()

### Description
Creates a new Guid instance that contains a generated GUID.

### Usage
```javascript
var guid = new DevExpress.data.Guid();
```
```

--------------------------------

### LocalStore Initialization

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/LocalStore

Demonstrates how to instantiate a LocalStore object or use it within a DataSource configuration.

```APIDOC
## LocalStore Initialization

### Description
Initializes a new instance of the LocalStore to manage data in the browser's localStorage.

### Constructor
`new DevExpress.data.LocalStore(options)`

### Options
- **key** (String/Array) - The identifier of the data field(s) that represent the key.
- **name** (String) - The name under which data is saved in the browser's localStorage.
- **data** (Array) - Initial data to be stored.

### Example
```javascript
var store = new DevExpress.data.LocalStore({
    key: "id",
    data: states,
    name: "myLocalData"
});
```
```

--------------------------------

### Create GUID Instances

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Data_Layer/Data_Source_Examples

Generate or instantiate GUIDs using the DevExpress.data.Guid class.

```JavaScript

  1. var guid = new DevExpress.data.Guid("bd330029-8106-6d2d-5371-f27325155e99");


```

```JavaScript

  1. var guid = new DevExpress.data.Guid();


```

--------------------------------

### Initialize Custom Bundle Configuration

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Create_a_Custom_Bundle

Generate the configuration file required for the custom bundle.

```bash
devextreme-bundler-init <bundle_name>
```

--------------------------------

### Install DevExtreme via jspm

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity

Use jspm to install the DevExtreme package.

```bash
jspm install npm:devextreme
```

--------------------------------

### Install DevExtreme package

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Link_Modules

Add the DevExtreme library to your local application folder.

```bash
npm install devextreme
```

--------------------------------

### Install RequireJS and DevExtreme

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Link_Modules

Command to install RequireJS and DevExtreme via npm.

```bash
    1. npm install requirejs devextreme
```

--------------------------------

### ODataStore Initialization

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/ODataStore

Demonstrates how to initialize an ODataStore instance in JavaScript or configure it within a DataSource.

```APIDOC
## ODataStore Initialization

### Description
Initializes a new ODataStore instance to connect to an OData service entity collection.

### JavaScript Example
```javascript
var store = new DevExpress.data.ODataStore({
    url: "http://www.example.com/Northwind.svc/Products",
    key: "ProductID",
    keyType: "Int32"
});
```

### DataSource Configuration Example
```javascript
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: "odata",
        url: "http://www.example.com/Northwind.svc/Products",
        key: "ProductID",
        keyType: "Int32"
    }
});
```
```

--------------------------------

### ctor(value)

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid/Methods

Creates a new Guid instance that contains the specified GUID string.

```APIDOC
## ctor(value)

### Description
Creates a new Guid instance that contains the specified GUID.

### Parameters
- **value** (String) - Required - A string representation of the GUID. Hyphens are optional.

### Usage
```javascript
var guid = new DevExpress.data.Guid("40810dcc-e08b-10a2-8227-c67c8933c31a");
// or
var guid = new DevExpress.data.Guid("40810dcce08b10a28227c67c8933c31a");
```
```

--------------------------------

### Initialize ODataStore in JavaScript

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/ODataStore

Demonstrates creating an ODataStore instance directly or as part of a DataSource configuration.

```javascript
  1. var store = new DevExpress.data.ODataStore({
  2.     url: "http://www.example.com/Northwind.svc/Products",
  3.     key: "ProductID",
  4.     keyType: "Int32",
  5.     // Other ODataStore options go here
  6. });
  7.  
  8. // ===== or inside the DataSource =====
  9. var dataSource = new DevExpress.data.DataSource({
  10.     store: {
  11.         type: "odata",
  12.         url: "http://www.example.com/Northwind.svc/Products",
  13.         key: "ProductID",
  14.         keyType: "Int32",
  15.         // Other ODataStore options go here
  16.     },
  17.     // Other DataSource options go here
  18. });
```

--------------------------------

### Create a new Guid instance

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid/Methods

Initializes a new Guid instance with a generated value.

```JavaScript

  1. var guid = new DevExpress.data.Guid();


```

--------------------------------

### Execute bundle build

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application

Run the build command to generate the bundle.

```bash
    1. npm run build:devextreme-bundle
```

--------------------------------

### Import Guid module

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid

Required import statement to use the Guid object in your application.

```javascript
import Guid from "devextreme/core/guid"
```

--------------------------------

### Initialize a TileView widget

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/TileView/Overview

Basic setup for a TileView container and its initialization using jQuery.

```HTML
  1. <div id="tileViewContainer"></div>
```

```JavaScript
  1. $(function() {
  2.     $("#tileViewContainer").dxTileView({
  3.         dataSource: [
  4.             { text: "Alabama" },
  5.             { text: "Alaska" },
  6.             { text: "Arizona" },
  7.             // ...
  8.         ]
  9.     });
  10. });
```

--------------------------------

### Install jspm and DevExtreme

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Link_Modules

Commands to install jspm and the DevExtreme package via npm.

```bash
    1. npm install jspm
```

```bash
    1. jspm install npm:devextreme
```

--------------------------------

### Initialize CustomStore and DataSource

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/CustomStore

Demonstrates the structure for defining a CustomStore with CRUD operations and how it can be integrated into a DataSource.

```javascript
  1. var store = new DevExpress.data.CustomStore({
  2.     key: "id",
  3.     load: function (loadOptions) {
  4.         // ...
  5.     },
  6.     insert: function (values) {
  7.         // ...
  8.     },
  9.     update: function (key, values) {
 10.         // ...
 11.     },
 12.     remove: function (key) {
 13.         // ...
 14.     }
 15. });
 16.  
 17. // ===== or inside the DataSource =====
 18. var dataSource = new DevExpress.data.DataSource({
 19.     // ...
 20.     // a mix of CustomStore and DataSource options
 21.     // ...
 22. });
```

--------------------------------

### Initialize ArrayStore in JavaScript

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/ArrayStore

Demonstrates creating an ArrayStore instance directly or within a DataSource configuration.

```javascript
  1. var states = [
  2.     { id: 1, state: "Alabama", capital: "Montgomery" },
  3.     { id: 2, state: "Alaska", capital: "Juneau" },
  4.     { id: 3, state: "Arizona", capital: "Phoenix" },
  5.     // ...
  6. ];
  7.  
  8. var store = new DevExpress.data.ArrayStore({
  9.     key: "id",
  10.     data: states,
  11.     // Other ArrayStore options go here
  12. });
  13.  
  14. // ===== or a simplified version =====
  15. var store = new DevExpress.data.ArrayStore(states);
  16.  
  17. // ===== or inside the DataSource =====
  18. var dataSource = new DevExpress.data.DataSource({
  19.     store: {
  20.         type: "array",
  21.         key: "id",
  22.         data: states,
  23.         // Other ArrayStore options go here
  24.     },
  25.     // Other DataSource options go here
  26. });
```

--------------------------------

### Retrieve the Guid value

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid/Methods

Returns the GUID as a hyphenated string. This method works identically to toString().

```JavaScript

  1. var guid = new DevExpress.data.Guid("40810dcce08b10a28227c67c8933c31a");
  2. console.log(guid.valueOf()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a


```

--------------------------------

### Configure LocalStore

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/LocalStore

Initialize a LocalStore instance or integrate it into a DataSource by specifying the storage name and data key.

```javascript
  1. var states = [
  2.     { id: 1, state: "Alabama", capital: "Montgomery" },
  3.     { id: 2, state: "Alaska", capital: "Juneau" },
  4.     { id: 3, state: "Arizona", capital: "Phoenix" },
  5.     // ...
  6. ];
  7.  
  8. var store = new DevExpress.data.LocalStore({
  9.     key: "id",
  10.     data: states,
  11.     name: "myLocalData",
  12.     // Other LocalStore options go here
  13. });
  14.  
  15. // ===== or inside the DataSource =====
  16. var dataSource = new DevExpress.data.DataSource({
  17.     store: {
  18.         type: "local",
  19.         key: "id",
  20.         data: states,
  21.         name: "myLocalData",
  22.         // Other LocalStore options go here
  23.     },
  24.     // Other DataSource options go here
  25. });
```

--------------------------------

### Install Webpack globally

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Link_Modules

Ensure Webpack is available in your environment by installing it globally via npm.

```bash
npm install webpack -g
```

--------------------------------

### Create the bundle

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Link_Modules

Execute the Webpack command to generate the final bundle.

```bash
webpack
```

--------------------------------

### Retrieve the Guid string representation

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/Guid/Methods

Returns the GUID as a hyphenated string. This method works identically to valueOf().

```JavaScript

  1. var guid = new DevExpress.data.Guid("40810dcce08b10a28227c67c8933c31a");
  2. console.log(guid.toString()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a


```

--------------------------------

### Initialize a Resizable Image

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/Resizable/Overview

Basic setup for a resizable container holding an image. The image is styled to fill the container dimensions.

```HTML
  1. <div id="resizable">
  2.     <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
  3. </div>
```

```JavaScript
  1. $(function() {
  2.     $("#resizable").dxResizable({
  3.         width: 200,
  4.         height: 200,
  5.         minWidth: 30,
  6.         minHeight: 30,
  7.         maxWidth: 500,
  8.         maxHeight: 500 
  9.     });
  10. });
```

```CSS
  1. #image {
  2.     height: 100%;
  3.     width: 100%
  4. }
```

--------------------------------

### Create and Populate a LocalStore

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/Common/Data_Visualization_Widgets/Charts_-_Data_Binding/Provide_Data

Initializes a DataSource using HTML5 localStorage and demonstrates how to insert data into the store.

```JavaScript
  1. var dataSource = new DevExpress.data.DataSource({
  2.     store: {
  3.         type: 'local',
  4.         name: 'MyLocalStore'
  5.     },
  6.     paginate: false
  7. });
```

```JavaScript
  1. dataSource.store().insert({ year: 2005, value: 2450 });
```

--------------------------------

### Install DevExtreme via NuGet

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Introduction_to_DevExtreme

Use the NuGet Package Manager to install DevExtreme for .NET projects.

```powershell
    1. Install-Package DevExtreme.Web -Version 19.1.16
```

--------------------------------

### Link system.js and configuration

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity

Include the SystemJS loader and configuration file in your HTML.

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

--------------------------------

### Install DevExtreme Bundler Dependencies

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/Create_a_Custom_Bundle

Install Webpack and the DevExtreme package globally to enable the bundler tool.

```bash
npm install -g webpack
npm install -g devextreme
```

--------------------------------

### Define Data Service for Template Examples

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/React_Components/Component_Configuration_Syntax

Provides the mock data structure required by the template examples.

```javascript
    1. const employee = {
    2.     ID: 1,
    3.     FirstName: 'John',
    4.     LastName: 'Heart',
    5.     Position: 'CEO',
    6.     BirthDate: '1964/03/16',
    7.     HireDate: '1995/01/15',
    8.     Address: '351 S Hill St., Los Angeles, CA',
    9.     Phone: '360-684-1334',
    10.     Email: 'jheart@dx-email.com'
    11. };
    12. 
    13. const positions = [
    14.     'HR Manager',
    15.     'IT Manager',
    16.     'CEO',
    17.     'Controller',
    18.     'Sales Manager',
    19.     'Support Manager',
    20.     'Shipping Manager'
    21. ];
    22. 
    23. export default {
    24.     getEmployee() {
    25.         return employee;
    26.     },
    27.     getPositions() {
    28.         return positions;
    29.     }
    30. }
```

--------------------------------

### Install DevExtreme via CLI

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application

Use the DevExtreme CLI to automatically install and configure DevExtreme in an Angular project.

```bash
npx -p devextreme-cli devextreme add devextreme-angular
```

--------------------------------

### Initialize TagBox with Simple Data

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/TagBox/Overview

Basic setup using a simple array of strings as the data source.

```HTML
  1. <div id="tagBoxContainer"></div>
```

```JavaScript
  1. $(function() {
  2.     $("#tagBoxContainer").dxTagBox({
  3.         dataSource: [
  4.             "HD Video Player",
  5.             "SuperHD Video Player",
  6.             "SuperPlasma 50",
  7.             // ...
  8.         ],
  9.         placeholder: "Select products..."
  10.     });
  11. });
```

--------------------------------

### load(options)

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/CustomStore/Methods

Starts loading data from the CustomStore. Returns a Promise that resolves when the data is successfully loaded.

```APIDOC
## load(options)

### Description
Starts loading data. Accepts optional data processing settings.

### Parameters
- **options** (LoadOptions) - Optional - Data processing settings.

### Return Value
- **PromiseLike** (Object) - A Promise that is resolved after data is loaded (native Promise or jQuery.Promise).
```

--------------------------------

### Initialize a Box Widget

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/Box/Overview

This example demonstrates the HTML structure, JavaScript initialization, and CSS styling required to create a basic Box widget with three items.

```html
  1. <div id="boxContainer">
  2.     <div class="box-item orange" data-options="dxItem: { ratio: 1 }"> Item 1 </div>
  3.     <div class="box-item yellow" data-options="dxItem: { ratio: 1 }"> Item 2 </div>
  4.     <div class="box-item green"  data-options="dxItem: { ratio: 1 }"> Item 3 </div>
  5. </div>
```

```javascript
  1. $(function() {
  2.     $("#boxContainer").dxBox({
  3.         direction: "row",
  4.         height: 100
  5.     });
  6. });
```

```css
  1. .box-item {
  2.     text-align: center;
  3.     padding-top: 34px;
  4.     font-size: 16px;
  5. }
  6.  
  7. .orange { background: #f39e6c }
  8. .yellow { background: #f5e5a6 }
  9. .green { background: #94d7c7 }
```

--------------------------------

### load(options)

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Layer/LocalStore/Methods

Initiates the data loading process from the LocalStore.

```APIDOC
## load(options)

### Description
Starts loading data from the store.

### Parameters
- **options** (LoadOptions) - Optional - Data processing settings.

### Return Value
- **PromiseLike** - A Promise that is resolved after data is loaded.
```

--------------------------------

### Install DevExtreme Packages Manually

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application

Install the required npm packages manually, using exact versioning to ensure stability.

```bash
npm install devextreme@26.1 devextreme-angular@26.1 --save --save-exact
```

--------------------------------

### Import Gallery

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Modularity/DevExtreme_Modules_Structure

Load the Gallery widget.

```javascript
    1. require("ui/gallery");
    2. // ===== or =====
    3. import Gallery from "devextreme/ui/gallery";
```

--------------------------------

### Install Globalize and CLDR Data via npm

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Common/Localization

Command to install the necessary Globalize and CLDR data packages for localization.

```bash
npm install --save-dev devextreme-cldr-data globalize
```

--------------------------------

### Initialize a Button widget

Source: https://js.devexpress.com/jQuery/Documentation/19_1/Guide/Widgets/Button/Overview

Basic setup for a DevExtreme Button using a container element and the dxButton configuration.

```html
  1. <div id="buttonContainer"></div>
```

```javascript
  1. $(function () {
  2.     $("#buttonContainer").dxButton({
  3.         text: "OK",
  4.         onClick: function (e) { 
  5.             DevExpress.ui.notify("The OK button was clicked");
  6.         }
  7.     });
  8. });
```

--------------------------------

### Axis Margin Calculation Example

Source: https://js.devexpress.com/jQuery/Documentation/19_1/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/commonAxisSettings

A concrete example demonstrating how setting minValueMargin and maxValueMargin to 0.1 affects the axis range.

```text
  1. startAxisValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
  2. endAxisValue = 2010 + (2010 - 1960) * 0.1 = 2010 + 50 * 0.1 = 2010 + 5 = 2015
```
Tokens:
Raw