DevExtreme JavaScript Documentation

https://js.devexpress.com/Documentation/
Admin
DevExtreme offers four UI suites for responsive web development with modern JavaScript frameworks,...
Tokens:892,553
Snippets:7,264
Trust Score:10
Update:3 days ago
Show doc for...
Tokens:
Raw
### Install OpenAI SDK

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Install the OpenAI SDK using npm. Ensure DevExtreme is already installed in your project.

```bash
npm install openai
```

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

### Install export libraries (jspdf, devextreme-exceljs-fork, file-saver)

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration

Commands to install the required libraries for client-side export: jspdf for PDF, and devextreme-exceljs-fork and file-saver for Excel.

```bash
<!-- Export to Pdf  -->
npm install jspdf

<!-- Export to Excel -->
npm install --save devextreme-exceljs-fork file-saver
```

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

### Install Vue Router with npm

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Drawer/Getting_Started_with_Navigation_Drawer

Run this command to install the vue-router package, which is required for routing in the Drawer navigation.

```bash
npm install vue-router
```

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

### Install required libraries for export

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/export

Install the required libraries for client-side export: devextreme-exceljs-fork and file-saver.

```bash
npm install --save devextreme-exceljs-fork file-saver
```

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

### load()

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

Starts loading data.

```APIDOC
## load()

### Description
Starts loading data.

### Method
load

### Returns
Promise - A Promise that resolves with the loaded data.

```

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

### Create sample data array for postProcess example

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Layer

Defines an array of message objects with subject, message, and date fields. This data is used as the store for the DataSource in the postProcess example.

```Code
const data = [
    { 
        subject: "First message", 
        message: "This message has been received at 12/09/2013", 
        date: new Date(2013, 08, 11) 
    },
    { 
        subject: "Today message", 
        message: "This message has been received today",
        date: new Date() 
    },
    ...
];
```

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

### Get the GUID with valueOf()

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

Gets the GUID. Works identically to the toString() method. The returned GUID is always hyphened even if the Guid was created with a non-hyphened version. The example logs the result of valueOf() to the console.

```JavaScript
// ...
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
        console.log(this.guid.valueOf()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
    }
}
export default App;
```

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

### Create a sample DataSource

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Layer

Creates a DataSource with sample data for grouping examples.

```JavaScript
const data = [
    { name: "Amelia", birthYear: 1991, gender: "female" },
    { name: "Benjamin", birthYear: 1983, gender: "male" },
    { name: "Andrew", birthYear: 1991, gender: "male" },
    { name: "Danielle", birthYear: 1983, gender: "female" },
    { name: "Lee", birthYear: 1983, gender: "male" },
    { name: "Betty", birthYear: 1983, gender: "female" }
];
const dataSource = new DevExpress.data.DataSource(data);
```

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

### Get the GUID with toString()

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

Gets the GUID. Works identically to the valueOf() method. The returned GUID is always hyphened even if the Guid was created with a non-hyphened version. The example logs the result of toString() to the console.

```JavaScript
// ...
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
        console.log(this.guid.toString()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
    }
}
export default App;
```

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

### Import CustomFileSystemProvider

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

Import the Custom file system provider from 'devextreme/file_management/custom_provider'. Use require or import syntax.

```javascript
require("devextreme/file_management/custom_provider");
// ===== or =====
import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
```

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

### slice(skip, take) example in React

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

Gets two data items starting from index 1 using Query.slice(1, 2). The result is logged to the console, showing the second and third items from the original array.

```javascript
// ...
import Query from 'devextreme/data/query';

const dataObjects = [
    { name: 'Amelia', birthYear: 1991, gender: 'female' },
    { name: 'Benjamin', birthYear: 1983, gender: 'male' },
    { name: 'Daniela', birthYear: 1987, gender: 'female' },
    { name: 'Lee', birthYear: 1981, gender: 'male' }
];

class App extends React.Component {
    constructor(props) {
        super(props);

        this.subset = Query(dataObjects)
            .slice(1, 2)
            .toArray();

        console.log(this.subset);
        /* outputs
        [
            { name: "Benjamin", birthYear: 1983, gender: "male" },
            { name: "Daniela", birthYear: 1987, gender: "female" }
        ] */
    }
}
export default App;
```

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

### beginCustomLoading(messageText)

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTreeList/PredefinedCommandNames

Shows the load panel.

```APIDOC
## beginCustomLoading(messageText)

### Description
Shows the load panel.

### Method
beginCustomLoading

### Parameters
- **messageText** (string) - Required - The message text to display in the load panel.

```

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

### valueOf()

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

Gets the GUID. Works identically to the toString() method. The returned GUID is always hyphened even if the Guid was created with a non-hyphened version.

```APIDOC
## valueOf()

### Description
Gets the GUID. Works identically to the toString() method.

### Method
valueOf()

### Parameters
None

### Return Value
- **String** - The GUID. The returned GUID is always hyphened even if the **Guid** was created with a non-hyphened version.

### Example
```js
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
        console.log(this.guid.valueOf()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
    }
}
export default App;
```
```

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

### Create ODataStore and use inside DataSource

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

Shows how to instantiate an ODataStore with a URL, key, and keyType, and how to use it inside a DataSource. The ODataStore is immutable; use its methods to manipulate it.

```JavaScript
// ...
import ODataStore from 'devextreme/data/odata/store';
import DataSource from 'devextreme/data/data_source';

const store = new ODataStore({
    url: 'http://www.example.com/Northwind.svc/Products',
    key: 'ProductID',
    keyType: 'Int32',
    // Other ODataStore properties go here
});

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ODataStore({
        url: 'http://www.example.com/Northwind.svc/Products',
        key: 'ProductID',
        keyType: 'Int32',
        // Other ODataStore properties go here
    }),
    // Other DataSource properties go here
});
```

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

### toString()

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

Gets the GUID. Works identically to the valueOf() method. The returned GUID is always hyphened even if the Guid was created with a non-hyphened version.

```APIDOC
## toString()

### Description
Gets the GUID. Works identically to the valueOf() method.

### Method
toString()

### Parameters
None

### Return Value
- **String** - The GUID. The returned GUID is always hyphened even if the **Guid** was created with a non-hyphened version.

### Example
```js
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
        console.log(this.guid.toString()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
    }
}
export default App;
```
```

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

### Create a new Guid instance with ctor()

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

Creates a new Guid instance containing a generated GUID. The example shows importing Guid from 'devextreme/core/guid' and assigning a new Guid to this.guid in a React component constructor.

```JavaScript
// ...
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.guid = new Guid();
    }
}
export default App;
```

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

### Start the Dialogflow server

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Runs the server using the npm script defined in package.json.

```bash
npm run start:server
```

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

### Create a Guid instance with a specified value using ctor(value)

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

Creates a new Guid instance containing the specified GUID. The value parameter is a string representation of the GUID, and hyphens are optional. The example shows both hyphenated and non-hyphenated forms.

```JavaScript
// ...
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.guid = new Guid("40810dcc-e08b-10a2-8227-c67c8933c31a");
        // or
        this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
    }
}
export default App;
```

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

### Import ObjectFileSystemProvider

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

Import the Object file system provider from 'devextreme/file_management/object_provider'. Use require or import syntax.

```javascript
require("devextreme/file_management/object_provider");
// ===== or =====
import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
```

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

### load(options)

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

Starts loading data with options.

```APIDOC
## load(options)

### Description
Starts loading data with options.

### Method
load

### Parameters
- **options** (object) - Optional - Options for loading data.

### Returns
Promise - A Promise that resolves with the loaded data.

```

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

### store() - Get underlying store instance

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Methods

Gets the instance of the store underlying the DataSource. The example shows a React component storing the result of ds.store() in this.store.

```JavaScript
// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    store: {
        // Store is configured here
    }
});

class App extends React.Component {
    constructor(props) {
        super(props);

        this.store = ds.store();
    }
}
export default App;
```

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

### Import RemoteFileSystemProvider

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

Import the Remote file system provider from 'devextreme/file_management/remote_provider'. Use require or import syntax.

```javascript
require("devextreme/file_management/remote_provider");
// ===== or =====
import RemoteFileSystemProvider from "devextreme/file_management/remote_provider";
```

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

### Get PolarChart instance with getInstance(element)

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPolarChart/Methods

Shows how to get the PolarChart instance from a DOM element using the static getInstance method. The example includes both modular (import PolarChart) and non-modular (DevExpress.viz.dxPolarChart) approaches.

```typescript
// Modular approach
import PolarChart from "devextreme/viz/polar_chart";
...
let element = document.getElementById("myPolarChart");
let instance = PolarChart.getInstance(element) as PolarChart;
 
// Non-modular approach
let element = document.getElementById("myPolarChart");
let instance = DevExpress.viz.dxPolarChart.getInstance(element);
```

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

### Example calculation with minValueMargin and maxValueMargin set to 0.1

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/valueAxis

Example calculation showing how the axis start and end values are computed when minDataValue is 1960, maxDataValue is 2010, and both margins are 0.1, resulting in an axis from 1955 to 2015.

```plaintext
startAxisValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
endAxisValue = 2010 + (2010 - 1960) * 0.1 = 2010 + 50 * 0.1 = 2010 + 5 = 2015
```

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

### Program.cs: Create MCP client for DevExpress documentation tools

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Creates an MCP client that connects to the DevExpress documentation server at https://api.devexpress.com/mcp/docs and lists available tools. The resulting mcpTools collection is assigned to the SupportAgent's 'tools' parameter.

```csharp
using ModelContextProtocol.Client;

await using var mcpClient = await McpClient.CreateAsync(
    new HttpClientTransport(new HttpClientTransportOptions
    {
        Endpoint = new Uri("https://api.devexpress.com/mcp/docs")
    })
);
var mcpTools = await mcpClient.ListToolsAsync().ConfigureAwait(false);
```

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

### Get group expression (group method)

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Methods

Gets the current group property value. The example shows a DataSource configured with a group expression and then retrieves it using ds.group(), returning { selector: "employeeID", desc: true }.

```JavaScript
// ...
import DataSource from 'devextreme/data/data_source';
 
const ds = new DataSource({
    // ...
    group: { selector: 'employeeID', desc: true }
});
 
class App extends React.Component {
    constructor(props) {
        super(props);
 
        this.groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }
    }
}
export default App;
```

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

### Get BarGauge instance with getInstance (modular and non-modular)

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxBarGauge/Methods

Shows how to get the BarGauge instance from a DOM element with ID 'myBarGauge' using the static getInstance method. The example includes both the modular import approach and the non-modular DevExpress global approach.

```typescript
// Modular approach
import BarGauge from "devextreme/viz/bar_gauge";
...
let element = document.getElementById("myBarGauge");
let instance = BarGauge.getInstance(element) as BarGauge;
 
// Non-modular approach
let element = document.getElementById("myBarGauge");
let instance = DevExpress.viz.dxBarGauge.getInstance(element);
```

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

### Import initMobileViewport from devextreme/common/core/environment

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

Shows how to import the initMobileViewport method from the environment module using require or import.

```javascript
require("devextreme/common/core/environment").initMobileViewport;
// ===== or =====
import { initMobileViewport } from "devextreme/common/core/environment";
```

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

### Create sample DataSource for filtering

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Layer

Creates a DataSource with sample data for the filtering examples.

```JavaScript
const dataSource = new DevExpress.data.DataSource([
    { name: "First item", value: 5 },
    { name: "Second item", value: 7 },
    { name: "Last item", value: 3 }
]);
```

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

### totalCount() - Get total data item count

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Methods

Gets the number of data items in the store after the last load() operation without paging. Takes effect only if requireTotalCount is true. The example sets requireTotalCount to true and stores the result of ds.totalCount() in this.itemCount.

```JavaScript
// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    requireTotalCount: true
});

class App extends React.Component {
    constructor(props) {
        super(props);

        this.itemCount = ds.totalCount();
    }
}
export default App;
```

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

### Get selected row keys or data with getSelectedRowKeys() and getSelectedRowsData()

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Selection

Call the getSelectedRowKeys() or getSelectedRowsData() method to get the selected row's keys or data. The example shows a React component that uses a ref to access the DataGrid instance and defines methods to return the selected keys and data.

```jsx
import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.light.css';

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();

        this.getSelectedRowKeys = () => {
            return this.dataGrid.getSelectedRowKeys();
        }
        this.getSelectedRowsData = () => {
            return this.dataGrid.getSelectedRowsData();
        }
    }

    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    render() {
        return (
            <DataGrid ...
                ref={this.dataGridRef}>
            </DataGrid>
        );
    }
}
export default App;
```

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

### main.js - Vue Router setup and route definitions

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Drawer/Getting_Started_with_Navigation_Drawer

Configures the Vue Router with hash history and defines routes for the Inbox, Sent Mail, Trash, and Spam views. Imports the DevExtreme CSS and mounts the app with the router.

```javascript
import { createApp, h } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import App from './App.vue';
import InboxItemComponent from "./components/InboxItem.vue";
import SentMailComponent from "./components/SentMail.vue";
import TrashItemComponent from "./components/TrashItem.vue";
import SpamItemComponent from "./components/SpamItem.vue";
 
const routes = [
    { path: "", redirect: "/inbox-item" },
    { path: "/inbox-item", component: InboxItemComponent },
    { path: "/sent-mail", component: SentMailComponent },
    { path: "/trash-item", component: TrashItemComponent },
    { path: "/spam-item", component: SpamItemComponent }
];
 
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
 
const app  = createApp({
    render: ()=>h(App)
});
 
app.use(router);
 
app.mount('#app');
```

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

### Enable Filter Panel in React TreeList

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/TreeList/Filtering_and_Searching

Set the filterPanel.visible property to true to make the filter panel visible. This example shows the required import and component setup.

```jsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import TreeList, {
    FilterPanel
} from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList ...>
            <FilterPanel visible={true} />                  
        </TreeList>
    );
}
```

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

### Import devices from devextreme/common/core/environment

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

Shows how to import the devices object from the environment module using require or import.

```javascript
require("devextreme/common/core/environment").devices;
// ===== or =====
import { devices } from "devextreme/common/core/environment";
```

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

### Import TileView component

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

Shows how to import the TileView UI component using require or import syntax.

```javascript
require("devextreme/ui/tile_view");
// ===== or =====
import TileView from "devextreme/ui/tile_view";
```

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

### totalCount(options) example

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Methods

Shows how to get the total count of items that load() would return. The method accepts an object with filter and group properties. The returned Promise resolves with the count or rejects with an error.

```JavaScript
  1. // ...
  2. import ODataStore from 'devextreme/data/odata_store';
  3.  
  4. const store = new ODataStore({
  5.     // ODataStore is configured here
  6. });
  7.  
  8. class App extends React.Component {
  9.     constructor(props) {
  10.         super(props);
  11.  
  12.         store.totalCount()
  13.             .then(
  14.                 (count) => { /* Process the "count" here */ },
  15.                 (error) => { /* Handle the "error" here */ }
  16.             );
  17.     }
  18.     // ...
  19. }
  20. export default App;
```

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

### Use DataSource with inline load, byKey, and update methods

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Source_Examples

This snippet shows a more concise syntax for creating a DataSource without an explicit CustomStore instance, defining load, byKey, and update methods directly.

```JavaScript
var dataSource = new DevExpress.data.DataSource({
    load: function(loadOptions) {
        // . . .
    },
    byKey: function(key, extra) {
        // . . .
    },
    update: function(values) {
        // . . .
    },
    . . .
});
```

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

### slice(skip, take)

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

Gets a specified number of data items starting from a given index. The method takes a skip index and an optional take count, returning a new Query with the subset of data.

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

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

### Method
slice

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

### Example
```js
import Query from 'devextreme/data/query';

const dataObjects = [
    { name: 'Amelia', birthYear: 1991, gender: 'female' },
    { name: 'Benjamin', birthYear: 1983, gender: 'male' },
    { name: 'Daniela', birthYear: 1987, gender: 'female' },
    { name: 'Lee', birthYear: 1981, gender: 'male' }
];

const subset = Query(dataObjects)
    .slice(1, 2)
    .toArray();

console.log(subset);
/* outputs
[
    { name: "Benjamin", birthYear: 1983, gender: "male" },
    { name: "Daniela", birthYear: 1987, gender: "female" }
] */
```
```

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

### getInstance() example for ValidationSummary

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxValidationSummary/Methods

Shows how to get the ValidationSummary instance from a DOM element with ID 'myValidationSummary' using both modular and non-modular approaches. The modular approach imports ValidationSummary from 'devextreme/ui/validation_summary' and uses TypeScript type assertion.

```typescript
// Modular approach
import ValidationSummary from "devextreme/ui/validation_summary";
...
let element = document.getElementById("myValidationSummary");
let instance = ValidationSummary.getInstance(element) as ValidationSummary;

// Non-modular approach
let element = document.getElementById("myValidationSummary");
let instance = DevExpress.ui.dxValidationSummary.getInstance(element);
```

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

### Import FileSystemItem

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

Import the File System Item from 'devextreme/file_management/file_system_item'. Use require or import syntax.

```javascript
require("devextreme/file_management/file_system_item");
// ===== or =====
import FileSystemItem from "devextreme/file_management/file_system_item";
```

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

### Import ResponsiveBox UI component

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

Shows how to import the ResponsiveBox UI component from the 'devextreme/ui/responsive_box' module using require or import syntax.

```javascript
require("devextreme/ui/responsive_box");
// ===== or =====
import ResponsiveBox from "devextreme/ui/responsive_box";
```

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

### React example: calculateCustomSummary with PivotGridDataSource

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields

Shows how to set summaryType to 'custom' and provide a calculateCustomSummary function that handles the 'start', 'calculate', and 'finalize' stages. The 'this' keyword inside the function refers to the field's configuration.

```javascript
import React from 'react';

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        summaryType: 'custom',
        calculateCustomSummary: (options) => {
            switch(options.summaryProcess) {
                case 'start':
                    // Initializing "totalValue" here
                    break;
                case 'calculate':
                    // Modifying "totalValue" here
                    break;
                case 'finalize':
                    // Assigning the final value to "totalValue" here
                    break;
            }
        }
    }]
});

export default function App() {
    return (
        <PivotGrid
            dataSource={pivotGridDataSource}
        />
    );
}
```

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

### Add Columns to Gantt in Vue

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Gantt/Getting_Started_with_Gantt

Use the DxColumn component within DxGantt to specify columns. The example sets width and data-field for the title column, and data-field for start and end columns. Import and register DxColumn from 'devextreme-vue/gantt'.

```Vue
<template>
<DxGantt ... >
    <DxColumn
        :width="300"
        data-field="title"
        caption="Subject"
    />
    <DxColumn
        data-field="start"
        caption="Start Date"
    />
    <DxColumn
        data-field="end"
        caption="End Date"
    />
</DxGantt>
</template>
<script>
// ...
import {
    DxGantt,
    // ...
    DxColumn,
} from 'devextreme-vue/gantt';
 
export default {
    components: {
        DxGantt,
        // ...
        DxColumn,
    },
    // ...
};
</script>
```

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

### Configure AI integration in Vue HtmlEditor

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration

Binds an AI service to the HtmlEditor by specifying the AIIntegration class and the 'ai' toolbar item. The example shows the App.vue template and script setup with the aiIntegration instance and commands array.

```Vue
<template>
    <DxHtmlEditor :ai-integration="aiIntegration">
        <DxToolbar>
            <DxItem
                name="ai"
                :commands="commands"
            />
        </DxToolbar>
    </DxHtmlEditor>
</template>
 
<script setup lang="ts">
import {
    DxHtmlEditor,
    DxToolbar,
    DxItem,
} from 'devextreme-vue/html-editor';
import { AIIntegration } from 'devextreme-vue/common/ai-integration';
 
const aiIntegration = new AIIntegration(provider);
const commands = [
    'summarize',
    'translate',
    'askAI',
];
</script>
```

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

### Bind Toolbar to Web API/MongoDB using createStore (App.tsx)

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxToolbar/Configuration

Configures a CustomStore via createStore from devextreme-aspnet-data-nojquery to load data from a service URL, then passes the store to the Toolbar's dataSource. Requires DevExtreme.AspNet.Data or devextreme-query-mongodb on the server.

```tsx
import { CustomStore } from 'devextreme-react/common/data';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import { Toolbar } from 'devextreme-react/toolbar';

const serviceUrl = "https://url/to/my/service";
const store = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction",
    updateUrl: serviceUrl + "/UpdateAction",
    deleteUrl: serviceUrl + "/DeleteAction"
});

function App() {
    return (
        <Toolbar dataSource={store} />
    );
}
```

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

### Get DataSource filter value in React

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Methods

Use this snippet to retrieve the current filter expression from a DataSource instance. The example creates a DataSource with a filter and calls ds.filter() in the constructor, which returns the filter array. The comment shows the expected return value.

```javascript
   // ...
   import DataSource from 'devextreme/data/data_source';
  
   const ds = new DataSource({
       // ...
       filter: ['age', '>', 18]
   });
  
   class App extends React.Component {
       constructor(props) {
           super(props);
  
           this.filterExpr = ds.filter(); // returns ["age", ">", 18]
       }
   }
   export default App;
```

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

### Import Tooltip component

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

Shows how to import the Tooltip UI component using require or import syntax.

```javascript
require("devextreme/ui/tooltip");
// ===== or =====
import Tooltip from "devextreme/ui/tooltip";
```

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

### React: Save and load state from remote storage using customLoad and customSave

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/stateStoring

Use this code to save and load the TreeList state from a remote storage. It defines sendStorageRequest to make GET and PUT requests, and uses customLoad and customSave in the StateStoring component. The example uses React and the devextreme-react/tree-list package.

```JavaScript
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import TreeList, {
    StateStoring
} from 'devextreme-react/tree-list';
import 'whatwg-fetch';

function sendStorageRequest (storageKey, method, data) {
    const url = "https://url/to/your/storage/" + JSON.stringify(storageKey);
    const requestOptions = {
        method: method,
        headers: {
            "Accept": "text/html",
            "Content-Type": "text/html"
        },
        body: data ? JSON.stringify(data) : null
    };
    return fetch(url, requestOptions)
            .then(response => response.json())
            .catch(() => { throw 'Data Loading Error'; });
}

export default function App() {
    const loadState = useCallback(() => {
        return sendStorageRequest("storageKey", "GET");
    }, []);

    const saveState = useCallback((state) => {
        sendStorageRequest("storageKey", "PUT", state);
    }, []);

    return (
        <TreeList ... >
            <StateStoring 
                enabled={true}
                type="custom"
                customLoad={loadState}
                customSave={saveState}
            />
        </TreeList>
    );
}
```

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

### Create ODataStore with url

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration

Example of creating an ODataStore instance with a URL pointing to an OData entity collection. The URL is set to 'http://www.example.com/Northwind.svc/Products'.

```javascript
// ...
import ODataStore from 'devextreme/data/odata/store';

const store = new ODataStore({
    // ...
    url: 'http://www.example.com/Northwind.svc/Products'
});
```

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

### byKey method example

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Methods

Loads a product with ID 1 and expands the 'Category' navigation property. The method returns a Promise that resolves with the entity or rejects with an error.

```JavaScript
// ...
import ODataStore from 'devextreme/data/odata/store';

const store = new ODataStore({
    // ...
    key: 'Product_ID'
});

class App extends React.Component {
    constructor(props) {
        super(props);
        store.byKey(1, { expand: 'Category' }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
}
export default App;
```

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

### App.vue - Basic FilterBuilder setup

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/FilterBuilder/Overview

Adds a simple FilterBuilder to a Vue page. Each item in the fields array must contain a dataField, and the filter expression in the value property should only use those data fields. The example imports the Fluent Blue light stylesheet and defines a filter value with conditions on Product_Name and Product_Cost.

```Vue
<template>
    <DxFilterBuilder
        v-model:value="filterValue">
        <DxField
            data-field="Product_ID"
            data-type="number"
            caption="ID"
        />
        <DxField data-field="Product_Name" />
        <DxField
            data-field="Product_Cost"
            data-type="number"
            caption="Cost"
            format="currency"
        />
    </DxFilterBuilder>
</template>
 
<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
 
import DxFilterBuilder, {
    DxField
} from 'devextreme-vue/filter-builder';
 
export default {
    components: {
        DxFilterBuilder,
        DxField
    },
    data() {
        return {
            filterValue: [
                [
                    ["Product_Name", "startswith", "Super"],
                    "and",
                    ["Product_Cost", ">=", 300]
                ],
                "or",
                [
                    ["Product_Name", "contains", "HD"],
                    "and",
                    ["Product_Cost", "<", 200]
                ]
            ]
        };
    }
}
</script>
```

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

### Localize AI Assistant response text with customizeResponseText

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant

Use the customizeResponseText function to return localized success and failure messages based on the current locale. The example uses the locale() method from devextreme/localization to get the current locale and returns different text for 'en' and 'fr'. The function is bound to the DxAIAssistant component via the :customize-response-text prop.

```Vue
<template>
    <DxDataGrid>
        <DxAIAssistant
            :customize-response-text="customizeResponseText"
        />
    </DxDataGrid>
</template>

<script setup lang="ts">
import { DxDataGrid, DxAIAssistant, type DxDataGridTypes } from 'devextreme-vue/data-grid';
import { locale } from "devextreme/localization";

const currentLocale = locale();
function customizeResponseText(command) {
    switch (currentLocale) {
        case 'en':
            return {
                success: `Command succeeded: ${command.name}`,
                failure: `Command failed: ${command.name}`,
            };
        case 'fr':
            return { /* Translated texts */ };
    }
};
</script>
```

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

### Import Resizable UI component

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

Shows how to import the Resizable UI component from the 'devextreme/ui/resizable' module using require or import syntax.

```javascript
require("devextreme/ui/resizable");
// ===== or =====
import Resizable from "devextreme/ui/resizable";
```

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

### Generate new Guid

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Source_Examples

Call the Guid constructor without arguments to generate a new GUID.

```JavaScript
var guid = new DevExpress.data.Guid();
```

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

### Configure ContextMenu with createStore from DevExtreme.AspNet.Data

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration

Shows how to bind the ContextMenu to a Web API or MongoDB service using the createStore method from DevExtreme.AspNet.Data. The store is configured with key and load/insert/update/delete URLs, then passed to the ContextMenu's dataSource property.

```tsx
import { CustomStore } from 'devextreme-react/common/data';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import { ContextMenu } from 'devextreme-react/context-menu';

const serviceUrl = "https://url/to/my/service";
const store = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction",
    updateUrl: serviceUrl + "/UpdateAction",
    deleteUrl: serviceUrl + "/DeleteAction"
});

function App() {
    return (
        <ContextMenu dataSource={store} />
    );
}
```

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

### Create Guid from string

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Source_Examples

Create a Guid instance with a specific GUID value by passing a string to the constructor.

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

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

### Import hideTopOverlay from devextreme/common/core/environment

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

Shows how to import the hideTopOverlay method from the environment module using require or import.

```javascript
require("devextreme/common/core/environment").hideTopOverlay;
// ===== or =====
import { hideTopOverlay } from "devextreme/common/core/environment";
```

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

### Create a CustomStore with load, byKey, and update methods

Source: https://js.devexpress.com/Documentation/Guide/Data_Binding/Data_Source_Examples

Use this snippet to implement custom data access logic by defining a CustomStore with load, byKey, and update methods. The store is then passed to a DataSource instance.

```JavaScript
var myStore = new DevExpress.data.CustomStore({
    load: function(loadOptions) {
        // . . .
    },
    byKey: function(key, extra) {
        // . . .
    },
    update: function(values) {
        // . . .
    },
    . . .  
});

var dataSource = new DevExpress.data.DataSource({
    store: myStore
});
```

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

### ctor(value)

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

Creates a new Guid instance that contains the specified GUID. The value parameter is a string representation of the GUID, and hyphens are optional.

```APIDOC
## ctor(value)

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

### Method
ctor(value)

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

### Example
```js
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.guid = new Guid("40810dcc-e08b-10a2-8227-c67c8933c31a");
        // or
        this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
    }
}
export default App;
```
```

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

### ctor()

Source: https://js.devexpress.com/Documentation/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.

### Method
ctor()

### Parameters
None

### Example
```js
import Guid from 'devextreme/core/guid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.guid = new Guid();
    }
}
export default App;
```
```

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

### Import Gallery component

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

Shows how to import the Gallery UI component using require or import.

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

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

### Guid Methods

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

Methods that control a Guid instance: constructors and getters.

```APIDOC
## Guid Methods

### Description
Methods that control a **Guid** instance.

### 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()
Gets the GUID. Works identically to the valueOf() method.

#### valueOf()
Gets the GUID. Works identically to the toString() method.

```

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

### Import refreshPaths from devextreme/viz/utils

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

Shows how to import the refreshPaths method from the utils module using require or import syntax.

```javascript
require("devextreme/viz/utils").refreshPaths;
// ===== or =====
import { refreshPaths } from "devextreme/viz/utils";
```

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

### Unary filter example

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/CustomStore/LoadOptions

Example of a unary filter expression using the '!' operator.

```plaintext
[ "!", [ "dataField", "=", 3 ] ]
```

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

### store()

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Methods

Gets the underlying store instance.

```APIDOC
## store()

### Description
Returns the underlying store instance.

### Method
store

### Parameters
None

### Returns
- **Store** - The underlying store.
```

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

### Create a ResponsiveBox layout with rows, columns, and items

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/ResponsiveBox/Overview

This example creates a ResponsiveBox with a header, content area, left and right side bars, and a footer. On small and extra small screens, the side bars are hidden. The height of ancestor elements (html, body) is set to 100% to make the ResponsiveBox occupy full screen height.

```HTML
<template>
    <DxResponsiveBox>
        <DxRow :ratio="1"/>
        <DxRow :ratio="2"/>
        <DxRow :ratio="0.7"/>
        <DxCol :ratio="0.5" screen="md lg"/>
        <DxCol :ratio="2"/>
        <DxCol :ratio="0.5" screen="md lg"/>
  
        <DxItem>
            <DxLocation screen="md lg" :row="0" :col="0" :colspan="3"/>
            <DxLocation screen="xs sm" :row="0" :col="0"/>
            <template #default>
                <div class="header">
                    <p>Header</p>
                </div>
            </template>
        </DxItem>
  
        <DxItem>
            <DxLocation screen="md lg" :row="1" :col="1"/>
            <DxLocation screen="xs sm" :row="1" :col="0"/>
            <template #default>
                <div class="content">
                    <p>Content</p>
                </div>
            </template>
        </DxItem>
  
        <DxItem>
            <DxLocation screen="md lg" :row="1" :col="0"/>
            <template #default>
                <div class="left-side-bar">
                    <p>Left Bar</p>
                </div>
            </template>
        </DxItem>
  
        <DxItem>
            <DxLocation screen="md lg" :row="1" :col="2"/>
            <template #default>
                <div class="right-side-bar">
                    <p>Right Bar</p>
                </div>
            </template>
        </DxItem>
  
        <DxItem class="footer">
            <DxLocation screen="md lg" :row="2" :col="0" :colspan="3"/>
            <DxLocation screen="xs sm" :row="2" :col="0"/>
            <template #default>
                <div class="footer">
                    <p>Footer</p>
                </div>
            </template>
        </DxItem>
    </DxResponsiveBox>
</template>
<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
  
import { DxResponsiveBox, DxItem, DxLocation, DxCol, DxRow } from 'devextreme-vue/responsive-box';
  
export default {
    components: {
        DxResponsiveBox,
        DxItem,
        DxLocation,
        DxCol,
        DxRow
    }
};
</script>
<style>
html, body { height: 100%; }
#responsiveBox p {
    font-size: 16px;
    padding-top: 10px;
    text-align: center;
}
.header { background: #f39e6c }
.content { background: #f5e5a6 }
.left-side-bar { background: #94d7c7 }
.right-side-bar { background: #77c7e7 }
.footer { background: #7b9bcf }
</style>
```

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

### Binary filter example

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Layer/CustomStore/LoadOptions

Example of a binary filter expression using the '=' operator.

```plaintext
[ "dataField", "=", 3 ]
```

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

### Import MultiView component

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

Shows how to import the MultiView UI component using require or import.

```javascript
require("devextreme/ui/multi_view");
// ===== or =====
import MultiView from "devextreme/ui/multi_view";
```

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

### instance()

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxBarGauge/Methods

Gets the UI component's instance. Use it to access other methods of the UI component.

```APIDOC
## instance()

### Description
Gets the UI component's instance. Use it to access other methods of the UI component.

### Method
Instance method

### Return Value
- **BarGauge** - This UI component's instance.

### See Also
- Call Methods
```

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

### Example calculation of axisStartValue with minValueMargin

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings

Example calculation with minDataValue=1960, maxDataValue=2010, and minValueMargin=0.1, resulting in axisStartValue=1955.

```text
axisStartValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
```

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

### sortIndex data source example

Source: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns

Example data source with three columns: firstName, lastName, and title.

```javascript
const dataSource = [
    { firstName: "John", lastName: "Doe", title: "Sales Manager" },
    { firstName: "Michael", lastName: "King", title: "Sales Representative" },
    // ...
];
```

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

### Import bazeZIndex method from overlay module

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

Shows how to import the bazeZIndex method from the 'devextreme/ui/overlay' module using require or import syntax.

```javascript
require("devextreme/ui/overlay").bazeZIndex;
// ===== or =====
import { bazeZIndex } from "devextreme/ui/overlay";
```

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

### Add start:server script to package.json

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Adds a script to run the Dialogflow server. The script runs 'node server.js'.

```json
{
    // ...
    "scripts": {
        "start:server": "node server.js"
    }
}
```

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

### Console output example for multiple selection

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup

Example console message displayed when multiple styles are selected.

```Plain Text
The following styles are selected: bold, underline, strike
```
Tokens:
Raw