### Getting Started with SpeechToText

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/SpeechToText/00 Overview/15 Explore More.md

This guide provides instructions on how to get started with the SpeechToText UI component, including setup and basic usage.

```APIDOC
## Getting Started with SpeechToText

### Description
This guide walks you through the initial steps of integrating and using the SpeechToText UI component in your project.

### Method
N/A (Conceptual Guide)

### Endpoint
/concepts/05%20UI%20Components/SpeechToText/05%20Getting%20Started%20with%20SpeechToText/00%20Getting%20Started%20with%20SpeechToText.md

### Parameters
None

### Request Example
None

### Response
None (Guide Content)

### Response Example
None
```

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

### Install and run dependencies

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/50 Use MUI components in your DevExtreme application/50 Use MUI components in your DevExtreme application.md

Commands to install project dependencies and start the development server.

```bash
npm i; npm run dev
```

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

### React ProgressBar Setup

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/ProgressBar/00 Overview.md

Import necessary components and CSS for the DevExtreme React ProgressBar. This example shows a basic setup with min, max, and value properties, and an onComplete event handler.

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

import { ProgressBar } from 'devextreme-react/progress-bar';
import { alert } from "devextreme/ui/dialog";

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

    onComplete() {
        alert('Completed');
    }

    render() {
        return (
            <ProgressBar
                min={0}
                max={100}
                value={49}
                onComplete={this.onComplete}
            />
        );
    }
}

export default App;
```

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

### Getting Started with Chat

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Chat/00 Overview/15 Explore More.md

Learn how to integrate and start using the DevExtreme Chat component in your application.

```APIDOC
## Getting Started with Chat

### Description
This guide provides step-by-step instructions to set up and begin using the dxChat UI component.

### Method
N/A (Conceptual Guide)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### Vue: FileUploader Setup and Event Handling

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/FileUploader/99 How To/30 Get a file's Guid after uploading in chunks.md

This Vue.js example configures the DxFileUploader component and retrieves the 'File-Guid' from the response header in the 'onUploaded' method. Ensure the necessary CSS and component are imported.

```vue
<template>
  <DxFileUploader
    :chunk-size="200000"
    name="file"
    accept="image/*"
    upload-url="https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload"
    @uploaded="onUploaded($event)"
  />
</template>

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

import { DxFileUploader } from "devextreme-vue/file-uploader";

export default {
    components: {
        DxFileUploader
    },
    data() { ... },
    methods: {
        onUploaded(e) {
            console.log(e.request.getResponseHeader("File-Guid"));
        }
    }
}
</script>
```

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

### Deploy the server

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/10 Server Configuration.md

Execute the start script to launch the server.

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

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

### React Example

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxMap/1 Configuration/apiKey/apiKey.md

Example of configuring API keys using React.

```APIDOC
## React Example

### Description
Configuring API keys for multiple map providers using React.

### Method
Not Applicable (React Component Configuration)

### Endpoint
Not Applicable (React Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// tab: App.js
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import Map, {
    ApiKey
} from 'devextreme-react/map';

const App = () => {
    return (
        <Map ... >
            <ApiKey
                azure="MY_AZURE_MAPS_KEY"
                google="MY_GOOGLE_MAPS_KEY"
                googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
            />
        </Map>
    );
}
export default App;
```

### Response
#### Success Response (200)
Not Applicable (React Component Configuration)

#### Response Example
Not Applicable (React Component Configuration)
```

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

### Get GUID Value - Angular

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

Instantiate a Guid object and log its value using the valueOf() method in Angular. Ensure the Guid class is imported.

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

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

Instantiate a Guid object and log its value using the valueOf() method in jQuery.

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

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

### React: Basic Gallery Setup

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Gallery/05 Switch Between Images/05 User Interaction.md

Shows how to implement a DxGallery component within a React application. Remember to import the required CSS and component.

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

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

const dataSource = [
    'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png'
];

class App extends React.Component {
    render() {
        return (
            <Gallery
                dataSource={dataSource}
                height={300}
                loop={true}
            />
        );
    }
}

export default App;
```

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

### Get GUID Value - React

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

Instantiate a Guid object and log its value using the valueOf() method within a React class component's constructor. Import the Guid class.

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

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

### Initialize Server Directory

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/40 Bind DevExtreme components to GraphQL/40 Bind DevExtreme components to GraphQL.md

Commands to create and navigate into the server directory.

```bash
mkdir server
cd server
```

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

### Navigate and Serve Application

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/55 Vue Components/50 Application Template/05 Generate a New Application.md

After generating the application, navigate into the application directory and run the development server using npm serve.

```bash
cd app-name
npm run serve
```

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

### Get GUID Value - Vue

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

Instantiate a Guid object and log its value using the valueOf() method within a Vue component's mounted hook. Import the Guid class.

```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
    },
    // ...
}
```

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

### GET dxScheduler.getStartViewDate()

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

Retrieves the start date of the current view within the dxScheduler component.

```APIDOC
## getStartViewDate()

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

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

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

### Vue: Basic Gallery Setup

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Gallery/05 Switch Between Images/05 User Interaction.md

Demonstrates how to set up a basic DxGallery component in a Vue application. Ensure the necessary CSS and component are imported.

```vue
<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :loop="true"
    />
</template>

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

import { DxGallery } from 'devextreme-vue/gallery';

export default {
    components: {
        DxGallery
    },
    data() {
        return {
            dataSource: [
                'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png'
            ]
        };
    }
}
</script>
```

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

### ODataStore Initialization

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

Demonstrates how to initialize the ODataStore with basic configuration options.

```APIDOC
## ODataStore Initialization

### Description
Initialize the ODataStore with the `url`, `key`, and `keyType` properties.

### Properties
- **url** (string) - Required - The URL of the OData service.
- **key** (string) - Required - The name of the data field that uniquely identifies a record.
- **keyType** (string) - Optional - The data type of the key field. Possible values: "String", "Int32", "Guid", "Binary".

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

### Example (Angular)
```typescript
import ODataStore from "devextreme/data/odata/store";

const store = new ODataStore({
    url: "http://www.example.com/Northwind.svc/Products",
    key: "ProductID",
    keyType: "Int32"
});
```

### Example (Vue)
```javascript
import ODataStore from 'devextreme/data/odata/store';

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

### Example (React)
```javascript
import ODataStore from 'devextreme/data/odata/store';

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

### Example (ASP.NET MVC Controls)
```csharp
@(Html.DevExtreme().DataGrid()
    .DataSource(ds => ds.OData()
        .Url("http://www.example.com/Northwind.svc/Products")
        .Key("ProductID")
        .KeyType(EdmType.Int32)
    )
)
```
```

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

### dxDateRangeBox.startDateField()

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxDateRangeBox/3 Methods/startDateField().md

Gets the `<input>` element of the UI component's start date field.

```APIDOC
## dxDateRangeBox.startDateField()

### Description
Gets the `<input>` element of the UI component's start date field.

### Method
JavaScript

### Endpoint
N/A (This is a client-side method call)

### Parameters
None

### Request Example
```javascript
$("#dateRangeBoxContainer").dxDateRangeBox({
    // ... other configurations
});

var startDateBoxElement = $("#dateRangeBoxContainer").dxDateRangeBox("instance").startDateField();
```

### Response
#### Success Response
- **DxElement** (object) - An <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTML element</a> or a <a href="http://api.jquery.com/Types/#jQuery" target="_blank">jQuery element</a> when you use jQuery.

#### Response Example
```javascript
// Example if returning an HTML element
<input type="text" class="dx-texteditor-input">

// Example if returning a jQuery element
// jQuery object representing the input element
```

### See Also
#include common-link-callmethods
```

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

### React Example

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxFileManager/5 File System Providers/Custom/1 Configuration/abortFileUpload.md

Example of configuring the dxFileManager with a custom file system provider and implementing the abortFileUpload function in React.

```APIDOC
## React Configuration

### Description
Configure the dxFileManager with a custom file system provider and implement the `abortFileUpload` function in a React component.

### Code
```jsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import FileManager from 'devextreme-react/file-manager';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';

class App extends React.Component {
    render() {
        constructor() {
            super();
            this.fileSystemProvider = new CustomFileSystemProvider({
                abortFileUpload,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function abortFileUpload(fileData, chunksInfo, destinationDir) {
    // ...
}
// other functions

export default App;
```
```

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

### Get DataSource Instance (Angular)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Lookup/03 Data Binding/30 Access the DataSource.md

Access the DataSource instance from a DxLookupComponent in Angular. Ensure the `DxLookupModule` is imported. This example shows how to get the instance via the component's `instance` property.

```typescript
import { DxLookupModule, DxLookupComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxLookupComponent, { static: false }) lookup: DxLookupComponent;
    // Prior to Angular 8
    // @ViewChild(DxLookupComponent) lookup: DxLookupComponent;
    lookupDataSource = this.lookup.instance.getDataSource();
}
@NgModule({
     imports: [
         // ...
         DxLookupModule
     ],
     // ...
 })
```

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

### Build the Application

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/06 Using Rollup/90 Run the Application.md

Run this command in your project directory to build the application. After the build is complete, open the index.html file in your browser.

```bash
npm run build
```

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

### Include showdown.min.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the showdown.min.js library from a CDN with its Subresource Integrity hash. SRI helps protect against malicious code injection.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/showdown.min.js" integrity="sha384-g8/GsvDIpLyyckFLE5ew1KythiZY7C20p3U5XFgvUh2ZYHyJ2YwJ68iF/YScVek7 sha512-xY6+3NXsubRhRssZe+rYHEWf0//wNfWSauvKYWHRPPA8GmC4FOFJR2xVmm5UbeqctHsk27P3xyd7U15OU63EmQ==" crossorigin="anonymous"></script>
```

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

### Initialize Vite Project

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/30 Create a DevExtreme application with Vite.js/30 Create a DevExtreme application with Vite.js.md

Commands to launch the Vite project wizard and install dependencies.

```bash
npm create vite@latest
```

```bash
cd vite-project; npm install
```

```bash
npm run dev
```

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

### Get Total Record Count in Vue

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxDataGrid/3 Methods/totalCount().md

This Vue.js example shows how to retrieve the total record count when pagination is disabled. It accesses the DataGrid instance via a template ref and then gets the item count from its DataSource.

```html
<template>
    <DxDataGrid ...
        :ref="dataGridRef">
    </DxDataGrid>
</template>
```

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

import DxDataGrid from 'devextreme-vue/data-grid';

const dataGridRef = 'dataGrid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRef
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRef].instance;
        }
    },
    methods: {
        getRecordCount() {
            const dataSource = this.dataGrid.getDataSource();
            return dataSource.items().length;
        }
    }
}
```

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

### Get Total Record Count in Angular

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxDataGrid/3 Methods/totalCount().md

This Angular example demonstrates how to get the total record count when pagination is disabled. It uses the `@ViewChild` decorator to access the DxDataGridComponent instance and then retrieves the item count from its DataSource.

```typescript
import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('dataGridRef', { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild('dataGridRef') dataGrid: DxDataGridComponent;
    getRecordCount() {
        const dataSource = this.dataGrid.instance.getDataSource();
        return dataSource.items().length;
    }
}
```

```html
<dx-data-grid ...
    #dataGridRef
></dx-data-grid>
```

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

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

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

### Initialize Vue Project and Add DevExtreme

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/First Steps/05 Setup Your Project.md

Create a new Vue project and use the DevExtreme CLI to install the necessary dependencies.

```bash
npm create vue@latest
```

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

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

### Include exceljs.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the exceljs.js library from a CDN with its Subresource Integrity hash. Using SRI is crucial for security when loading external scripts.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/exceljs.js" integrity="sha384-rma6MsF4mEnR9Z5yqrMgV/DS5kcUUmL03o62c7a4aLeEpfAah6ssOlyASeH1HgHJ sha512-cGr/NaKGtjxGJokVug48VTo4KNaVgqDxylS4lT5Wi39OFsqfv4J/eMZKOfrcwh/lAnOlK5/P7tEnRkdsbZrxUA==" crossorigin="anonymous"></script>
```

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

### Include FileSaver.js with SRI Hash

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the FileSaver.js library from a CDN with its SRI hash. SRI is a critical security measure for third-party scripts.

```html
<script src="https://cdn3.devexpress.com/jslib/25.1.2beta/js/FileSaver.js" integrity="sha384-N1SMedecAugDHscH0pjeb8ErInCgitD3G4dlX1cvaja3M92yqRBiuMh44RpbCO9J sha512-B+gr+zLWg81qxVwvtYwKrmjvQtZKD/GGFF7jD80OfzbqFw+NsbS5faEqpCO7Q7oRw1bYi0+WLJf54j8Vm7NADw==" crossorigin="anonymous"></script>
```

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

### Configure package.json scripts

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/10 Server Configuration.md

Add the start script to your package.json to enable server execution.

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

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

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

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

Provides an example of managing PivotGridDataSource state within a React component. The `state()` method is used for getting, setting, or resetting the state, with reset possible using an empty object or null.

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

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

### Include dx.web.debug.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the dx.web.debug.js library from a CDN using Subresource Integrity. The integrity attribute contains the cryptographic hash of the file.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/dx.web.debug.js" integrity="sha384-fNvjCIWww6bIEeA86+SPkLJ4ZGnTPBcjmi6PWsxhEkWg1gkN+lZsdwNGT1EjpOef sha512-sOUgtBV/VhKqIXDCtMuDJwDfJapxxyxcRRwFxYkBYMV3GRRcDae8nTmnXT2sJQT0+QO+pFiv/IJ6WIZKNpJoug==" crossorigin="anonymous"></script>
```

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

### Include dx.viz.debug.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to load the dx.viz.debug.js library from a CDN, including its Subresource Integrity hash for security. The 'crossorigin="anonymous"' attribute is required for SRI.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/dx.viz.debug.js" integrity="sha384-qZM9O+sTAM4p4cuPqy//XB28CrvnKSQulrL7g5GnyAEYPW+cUaCILNwIcvDgPBMa sha512-6uYIdzfZbZPF+IguRlt0qJ4tFr5/x/Esms0ooDZbPfUrsvxic1UZPqJ7LlpvfkqH7pg5kB+842WxbpLDNw/zJw==" crossorigin="anonymous"></script>
```

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

### Include dx.aspnet.data.js with SRI Hash

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to securely load the DevExtreme ASP.NET data module from a CDN using Subresource Integrity. Always verify the integrity attribute matches the script.

```html
<script src="https://cdn3.devexpress.com/jslib/25.1.2beta/js/dx.aspnet.data.js" integrity="sha384-rDzHUp+xP7n1f+gVquRHg2aVAIoFgibZDLU0cxs6YNFl2ofb5G5tTKDRIIRtXzx3 sha512-exgZOsKrLguEj7ZZ5FEyutEEU+QYv0yr1Mh8CLe+FFVLsfqBKcaoIKHdCh2iO6Nej6fnTa43ROqKTvMqTtcjbw==" crossorigin="anonymous"></script>
```

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

### Vue: JavaScript Implementation

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxDataGrid/1 Configuration/aiAssistant/customizeResponseTitle.md

Provide the `customizeResponseTitle` logic in Vue's script setup. This example demonstrates locale-aware title formatting.

```javascript
import { Dx{WidgetName}, DxAIAssistant, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
import { locale } from "devextreme/localization";

const currentLocale = locale();
function customizeResponseTitle(status, commandNames) {
    switch (currentLocale) {
        case 'en':
            return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
        case 'fr':
            return /* Translated texts */;
    }
};
</script>
```

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

### Basic React Popover Setup

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/Popover/03 Accessibility/15 Screen Reader Support.md

Demonstrates the basic setup of a DevExtreme React Popover component. It includes importing necessary modules and defining the component structure with an event handler.

```javascript
import React, { useRef } from 'react';
import Popover from 'devextreme-react/popover';

const App = () => {
    const contentRef = useRef(null);

    const onShownHandler = () => {
        if (contentRef.current) {
            contentRef.current.focus();
        }
    };

    return (
        <Popover ...
            onShown={onShownHandler}
        >
            <div id="content" tabIndex="1" ref={contentRef}>
                Content template
            </div>
        </Popover>
    );
};

export default App;
```

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

### Include FileSaver.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the FileSaver.js library from a CDN with its Subresource Integrity hash. Ensure the integrity attribute is correctly set to prevent loading compromised files.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/FileSaver.js" integrity="sha384-N1SMedecAugDHscH0pjeb8ErInCgitD3G4dlX1cvaja3M92yqRBiuMh44RpbCO9J sha512-B+gr+zLWg81qxVwvtYwKrmjvQtZKD/GGFF7jD80OfzbqFw+NsbS5faEqpCO7Q7oRw1bYi0+WLJf54j8Vm7NADw==" crossorigin="anonymous"></script>
```

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

### Get UI Component Instance (Non-Modular)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/zz Common/15 Advanced/40 3rd-Party Frameworks Integration API/20 Change Component Properties and Handle Events.md

Retrieve an existing UI component instance using the static `getInstance` method in a non-modular setup.

```javascript
let element = document.getElementById("myAccordion");
let instance = DevExpress.ui.dxAccordion.getInstance(element);
```

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

### GraphQL Server Setup (App.js)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/40 Bind DevExtreme components to GraphQL/40 Bind DevExtreme components to GraphQL.md

This snippet shows how to initialize an Express.js server and enable GraphQL using the graphql-http package.

```APIDOC
## POST /Orders

### Description
This endpoint serves as the GraphQL API for managing orders, customers, and shippers. It supports GraphQL queries and mutations.

### Method
POST

### Endpoint
/Orders

### Parameters
#### Query Parameters
- **schema** (object) - Required - The GraphQL schema object.
- **graphiql** (boolean) - Optional - Enables the GraphiQL interface if set to true.

### Request Body
(GraphQL query or mutation)

### Response
#### Success Response (200)
- **data** (object) - The result of the GraphQL query or mutation.
- **errors** (array) - An array of errors, if any occurred during execution.

### Request Example
```json
{
  "query": "{ Orders { OrderID CustomerID } }"
}
```

### Response Example
```json
{
  "data": {
    "Orders": [
      {
        "OrderID": "1",
        "CustomerID": "ALFKI"
      }
    ]
  }
}
```
```

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

### Include DevExtreme Gantt JavaScript with SRI Hash

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the DevExtreme Gantt JavaScript library from a CDN, with its corresponding SRI hash for integrity checking. This version is 23.2.2beta.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.2beta/js/dx-gantt.js" integrity="sha384-YYfOHVLqQxc+0r/T6jmiqXGGBKQTRhqdC9gVTS1qO9ky3HtELT9trWNl7BhMO1Fv sha512-JxrgIT+lIpaWmqhGTZYqYycc6Xp1Z4l+Dq7gslFpXrhA5vhAeO1vi+Eb/pD0vi0kZGG+r8GGirGyMbwfEKfhQA==" crossorigin="anonymous"></script>
```

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

### Vue Example

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxFileManager/5 File System Providers/Custom/1 Configuration/abortFileUpload.md

Example of configuring the dxFileManager with a custom file system provider and implementing the abortFileUpload function in Vue.

```APIDOC
## Vue Configuration

### Description
Configure the dxFileManager with a custom file system provider and implement the `abortFileUpload` function in a Vue component.

### Code
```vue
<template>
    <DxFileManager
        :file-system-provider="fileSystemProvider">
    </DxFileManager>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxFileManager } from 'devextreme-vue/file-manager';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';

export default {
    components: {
        DxFileManager
    },

    data() {
        return {
            fileSystemProvider: new CustomFileSystemProvider({
                abortFileUpload,
                // ...
            }),
        };
    }
};

function abortFileUpload(fileData, chunksInfo, destinationDir) {
    // ...
}
// other functions
</script>
```
```

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

### Example Calculation with Margins

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxPolarChart/1 Configuration/valueAxis/maxValueMargin.md

This example illustrates the calculation of axis start and end values using specific data and margin coefficients. It shows how setting `minValueMargin` and `maxValueMargin` to 0.1 results in an axis range from 1955 to 2015 when the data ranges from 1960 to 2010.

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

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

### Initialize React Project and Add DevExtreme

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/First Steps/05 Setup Your Project.md

Create a new React project using Vite and use the DevExtreme CLI to install the necessary dependencies.

```bash
npm create vite@latest my-app -- --template react
```

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

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

### Vue DateRangeBox (Composition API)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/includes/drb-startdate-enddate-placeholder-code.md

Use the DevExtreme DateRangeBox component in a Vue application with the Composition API. This example includes the required setup and imports.

```vue
<template>
    <DxDateRangeBox 
        start-date-placeholder="Type or pick a start date"
        end-date-placeholder="Type or pick an end date"
    />
</template>

<script setup>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
</script>
```

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

### Initialize RemoteFileSystemProvider

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/70 Manage Azure Blob Storage with DevExtreme Components/30 FileManager.md

Create a client-side provider instance pointing to the server-side endpoint.

```javascript
const provider = new DevExpress.fileManagement.RemoteFileSystemProvider({
    endpointUrl: `${baseUrl}file-manager-azure`,
    });
```

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

### Integrate dxWidget in Vue

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/includes/data-binding-examples-json.md

This example demonstrates integrating a DevExtreme widget within a Vue.js application. It covers both the template and script sections for component setup.

```vue
<template>
    <Dx{WidgetName} data-source="http://www.example.com/dataservices/data.json">
        <!-- ... -->
    </Dx{WidgetName}>
</template>

<script>
import Dx{WidgetName} from 'devextreme-vue/{widget-name}';

export default {
    components: {
        Dx{WidgetName}
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
```

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

### Include jspdf.plugin.autotable.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the jspdf.plugin.autotable.js library from a CDN with its Subresource Integrity hash. SRI ensures the integrity of the loaded plugin.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/jspdf.plugin.autotable.js" integrity="sha384-2QxYF2QKEGzHgS9GPpBwKh/EBKgzlBDtkEpQpsFvp9j5aKNRVdgi1iRdJLX8SSY3 sha512-NmIoYvVsh1mGumphmTK9rc11ia21MZKRPsQV8RUn0x+sN6rxcBtST1Y5fw4WSiAzlryxCtPy00QoPfadNaq6gQ==" crossorigin="anonymous"></script>
```

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

### Get Field Properties by Identifier (React)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/30 Data Layer/PivotGridDataSource/3 Methods/field(id).md

Provides a React example of using the field() method to access field properties by caption, dataField, or index.

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

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        caption: 'Sales',
        dataField: 'amount',
        summaryType: 'sum',
        area: 'data'
    }]
});

class App extends React.Component {
    constructor(props) {
        super(props);
        
        // The following commands return the same object
        pivotGridDataSource.field('Sales');
        pivotGridDataSource.field('amount');
        pivotGridDataSource.field(0);
    }
    // ...
}
export default App;
```

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

### jQuery Example

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxFileManager/5 File System Providers/Custom/1 Configuration/abortFileUpload.md

Example of configuring the dxFileManager with a custom file system provider and implementing the abortFileUpload function using jQuery.

```APIDOC
## jQuery Configuration

### Description
Configure the dxFileManager with a custom file system provider and implement the `abortFileUpload` function.

### Code
```javascript
$(function () {
    $("#file-manager").dxFileManager({
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({
            abortFileUpload: function(fileData, chunksInfo, destinationDir) {
                // Your code goes here
            },
            //...
        })
    });
});
```
```

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

### Handle dxSortable Initialization

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxSortable/1 Configuration/onInitialized.md

Use the onInitialized event to get the widget instance. This is useful for saving the instance for later use or for performing initial setup.

```javascript
function onInitialized(e) {
    // Access the widget instance via e.component
    const sortableInstance = e.component;
    console.log('dxSortable initialized:', sortableInstance);
}
```

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

### Initialize Node.js Project

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/40 Bind DevExtreme components to GraphQL/40 Bind DevExtreme components to GraphQL.md

Initializes a new Node.js project. Run this command in your project's root directory.

```bash
mkdir graphql-tutorial
cd graphql-tutorial
npm init
```

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

### Include DevExtreme Viz Debug JavaScript with SRI Hash

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the debug version of the DevExtreme Viz JavaScript library from a CDN, with its SRI hash for integrity verification. This version is 23.2.2beta.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.2beta/js/dx.viz.debug.js" integrity="sha384-nLGo4FuRNabkhkZMDTx+XquK46mC5CJRpHgr/W82AWFamScKdp0GEIi9Ps8Wf3WD sha512-RTeiipyCW03mDH0SjrxQEDR+lWj+T36fIcHIk63cALZ3T5vBuh9e3Piu+HEb5vI16pdfYIePZDJ4MR5LJLQjhQ==" crossorigin="anonymous"></script>
```

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

### Vue Example

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxMap/1 Configuration/apiKey/apiKey.md

Example of configuring API keys using Vue.

```APIDOC
## Vue Example

### Description
Configuring API keys for multiple map providers using Vue.

### Method
Not Applicable (Vue Component Configuration)

### Endpoint
Not Applicable (Vue Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<!-- tab: App.vue -->
<template>
    <DxMap ... >
        <DxApiKey
            azure="MY_AZURE_MAPS_KEY"
            google="MY_GOOGLE_MAPS_KEY"
            googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
        />
    </DxMap>
</template>
```

### Response
#### Success Response (200)
Not Applicable (Vue Component Configuration)

#### Response Example
Not Applicable (Vue Component Configuration)
```

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

### Inserting a Dependency (React)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxGantt/3 Methods/insertDependency(data).md

This React example demonstrates inserting a dependency. It uses React's createRef to get a reference to the Gantt component instance.

```javascript
import React from 'react';

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

import Gantt from 'devextreme-react/gantt';

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

        this.ganttRef = React.createRef();

        this.yourCustomMethod = () => {
            this.gantt.insertDependency({ predecessorId: 1, successorId: 3, type: 3 });
            // ...
        }
    }

    get gantt() {
        return this.ganttRef.current.instance();
    }

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

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

### Include DevExtreme All Debug JavaScript with SRI Hash

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the debug version of all DevExtreme JavaScript libraries from a CDN, with its SRI hash for integrity verification. This version is 23.2.2beta.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.2beta/js/dx.all.debug.js" integrity="sha384-yy9UKehfWVUCky45ZkrE4KgAulFuhEFETrK7xz7voK0I6M3u4EkITKDSa4UpTUEh sha512-hWVS88yxvK16+5/dQ+f98B8C2z5Cwus/gyQ+hSDJofEZHnqqprLGH6nfCKbvU320nBhgyzzpR+fMloB3fs66HA==" crossorigin="anonymous"></script>
```

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

### Include jspdf.umd.js with SRI

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Distribution Channels/05 CDN/10 Subresource Integrity Hashes.md

This example shows how to include the jspdf.umd.js library from a CDN with its Subresource Integrity hash. SRI provides an extra layer of security by verifying the file's integrity.

```html
<script src="https://cdn3.devexpress.com/jslib/23.2.3/js/jspdf.umd.js" integrity="sha384-jbKrW0JzZ9F05MPQ9FU8vTa4UpGjm2Ccr3TOOgPo0X/34Cb+rF6hzdXlN0ThePzX sha512-Bw9Zj8x4giJb3OmlMiMaGbNrFr0ERD2f9jL3en5FmcTXLhkI+fKyXVeyGyxKMIl1RfgcCBDprJJt4JvlglEb3A==" crossorigin="anonymous"></script>
```

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

### dxDiagram.getItems()

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxDiagram/3 Methods/getItems().md

Returns an array of diagram items, including shapes and connectors. The example demonstrates how to get all items and filter those directly connected to a clicked item.

```APIDOC
## dxDiagram.getItems()

### Description
Returns an array of diagram items.

### Method
This is a method of the dxDiagram instance.

### Endpoint
N/A (Client-side method)

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

### Request Example
N/A

### Response
#### Success Response
- **Array<dxDiagramItem>** - An array containing all shapes and connectors in the diagram.

#### Response Example
```json
[
  {
    "itemType": "shape",
    "key": "1",
    "text": "John Smith",
    "dataItem": { ... }
  },
  {
    "itemType": "connector",
    "key": "connector1",
    "fromKey": "1",
    "toKey": "2"
  }
  // ... more items
]
```

### Usage Example (jQuery)
```javascript
$(() => {
    $('#diagram').dxDiagram({
        // ... other configurations
        onItemClick(e) {
            var itemKey = e.item.key;
            var connectors = e.component.getItems().filter(function (item) {
                return item.itemType === "connector" && (item.fromKey === itemKey || item.toKey === itemKey);
            });
            var relativeShapes = [];
            connectors.forEach(element => {
                if (element.fromKey === itemKey) relativeShapes.push(e.component.getItemByKey(element.toKey)); // all child shapes 
                if (element.toKey === itemKey) relativeShapes.push(e.component.getItemByKey(element.fromKey)); // all parent shapes
            });
        }
    }).dxDiagram('instance');
});
```

### Usage Example (Angular)
```typescript
// ...
itemClickHandler(e) {
    var itemKey = e.item.key;
    var connectors = e.component.getItems().filter(function (item) {
        return item.itemType === "connector" && (item.fromKey === itemKey || item.toKey === itemKey);
    });
    var relativeShapes = [];
    connectors.forEach(element => {
        if (element.fromKey === itemKey) relativeShapes.push(e.component.getItemByKey(element.toKey)); // all subsequent shapes 
        if (element.toKey === itemKey) relativeShapes.push(e.component.getItemByKey(element.fromKey)); // all previous shapes
    });
}
// ...
```

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

### Import and Use DxButton (Composition API)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/55 Vue Components/05 Add DevExtreme to a Vue Application/60 Import DevExtreme Components.md

Import the DxButton component from 'devextreme-vue/button' for use in the template. This example utilizes the Composition API with the `<script setup>` syntax.

```vue
<template>
    <DxButton
        text="Click me"
        @click="sayHelloWorld"
    />
</template>

<script setup>
import DxButton from 'devextreme-vue/button';

const sayHelloWorld = () => {
    alert('Hello world!')
}
</script>
```

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

### Initialize Gatsby Project

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/Common/Integration Guides/10 Create a DevExtreme application with Gatsby/10 Create a DevExtreme application with Gatsby.md

Commands to install the Gatsby CLI and generate a new project structure.

```bash
npm install -g gatsby-cli
```

```bash
gatsby new
```

```bash
cd my-website
gatsby develop
```

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

### React Example

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/api-reference/10 UI Components/dxGantt/1 Configuration/taskTimeTooltipContentTemplate.md

Example of configuring the taskTimeTooltipContentTemplate using React.

```APIDOC
## React Configuration

### React Component
```javascript
// tab: App.js
import React from 'react';
import Gantt from 'devextreme-react/gantt';
import { Template } from 'devextreme-react/core/template';

const TaskTimeTooltipTemplate = (item) => {
    return (
        <div className="custom-tooltip">
            <div className="custom-tooltip-time">End Date: {item.end}</div>
            <!-- ... -->
        </div>
    );
}

export default function App() {
    return (
        <Gantt
            taskTimeTooltipContentRender={TaskTimeTooltipTemplate}>
            //...
        </Gantt>
    );
}

export default App;
```
```

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

### Basic RangeSlider Setup (Vue)

Source: https://github.com/devexpress/devextreme-documentation/blob/26_1/concepts/05 UI Components/RangeSlider/00 Overview.md

Sets up a RangeSlider component in a Vue application with min, max, start, and end values. Imports the necessary component and CSS.

```html
<template>
    <DxRangeSlider
        :min="0"
        :max="100"
        v-model:start="startValue"
        v-model:end="endValue"
    />
</template>
```

```javascript
<script>
    import 'devextreme/dist/css/dx.fluent.blue.light.css';

    import { DxRangeSlider } from 'devextreme-vue/range-slider';

    export default {
        components: {
            DxRangeSlider
        },
        data() {
            return {
                startValue: 20,
                endValue: 60
            };
        }
    }
</script>
```