### Install and Configure DevExtreme with a Single Command

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/50 React Components/05 Add DevExtreme to a React Application/01 One-Command Setup.md

Run this command to install and configure DevExtreme and its dependencies in your React application. This is the recommended setup method.

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

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

### jQuery goToItem Example

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Gallery/05 Switch Between Images/10 API.md

Demonstrates how to get the dxGallery instance and call the goToItem method to navigate to the third image (index 2) with animation.

```javascript
const gallery = $("#galleryContainer").dxGallery("instance");
// Goes to the third image
gallery.goToItem(2, true);
```

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

### React goToItem Example

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Gallery/05 Switch Between Images/10 API.md

Demonstrates how to use React's createRef to get a reference to the Gallery component and call the goToItem method on its instance.

```jsx
import React from 'react';

import { Gallery } from 'devextreme-react/gallery';

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

        this.galleryRef = React.createRef();
        this.goToItem = this.goToItem.bind(this);
    }

    goToItem(index) {
        this.galleryRef.current.instance.goToItem(index, true);
    }

    render() {
        return (
            <Gallery
                ref={this.galleryRef}
            />
        );
    }
}

export default App;
```

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

### Install and Configure DevExtreme with Vue CLI

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/55 Vue Components/05 Add DevExtreme to a Vue Application/01 One-Command Setup.md

Run this command to install DevExtreme and its dependencies for your Vue application using the DevExtreme CLI. This command automates the setup process.

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

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

### Basic Popover Setup (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Popover/00 Overview.md

Provides a React example for setting up a Popover component. It targets an image, uses hover events for display, and defines content using a render function. Includes necessary imports.

```javascript
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Popover } from 'devextreme-react/popover';

const renderContent = () => {
    return (
        <p>Popover content</p>
    );
};

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="image" src="https://url/to/an/image" />
                <Popover
                    target="#image"
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                    contentRender={renderContent}
                />
            </div>
        );
    }
}

export default App;
```

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

### Get GUID Value - Angular

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/valueOf().md

Import the Guid class and use its valueOf() method to get the GUID string. Ensure the Guid is initialized correctly.

```typescript
import Guid from "devextreme/core/guid";
// ...
export class AppComponent {
    constructor() {
        let guid = new Guid("40810dcce08b10a28227c67c8933c31a");
        console.log(guid.valueOf()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
    }
}
```

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

### Get GUID Value - React

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/valueOf().md

For React applications, import the Guid class and use the valueOf() method to get the GUID string. The returned string is always hyphened.

```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;
```

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

### Configure LocalStore with Data

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/LocalStore/LocalStore.md

Demonstrates how to initialize a LocalStore with a key, initial data, and a name for storage. This can be done directly or within a DataSource configuration.

```javascript
var states = [
    { id: 1, state: "Alabama", capital: "Montgomery" },
    { id: 2, state: "Alaska", capital: "Juneau" },
    { id: 3, state: "Arizona", capital: "Phoenix" },
    // ...
];

var store = new DevExpress.data.LocalStore({
    key: "id",
    data: states,
    name: "myLocalData",
    // Other LocalStore properties go here
});

// ===== or inside the DataSource =====
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: "local",
        key: "id",
        data: states,
        name: "myLocalData",
        // Other LocalStore properties go here
    },
    // Other DataSource properties go here
});
```

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

### Basic Popover Setup (ASP.NET MVC)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Popover/00 Overview.md

Demonstrates how to configure a Popover using the DevExtreme ASP.NET MVC Controls extension. It targets an image and sets hover events for showing and hiding the popover.

```cshtml
@(Html.DevExtreme().Popover()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Popover content</p>
    </text>)
)
<img id="image" src="https://url/to/an/image" />
```

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

### Get GUID Value - jQuery

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/valueOf().md

Use the valueOf() method to retrieve the GUID string. The GUID is always hyphened.

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

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

### Guid.valueOf()

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/valueOf().md

Gets the GUID. Works identically to the toString() method. The returned GUID is always hyphened.

```APIDOC
## Guid.valueOf()

### Description
Gets the GUID. Works identically to the [toString()](/api-reference/30%20Data%20Layer/Guid/3%20Methods/toString().md '/Documentation/ApiReference/Data_Layer/Guid/Methods/#toString') method.

### Method
`valueOf()`

### Parameters
This method does not take any parameters.

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

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

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

### React: Convert Guid to String

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/toString().md

Provides an example of using the toString() method with a Guid object in a React component. The method consistently returns the GUID with hyphens.

```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;
```

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

### Run Application Command

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/07 Using SystemJS/90 Run the Application.md

Execute this command in your project's root directory to start the development server.

```bash
npm start
```

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

### Basic Map Configuration (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Map/00 Overview.md

Provides a React example for implementing the Map component, demonstrating the use of default props for initial configuration.

```javascript
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Map } from 'devextreme-react/map';

const centerCoordinates = { lat: 40.749825, lng: -73.987963 };

class App extends React.Component {
    render() {
        return (
            <Map
                defaultZoom={10}
                controls={true}
                defaultCenter={centerCoordinates}
            />
        );
    }
}

export default App;
```

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

### Get Filter Expression (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/PivotGridDataSource/3 Methods/filter().md

Provides an example of how to get the filter expression from a PivotGridDataSource instance in a React application.

```javascript
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    filter: ['age', '>', 18]
});

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.filterExpr = pivotGridDataSource.filter(); // returns ["age", ">", 18]
    }
    // ...
}
export default App;
```

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

### Get GUID Value - Vue

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/valueOf().md

In Vue components, import the Guid class and call valueOf() on an instance to obtain the GUID string. This method ensures a hyphened output.

```javascript
import Guid from 'devextreme/core/guid';

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

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

### Basic Popover Setup (Angular)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Popover/00 Overview.md

Shows how to implement a Popover in an Angular application, targeting an image and setting hover-based show and hide events. Includes necessary module import.

```html
<img id="image" src="https://url/to/an/image" />
<dx-popover
    target="#image"
    show-event="dxhoverstart"
    hide-event="dxhoverend">
    <div *dxTemplate="let data of 'content'">
        <p>Popover content</p>
    </div>
</dx-popover>
```

```typescript
import { DxPopoverModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPopoverModule
    ],
    // ...
})
```

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

### Install RequireJS and DevExtreme

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/01 Link Modules/30 Use RequireJS.md

Install RequireJS and DevExtreme using npm. This is the initial step for setting up a modular application.

```bash
npm install requirejs devextreme
```

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

### getStartViewDate()

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/10 UI Components/dxScheduler/3 Methods/getStartViewDate().md

Gets the current view's start date.

```APIDOC
## getStartViewDate()

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

### Method
`getStartViewDate()`

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

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

### Get All Series (jQuery)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/PieChart/10 Series/45 Access a Point Using the API.md

Use the getAllSeries() method to retrieve all series from a dxPieChart instance in jQuery. This example shows how to get the first series.

```javascript
var series = $("#pieChartContainer").dxPieChart("getAllSeries")[0];
```

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

### CommonJS Setup with Globalize

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md

Demonstrates how to set up Globalize using CommonJS syntax, including requiring localization modules, message dictionaries, CLDR data, and initializing the locale.

```javascript
<!--JavaScript-->
require('devextreme/localization/globalize/message');
require('devextreme/localization/globalize/number');
require('devextreme/localization/globalize/currency');
require('devextreme/localization/globalize/date');

// Dictionaries for German and Russian languages
const deMessages = require('devextreme/localization/messages/de.json');
const ruMessages = require('devextreme/localization/messages/ru.json');

const Globalize = require('globalize');
Globalize.load(
    // Common and language-specific CLDR JSONs
    require('devextreme-cldr-data/supplemental.json'),
    require('devextreme-cldr-data/main/de.json'),
    require('devextreme-cldr-data/main/ru.json')
);

Globalize.loadMessages(deMessages);
Globalize.loadMessages(ruMessages);

Globalize.locale(navigator.language);
```

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

### jQuery Example for Default List Templates

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/zz Common/30 Templates/05 Default Templates.md

Demonstrates how to configure a dxList using HTML markup with dxItem options. This approach is an alternative to using the dataSource property directly.

```html
<div id="list">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <i>Oranges</i>
    </div>
</div>
```

```javascript
$(function() {
    $("#list").dxList({/* ... */});
});
```

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

### Get Column Area Fields (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/PivotGridDataSource/3 Methods/getAreaFields(area_collectGroups).md

Provides an example of how to get fields from the 'column' area in a React component. The `collectGroups` parameter is set to true.

```javascript
// ...
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const pivotGridDataSource = new PivotGridDataSource({
    // PivotGridDataSource is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.columnAreaFields = pivotGridDataSource.getAreaFields('column', true);
    }
    // ...
}
export default App;
```

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

### Configure LocalStore with Data (Knockout)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/LocalStore/LocalStore.md

Demonstrates how to initialize a LocalStore with a key, initial data, and a storage name within a Knockout ViewModel. This can be done directly or within a DataSource configuration.

```javascript
var states = [
    { id: 1, state: "Alabama", capital: "Montgomery" },
    { id: 2, state: "Alaska", capital: "Juneau" },
    { id: 3, state: "Arizona", capital: "Phoenix" },
    // ...
];

var viewModel = {
    store: new DevExpress.data.LocalStore({
        key: "id",
        data: states,
        name: "myLocalData",
        // Other LocalStore properties go here
    })

    // ===== or inside the DataSource =====
    dataSource: new DevExpress.data.DataSource({
        store: {
            type: "local",
            key: "id",
            data: states,
            name: "myLocalData",
            // Other LocalStore properties go here
        },
        // Other DataSource properties go here
    })
};

ko.applyBindings(viewModel);
```

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

### Get Total Count (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/DataSource/3 Methods/totalCount().md

This React example shows how to get the total number of items from a DataSource. Make sure requireTotalCount is set to true.

```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;
```

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

### Initialize DevExtreme Bundler Configuration

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/015 Create a Custom Bundle/Create a Custom Bundle.md

Create a DevExtreme configuration file for your custom bundle. Replace <bundle_name> with your desired configuration file name.

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

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

### Task Data Structure Example

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Gantt/10 Gantt Elements/10 Task.md

An example of a task object structure with default field names for 'id', 'parentId', 'title', 'start', 'end', and 'progress'.

```javascript
{
    'id': 1,
    'parentId': 0,
    'title': 'Software Development',
    'start': new Date('2019-02-21T05:00:00.000Z'),
    'end': new Date('2019-07-04T12:00:00.000Z'),
    'progress': 31       
}
```

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

### Importing the devices module (ES Modules)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/02 DevExtreme Modules Structure/core/devices.md

Demonstrates how to import the 'devices' module using ES Modules syntax.

```javascript
import devices from "devextreme/core/devices";
```

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

### Install and Configure DevExtreme with DevExtreme CLI

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/01 One-Command Setup.md

Run this command to install DevExtreme and its dependencies in your Angular CLI application. This command automates the setup process.

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

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

### Get All Series (Vue)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/PieChart/10 Series/45 Access a Point Using the API.md

For Vue.js applications, use the ref attribute to access the dxPieChart instance and then call getAllSeries() to retrieve all series. This example gets the first series.

```vue
<template>
    <DxPieChart ...
        ref="pieChart">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    data() {
        return {
            series: []
        };
    },
    methods: {
        getSeries() {
            this.series = this.$refs.pieChart.instance.getAllSeries()[0];
        }
    }
}
</script>
```

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

### Knockout Example for Default List Templates

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/zz Common/30 Templates/05 Default Templates.md

Demonstrates configuring a dxList with Knockout bindings. Items are defined using dxItem options, allowing for properties like text, disabled, and visible to be set directly.

```html
<div data-bind="dxList: { ... }">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <i>Oranges</i>
    </div>
</div>
```

```javascript
var viewModel = {
    // ...
};

ko.applyBindings(viewModel);
```

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

### Basic Popover Setup (jQuery)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Popover/00 Overview.md

Demonstrates how to create a simple Popover and attach it to an image element using jQuery. Configure show and hide events for hover interactions.

```html
<img id="image" src="https://url/to/an/image" />
<div id="popoverContainer">
    <p>Popover content</p>
</div>
```

```javascript
$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend'
    });
});
```

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

### Get Selected Nodes in React

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/10 UI Components/dxTreeView/3 Methods/getSelectedNodes().md

This React example demonstrates how to get selected nodes from a dxTreeView using a React ref. It includes necessary imports for DevExtreme and the TreeView component.

```javascript
import React from 'react';

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

import TreeView from 'devextreme-react/tree-view';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.treeViewRef = React.createRef();
        this.selectedNodes = [];
        this.getSelectedNodes = () => {
            this.selectedNodes = this.treeView.getSelectedNodes();
        }
    }

    get treeView() {
        return this.treeViewRef.current.instance;
    }

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

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

### Guid.toString()

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Guid/3 Methods/toString().md

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

```APIDOC
## Guid.toString()

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

### Method
`toString()`

### Returns
String - The GUID, always hyphened.

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

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

### Install DevExtreme Bundler and Webpack

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/015 Create a Custom Bundle/Create a Custom Bundle.md

Install the DevExtreme Bundler tool and Webpack globally to prepare your environment for creating custom bundles.

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

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

### Create DataSource with Store and Configuration

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/70 Data Binding/5 Data Layer/1 Creating DataSource/2 From Store.md

Pass a Store instance along with other DataSource configuration properties like sort and pageSize.

```javascript
var store = new DevExpress.data.ArrayStore(array);
var dataSource = new DevExpress.data.DataSource({
    sort: "name",
    pageSize: 10,
    store: store
});
```

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

### Get All Fields (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/PivotGridDataSource/3 Methods/fields().md

Provides an example of accessing all fields from a PivotGridDataSource in a React component.

```javascript
// ...
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const pivotGridDataSource = new PivotGridDataSource({
    // PivotGridDataSource is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.pivotGridFields = pivotGridDataSource.fields();
    }
    // ...
}
export default App;
```

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

### Get Child Cell by Row Direction

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/10 UI Components/dxPivotGrid/5 Summary Cell/child(direction_fieldValue).md

Retrieves a child cell in the 'row' direction for a specific field value. This example demonstrates how to get the cell corresponding to August (month 8).

```javascript
var targetCell = sourceCell.child("row", 8); //August is the 8th month
```

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

### Basic TileView Initialization (Vue)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/TileView/00 Overview.md

Sets up a TileView component in Vue using a data source. Requires importing the DxTileView component and CSS.

```vue
<template>
    <DxTileView :data-source="dataSource"/>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            dataSource: [
                { text: 'Alabama' },
                { text: 'Alaska' },
                { text: 'Arizona' },
                // ...
            ]
        };
    }
}
</script>
```

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

### Install DevExtreme-ThemeBuilder v20.1 and Build Themes

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/7 npm Packages.md

If your application was created using the DevExtreme CLI, install the devextreme-themebuilder package at version 20.1 and then run the build-themes command.

```bash
npm install devextreme-themebuilder@20.1 --save --save-exact
npm run build-themes
```

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

### slice(skip, take)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Query/3 Methods/slice(skip_take).md

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.

### Parameters
#### Path 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
Query - The **Query** with transformed data.
```

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

### Configure TileView with Custom Tile Size (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/TileView/03 Specify the Size of Tiles.md

Provides a React example for configuring dxTileView, setting base dimensions and a custom size for a specific tile via height and widthRatio in the data.

```javascript
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

const tileViewData = [
    { text: 'Maine', capital: 'Augusta' },
    { text: 'Maryland', capital: 'Annapolis' },
    { text: 'Massachusetts', capital: 'Boston', height: 2, widthRatio: 2 }
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TileView
                dataSource={tileViewData}
                baseItemHeight={130}
                baseItemWidth={180}
            />
        );
    }
}

export default App;
```

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

### getValue()

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/10 UI Components/dxRangeSelector/3 Methods/getValue().md

Gets the currently selected range. Returns the start and end values of the selected range.

```APIDOC
## getValue()

### Description
Gets the currently selected range.

### Method
`getValue()`

### Returns
Array<Number, String, Date> - The start and end values.
```

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

### Configure LocalStore with Data (AngularJS)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/LocalStore/LocalStore.md

Demonstrates how to initialize a LocalStore with a key, initial data, and a storage name in an AngularJS controller. This can be done directly or within a DataSource configuration.

```javascript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        var states = [
            { id: 1, state: "Alabama", capital: "Montgomery" },
            { id: 2, state: "Alaska", capital: "Juneau" },
            { id: 3, state: "Arizona", capital: "Phoenix" },
            // ...
        ];
        $scope.store = new DevExpress.data.LocalStore({
            key: "id",
            data: states,
            name: "myLocalData",
            // Other LocalStore properties go here
        });

        // ===== or inside the DataSource =====
        $scope.dataSource = new DevExpress.data.DataSource({
            store: {
                type: "local",
                key: "id",
                data: states,
                name: "myLocalData",
                // Other LocalStore properties go here
            },
            // Other DataSource properties go here
        });
    });
```

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

### Get Series Point by Position (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Chart/14 Series Points/25 Access a Series Point Using the API.md

Retrieves a specific series point using its zero-based index within the series. This example demonstrates how to access the chart instance and series to get a point by its position.

```javascript
import React from 'react';
import Chart from 'devextreme-react/chart';

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

    render() {
        return (
            <Chart ref={this.chartRef} ... >
            </Chart>
        );
    }

    getFirstPoint () {
        const series = this.chartRef.current.instance.getSeriesByName("Series 1");
        const firstPoint = series.getPointByPos(0);
        // ...
    }
}

export default App;
```

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

### Run Vue Application

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/55 Vue Components/05 Add DevExtreme to a Vue Application/80 Run the Application.md

Execute this command in your project's root directory to start the development server. Access the application via the provided URL.

```bash
npm run serve
```

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

### Get Series Point by Position (Vue)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Chart/14 Series Points/25 Access a Series Point Using the API.md

Retrieves a specific series point using its zero-based index within the series. This example shows how to access the chart instance and series to get a point by its position.

```javascript
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    },
    methods: {
        getFirstPoint () {
            const series = this.$refs.chart.instance.getSeriesByName("Series 1");
            const firstPoint = series.getPointByPos(0);
            // ...
        }
    }
}
```

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

### Get Series Point by Position (Angular)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Chart/14 Series Points/25 Access a Series Point Using the API.md

Retrieves a specific series point using its zero-based index within the series. This example demonstrates how to access the chart instance and series to get a point by its position.

```typescript
import { ..., ViewChild } from "@angular/core";
import { DxChartModule, DxChartComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
    // Prior to Angular 8
    // @ViewChild(DxChartComponent) chart: DxChartComponent;
    firstPoint: any = {};
    getFirstPoint() {
        let series = this.chart.instance.getSeriesByName("Series 1");
        this.firstPoint = series.getPointByPos(0);
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
```

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

### Install DevExtreme Package

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/01 Link Modules/10 Use Webpack.md

Install the DevExtreme package within your application's directory. This makes the library's components available for use.

```bash
npm install devextreme
```

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

### CellAddress.row

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/_hidden/CellAddress/row.md

Gets the index of the row that contains the cell. The index starts at 1 to match the Excel indexing system.

```APIDOC
## CellAddress.row

### Description

The index of a row that contains the cell.

### Type

Number

### Details

This index begins with 1 to match the Excel indexing system.
```

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

### Basic dxItem Usage in jQuery

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/10 UI Components/Markup Components/dxItem/dxItem.md

Demonstrates how to use dxItem with basic text and property configurations in a dxList using jQuery.

```html
<!--HTML-->
<div id="list">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <!-- Custom markup -->
    </div>
</div>
```

```javascript
<!--JavaScript-->
$(function() {
    $("#list").dxList({/* ... */});
});
```

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

### getSelection()

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/10 UI Components/dxHtmlEditor/3 Methods/getSelection().md

Gets the selected content's position and length. Returns an object with the start index and length of the selection.

```APIDOC
## getSelection()

### Description
Gets the selected content's position and length.

### Method
JavaScript Method

### Returns
Object - The selected content's range. Has the following structure:

- **index** (number) - A zero-based index at which the selection starts.
- **length** (number) - The selected content's length. Embedded items have a length of 1.
```

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

### Importing the devices module (CommonJS)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/02 DevExtreme Modules Structure/core/devices.md

Demonstrates how to import the 'devices' module using CommonJS syntax.

```javascript
require("core/devices");
```

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

### Angular: Generate GUID and Update Upload URL

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/FileUploader/99 How To/20 Specify a file's GUID.md

This Angular snippet shows how to bind the `uploadUrl` and handle the `valueChanged` event to dynamically update the upload URL with a generated GUID. It includes the necessary component and module setup.

```html
    <!-- tab: app.component.html -->
    <dx-file-uploader
        [(uploadUrl)]="uploadUrl"
        [multiple]="false"
        uploadMode="instantly"
        (onValueChanged)="onValueChanged($event)">
    </dx-file-uploader>
```

```typescript
    <!-- tab: app.component.ts -->
    import { Component, NgModule } from '@angular/core';
    import { BrowserModule } from "@angular/platform-browser";
    import { DxFileUploaderModule } from "devextreme-angular";
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        value: any[] = [];
        uploadUrl: string = "https://js.devexpress.com/Content/Services/upload.aspx";
        onValueChanged(e) {
            this.uploadUrl = this.updateQueryStringParameter("fileGuid", this.uuidv4());
        }
        updateQueryStringParameter(key, value) {
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = this.uploadUrl.indexOf("?") !== -1 ? "&" : "?";
            if (this.uploadUrl.match(re)) {
                return this.uploadUrl.replace(re, "$1" + key + "=" + value + "$2");
            } else {
                return this.uploadUrl + separator + key + "=" + value;
            }
        }
        //https://stackoverflow.com/questions/105034/how-to-create-guid-uuid
        uuidv4() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
            var r = (Math.random() * 16) | 0,
                v = c === "x" ? r : (r & 0x3) | 0x8;
            return v.toString(16);
            });
        }
    }

    @NgModule({
        imports: [BrowserModule, DxFileUploaderModule],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
    })
    export class AppModule {}
```

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

### Serve the Ionic Application

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/05 Using Ionic/90 Run the Application.md

Run this command in your project's root directory to start the development server. The application will be accessible at http://localhost:8100/.

```bash
ionic serve
```

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

### Get Key Property (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Store/3 Methods/key().md

Provides an example of accessing the key property of a DevExtreme data store within a React component.

```javascript
// ...
import {WidgetName} from 'devextreme/data/widget_name';

const store = new WidgetName({
    // ...
    key: 'ProductID'
});

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

        this.keyProps = store.key(); // returns "ProductID"
    }
    // ...
}
export default App;
```

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

### Vue: Box with Item Sizes and Ratios

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Box/05 Specify an Item Size.md

Illustrates configuring a dxBox with items specifying baseSize and ratio in a Vue.js application. This example includes the template, script for imports, and styles.

```html
<template>
    <DxBox
        :height="100"
        :width="600">
        <DxItem :baseSize="200" :ratio="6">
            <template #default>
                <div class="box-item orange"> Item 1 </div>
            </template>
        </DxItem>
        <DxItem :baseSize="100" :ratio="2">
            <template #default>
                <div class="box-item yellow"> Item 2 </div>
            </template>
        </DxItem>
        <DxItem :baseSize="150" :ratio="1">
            <template #default>
                <div class="box-item green"> Item 3 </div>
            </template>
        </DxItem>
    </DxBox>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxBox, DxItem } from 'devextreme-vue/box';

export default {
    components: {
        DxBox,
        DxItem
    }
};
</script>
<style>
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
</style>
```

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

### Basic TileView Initialization in React

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/TileView/00 Overview.md

Demonstrates how to initialize a TileView component in a React application. Ensure you import the necessary Devextreme common and theme CSS files.

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

import { TileView } from 'devextreme-react/tile-view';

class App extends React.Component {
    render() {
        return (
            <TileView direction="vertical"/>
        );
    }
}

export default App;
```

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

### Configure Default Context Menu Items

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/_hidden/dxFileManagerContextMenu/items/items.md

Shows how to specify default context menu items like 'create' and customize their appearance using an array of strings and objects.

```javascript
<!--JavaScript-->
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                "create", // default item
                {
                    name: "create",
                    text: "Create Directory",
                    beginGroup: true
                }
                //...
            ]
        }            
    });
});  
```

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

### Get Sorted Array Data (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/Query/3 Methods/toArray().md

Provides an example of using the toArray() method in a React component to obtain a sorted array from a Query.

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

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

        this.data = Query([10, 20, 50, 40, 30])
            .sortBy()
            .toArray();

        console.log(this.data); // outputs [10, 20, 30, 40, 50]
    }
}
export default App;
```

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

### Get Filter Expression in jQuery

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/DataSource/3 Methods/filter().md

Use the filter() method to retrieve the filter expression applied to the DataSource. This example shows its usage with jQuery.

```javascript
var ds = new DevExpress.data.DataSource({
    // ...
    filter: ["age", ">", 18]
});

var filterExpr = ds.filter(); // returns ["age", ">", 18]
```

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

### Importing GUID Module (ES Modules)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Modularity/02 DevExtreme Modules Structure/core/guid.md

Demonstrates how to import the GUID module using ES Modules syntax.

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

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

### Bind List to OData Service (Angular)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/List/03 Data Binding/15 OData Service.md

Configure an ODataStore for a dxList in Angular. This example includes necessary module imports and component setup.

```typescript
<!--TypeScript-->
    import { DxListModule } from "devextreme-angular";
    import ODataStore from "devextreme/data/odata/store";
    // ...
    export class AppComponent {
        listDataSource = new ODataStore({
            url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
            key: "Product_ID"
        });
    }
    @NgModule({
        imports: [
            // ...
            DxListModule
        ],
        // ...
    })
```

```html
    <!--HTML-->
    <dx-list
        [dataSource]="listDataSource">
        <div *dxTemplate="let data of 'item'">
            <img class="item-image" src="data:image/jpg;base64,{{data.Product_Primary_Image}}" style="height:30px; width:30px">
            <p class="item-text">{{data.Product_Name}}</p>
        </div>
    </dx-list>
```

```css
    <!--CSS-->
    .item-image {
        vertical-align: middle;
    }

    .item-text {
        display: inline-block;
        vertical-align: middle;
        margin: 0px 0px 0px 10px;
    }
```

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

### Create DataSource with ArrayStore

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/zz Common/10 Data Visualization Widgets/85 Charts - Data Binding/10 Provide Data/30 Using the Data Library/20 Using an ArrayStore.md

Illustrates creating a DataSource with an ArrayStore for chart data. Pagination is recommended to be turned off.

```javascript
var dataSource = new DevExpress.data.DataSource({
	store: {
		type: 'array',
		data: [
			{ year: 2005, value: 2450 },
			{ year: 2006, value: 2156 },
			// ...
			{ year: 2014, value: 3650 }
		]
	},
	paginate: false
});
```

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

### React Example for DataSource.select()

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/DataSource/3 Methods/select(expr).md

Provides a React example of how to use the select method on a DataSource. Field names can be passed as an array or as individual arguments.

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

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

class App extends React.Component {
    constructor(props) {
        super(props);
        
        ds.select(['firstName', 'lastName', 'birthDate']);
        // or
        // ds.select('firstName', 'lastName', 'birthDate');
    }
}
export default App;
```

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

### Get, Set, and Reset PivotGridDataSource State (React)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/PivotGridDataSource/3 Methods/state().md

Provides a React example for interacting with the PivotGridDataSource state, including fetching, updating, and clearing the state.

```javascript
// ...
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const pivotGridDataSource = new PivotGridDataSource({
    // PivotGridDataSource is configured here
});

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

        // Get the state
        let pivotGridState = pivotGridDataSource.state();

        // Set the state
        pivotGridDataSource.state(pivotGridState);

        // Reset to the default state
        pivotGridDataSource.state({});
        // ===== or =====
        pivotGridDataSource.state(null);
    }
    // ...
}
export default App;
```

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

### Configure TileView with Custom Tile Size (Vue)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/TileView/03 Specify the Size of Tiles.md

Illustrates setting up dxTileView in Vue, including base dimensions and a custom tile size using height and widthRatio within the data.

```html
<template>
    <DxTileView
        :data-source="tileViewData"
        :base-item-height="130"
        :base-item-width="180"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            tileViewData: [
                { text: 'Maine', capital: 'Augusta' },
                { text: 'Maryland', capital: 'Annapolis' },
                { text: 'Massachusetts', capital: 'Boston', height: 2, widthRatio: 2 }
                // ...
            ]
        };
    }
}
</script>
```

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

### Subscribe to Widget Events

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Getting Started/Widget Basics - Knockout/15 Handle Events.md

Use configuration properties starting with 'on' to subscribe to widget events. This example shows how to handle 'onItemClick' and 'onInitialized' events.

```javascript
var viewModel = {
    menuInstance: {},
    menuOptions: {
        // ...
        onItemClick: function (info) {
            // Handles the "itemClick" event
        },
        onInitialized: function (info) {
            // Saves the UI component instance
            viewModel.menuInstance = info.component;
            // Handles the "initialized" event
        }
    }
};

ko.applyBindings(viewModel);
```

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

### CSS Animation Example

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/50 Common/Object Structures/animationConfig/type.md

Demonstrates how to use the 'css' animation type with 'from' and 'to' properties to apply CSS classes for animation start and end.

```javascript
DX.fx.animate(element, { type: 'css', from: 'fade-out', to: 'fade-out-active', duration: 1000 });
```

```css
.fade-out { opacity: 1; }
.fade-out-active { opacity: 0; }
```

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

### Install DevExtreme.Web NuGet Package

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/Common/Distribution Channels/10 NuGet.md

Use this command in the Visual Studio Package Manager Console to install the DevExtreme.Web NuGet package.

```powershell
Install-Package DevExtreme.Web -Version minor_20_1
```

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

### Basic Tabs Configuration (jQuery)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/Tabs/00 Overview.md

Demonstrates how to initialize the dxTabs widget with a list of items, each having text and optionally an icon or badge.

```javascript
$(function() {
    $("#tabsContainer").dxTabs({
        items: [
            { text: "User", icon: 'user' },
            { text: "Comment", badge: "New" },
            { text: "Find" }
        ]
    });
});
```

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

### Disable Scrolling in dx-list

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/List/20 Scrolling/01 User Interaction.md

Set the `scrollingEnabled` property to `false` in the dx-list configuration to disable scrolling. This example shows the HTML and TypeScript setup for an Angular component.

```html
<dx-list ...
    [scrollingEnabled]="false">
</dx-list>
```

```typescript
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
```

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

### Initialize ODataStore in React

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/api-reference/30 Data Layer/ODataStore/ODataStore.md

Provides examples of initializing an ODataStore directly or within a DataSource in a React component.

```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
});

class App extends React.Component {
    // ...
}
export default App;
```

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

### Bind List to OData Service (jQuery)

Source: https://github.com/zb3nz/devextreme-documentation-20_1/blob/20_1/concepts/05 UI Components/List/03 Data Binding/15 OData Service.md

Use ODataStore to directly bind a dxList to an OData service. This example shows basic setup with item templating.

```javascript
<!--JavaScript-->$(function() {
    $("#listContainer").dxList({
        dataSource: new DevExpress.data.ODataStore({
            url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
            key: "Product_ID"
        }),
        itemTemplate: function(data, _, element) {
            element.append(
                $("<img />").attr("src", "data:image/jpg;base64," + data.Product_Primary_Image)
                            .height(30).width(30)
                            .addClass("item-image"),
                $("<p>").text(data.Product_Name)
                        .addClass("item-text")
            )
        }
    });
});
```

```css
<!--CSS-->.item-image {
    vertical-align: middle;
}

.item-text {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 0px 0px 10px;
}
```