### Gradient Colorizer Example

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

An example demonstrating the configuration for a gradient colorizer, specifying the type, a two-color palette, and a numerical range for color interpolation.

```javascript
var treeMapOptions = {
  colorizer: {
  // ...
  type: 'gradient',
  palette: ['red', 'blue'],
  range: [0, 1000]
  }
};
```

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

### HTML Structure for dxSortable Example

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

Provides the necessary HTML structure for the dxSortable and dxTreeView example.

```html
<div class="demo-container">
  <div class="form">
    <div id="simple-treeview"></div>
  </div>
</div>
```

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

### instance()

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

Gets the widget instance.

```APIDOC
## instance()

### Description
Gets the widget instance.

### Method
instance
```

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

### Configure ODataStore with Key Types

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

Defines the data types for key properties when filtering is not required. This example specifies 'Guid' for 'Product_ID' and 'Int32' for 'Product_Code'.

```javascript
var store = new DevExpress.data.ODataStore({
  url: "http://www.example.com/Northwind.svc/Products",
  key: [ "Product_ID", "Product_Code" ],
  keyType: {
    Product_ID: "Guid",
    Product_Code: "Int32"
  }
});
```

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

### load()

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

Starts loading data.

```APIDOC
## load()

### Description
Starts loading data.

### Method
Not applicable (JavaScript method)
```

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

### Create a new Guid instance

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

Use the default constructor to create a new Guid instance with a generated GUID.

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

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

### instance()

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

Gets the PivotGrid component instance.

```APIDOC
## instance()

### Description
Gets the PivotGrid component instance.

### Response
#### Success Response (200)
* **instance** (dxPivotGrid) - The PivotGrid component instance.
```

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

### option()

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

Gets all options of the UI component.

```APIDOC
## option()

### Description
Gets all options of the UI component.

### Method
option()

### Return Value
Object - An object containing all the UI component's options.
```

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

### option()

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

Gets the current configuration of the PivotGrid.

```APIDOC
## option()

### Description
Gets the current configuration of the PivotGrid.

### Response
#### Success Response (200)
* **options** (object) - An object containing the current configuration of the PivotGrid.
```

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

### ODataStore Initialization

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

Demonstrates how to initialize an ODataStore with its basic configuration options, including URL, key, and keyType. It also shows how to integrate it within a DevExtreme DataSource.

```APIDOC
## ODataStore Initialization

### Description
Initializes a new instance of the ODataStore to interact with an OData feed. This store can be used independently or as part of a DevExtreme DataSource.

### Usage

**Standalone Store:**
```javascript
var store = new DevExpress.data.ODataStore({
  url: "http://www.example.com/Northwind.svc/Products",
  key: "ProductID",
  keyType: "Int32"
  // Other ODataStore properties go here
});
```

**Within a DataSource:**
```javascript
var dataSource = new DevExpress.data.DataSource({
  store: {
    type: "odata",
    url: "http://www.example.com/Northwind.svc/Products",
    key: "ProductID",
    keyType: "Int32"
    // Other ODataStore properties go here
  }
  // Other DataSource properties go here
});
```

### Parameters

*   **url** (string) - Required - The URL of the OData feed.
*   **key** (string) - Required - The name of the key field in the OData entity.
*   **keyType** (string) - Optional - The data type of the key field (e.g., "Int32", "Guid").

### Notes

*   The ODataStore is immutable after initialization.
*   For accessing an entire OData service, consider using `ODataContext`.
```

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

### Guid Methods

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

This section describes methods that control a Guid instance, including constructors and methods to get the GUID value.

```APIDOC
## Guid API

The **Guid** is an object used to generate and contain a GUID.

### Methods

#### ctor()
Creates a new **Guid** instance that contains a generated GUID.

#### ctor(value)
Creates a new **Guid** instance that contains the specified GUID.

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

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

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

### DataSource Configuration

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

Demonstrates how to create a new DataSource instance with basic configuration options.

```APIDOC
## new DevExpress.data.DataSource(options)

### Description
Initializes a new instance of the DataSource.

### Parameters
#### Options
- **options** (object) - Configuration object for the DataSource.
  - **customQueryParams** (object) - Custom parameters for OData service load queries. Available only for ODataStore.
  - **expand** (object) - Specifies navigation properties to be loaded with the OData entity. Available only for ODataStore.
  - **filter** (object) - Specifies data filtering conditions.
  - **group** (object) - Specifies data grouping properties.
  - **langParams** (object) - Specifies parameters for language-specific sorting and filtering.
    - **locale** (string) - The locale for language-specific operations.
    - **collatorOptions** (object) - Options for the collator used in sorting and filtering.
      - **sensitivity** (string) - Specifies the sensitivity level for comparison ('case', 'variant').
  - **map** (function) - Specifies an item mapping function.
  - **onChanged** (function) - Function executed after data is loaded.
  - **onLoadError** (function) - Function executed when data loading fails.
  - **onLoadingChanged** (function) - Function executed when the data loading status changes.
  - **pageSize** (number) - Maximum number of data items per page. Applies only if paginate is true.
  - **paginate** (boolean) - Specifies whether data items are loaded by pages or all at once. Defaults to false if group is set; otherwise, true.
  - **postProcess** (function) - Specifies a post processing function.
  - **pushAggregationTimeout** (number) - Period (in milliseconds) for aggregating changes before pushing them to the DataSource.
  - **requireTotalCount** (boolean) - Specifies whether the DataSource requests the total count of data items.
  - **reshapeOnPush** (boolean) - Specifies whether to reapply sorting, filtering, grouping, and other operations after receiving a push.
  - **searchExpr** (object) - Specifies the fields to search.
  - **searchOperation** (string) - Specifies the comparison operation used in searching.
  - **searchValue** (object) - Specifies the value to which the search expression is compared.
  - **select** (object) - Specifies the fields to select from data objects.
  - **sort** (object) - Specifies data sorting properties.
  - **store** (object) - Configures the store underlying the DataSource.

### Request Example
```javascript
const dataSource = new DevExpress.data.DataSource({
  // DataSource is configured here
});
```

### Notes
- If a **DataSource** instance is created outside a DevExtreme component, call `dispose()` when it's no longer needed. Instances created in DevExtreme components are disposed of automatically.
- Do not use a **DataSource** instance in multiple DevExtreme components. Use a common data store for sharing data.
- In filtering and sorting operations, **DataSource** ignores letter cases. For case-sensitive filtering and sorting, specify `langParams.collatorOptions` and set `sensitivity` to 'case' or 'variant'.
- **DataSource** is immutable. Call DataSource methods to manipulate an instance.
```

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

### Get the GUID value

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

Use the valueOf() method to retrieve the GUID value. This method functions identically to toString().

```javascript
var guidValue = instance.valueOf();
```

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

### Get the GUID as a string using valueOf()

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

Retrieves the GUID value as a hyphened string. This method works identically to toString().

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

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

### Create a Sample DataSource

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

This snippet shows how to create a basic DevExtreme DataSource with sample data. This is a prerequisite for applying filters.

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

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

### Configure DataSource with ODataStore and Options

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

Create a DataSource with an ODataStore and specify additional configuration options like pageSize and sorting.

```javascript
var categoriesSource = new DevExpress.data.DataSource({
  store: context.Categories,
  pageSize: 5,
  sort: "CategoryName"
});
```

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

### Get the GUID as a string

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

Use the toString() method to retrieve the GUID value as a string. This method functions identically to valueOf().

```javascript
var guidString = instance.toString();
```

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

### valueOf()

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

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

```APIDOC
## valueOf()

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

### Method
```javascript
returnValue = guid.valueOf()
```

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

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

### option()

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

Gets all the widget's configuration options.

```APIDOC
## option()

### Description
Gets all the widget's configuration options.

### Return Value
Object
An object containing all the widget's configuration options.
```

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

### Get All Options

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

Retrieves all configuration options of the component.

```javascript
option()
```

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

### toString()

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

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

```APIDOC
## toString()

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

### Method
```javascript
returnValue = guid.toString()
```

### 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.toString()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
```
```

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

### Example Calculation of Minimum Value Margin

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

This example demonstrates the calculation of the axis start value using the `minValueMargin` property with specific data values.

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

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

### Configuring DataSource with an Array and Options

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

Create a DataSource instance by passing a configuration object that includes an array for the store and additional properties like sort and pageSize.

```javascript
const dataSource = new DevExpress.data.DataSource({
  // array of data
  store: array,
  // additional configuration properties
  sort: "name",
  pageSize: 10
});
```

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

### getValue()

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

Gets the currently selected range, returning an array of the start and end values.

```APIDOC
## getValue()

### Description
Gets the currently selected range.

### Method
Instance method

### Return Value
Array<Number | String | Date> - The start and end values of the selected range.
```

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

### Get dxRangeSelector Value

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

The getValue() method retrieves the currently selected range, returning an array containing the start and end values.

```javascript
let range = rangeSelectorInstance.getValue();
```

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

### slice(skip, take)

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

Gets a specified number of data items starting from a given index. This is useful for pagination or retrieving subsets of data.

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

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

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

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

### Example
```javascript
var dataObjects = [
  { name: "Amelia", birthYear: 1991, gender: "female" },
  { name: "Benjamin", birthYear: 1983, gender: "male" },
  { name: "Daniela", birthYear: 1987, gender: "female" },
  { name: "Lee", birthYear: 1981, gender: "male" }
];

var subset = DevExpress.data.query(dataObjects)
  .slice(1, 2)
  .toArray();

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

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

### Configure DataSource with Store and Options

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

Create a DevExpress.data.ArrayStore and pass it along with other configuration options like sort and pageSize to the DevExpress.data.DataSource constructor.

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

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

### option()

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

Gets all UI component properties.

```APIDOC
## option()

### Description
Gets all UI component properties.

### Return Value
Object - The UI component's properties.
```

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

### Create a Vue Switch Component

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Switch/Getting_Started_with_Switch

This snippet demonstrates the basic setup for creating a DevExtreme Switch component in a Vue application. Ensure DevExtreme is installed and imported.

```Vue
<template>
  <DxSwitch>
  </DxSwitch>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxSwitch } from "devextreme-vue/switch";

export default {
  components: {
    DxSwitch
  }
}
</script>
```

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

### XmlaStore Initialization

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

Demonstrates how to initialize the XmlaStore with connection details for an OLAP cube, either directly or within a PivotGridDataSource configuration.

```APIDOC
## XmlaStore Initialization

### Description
Initializes the XmlaStore with connection details for an OLAP cube. This can be done directly or as part of a PivotGridDataSource configuration.

### Usage
```javascript
// Direct initialization
var store = new DevExpress.data.XmlaStore({
  url: "http://my-web-srv01/OLAP/msmdpump.dll",
  catalog: "AdventureWorksDW2012",
  cube: "Adventure Works"
});

// Within PivotGridDataSource
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
  store: {
    type: "xmla",
    url: "http://my-web-srv01/OLAP/msmdpump.dll",
    catalog: "AdventureWorksDW2012",
    cube: "Adventure Works"
  },
  // Other PivotGridDataSource properties
});
```

### Options
*   **url** (string): Specifies the OLAP server's URL.
*   **catalog** (string): Specifies the database (or initial catalog) that contains the OLAP cube to use.
*   **cube** (string): Specifies the name of the OLAP cube to use from the catalog.
*   **beforeSend** (function): Specifies a function that customizes the request before it is sent to the server.
```

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

### Bind Accordion to Data Source

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/Accordion/Getting_Started_with_Accordion

Bind the Accordion to an array of data. Ensure each data object has a 'title' field for panel titles. This example uses a Vue template and script setup.

```Vue
<template>
  <DxAccordion
    :data-source="employees"
  />
</template>
  <script>
// ...
import { employees } from './data';
  <script>
export default {
components: {
DxAccordion
},
data() {
return {
employees
}
}
}
</script>
```

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

### instance()

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

Gets the UI component's instance, which can then be used to access other methods.

```APIDOC
## instance()

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

### Method
Instance

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

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

### Custom Summary Calculation Function

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

Provides an example of a custom aggregate function using 'calculateCustomSummary'. This is applicable when 'summaryType' is 'custom' and 'remoteOperations' is false. It outlines the structure for 'start', 'calculate', and 'finalize' stages.

```javascript
$(function() {
  var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
  // ...
  fields: [{
  // ...
  summaryType: "custom",
  calculateCustomSummary: function(options) {
  switch(options.summaryProcess) {
  case "start":
  // Initializing "totalValue" here
  break;
  case "calculate":
  // Modifying "totalValue" here
  break;
  case "finalize":
  // Assigning the final value to "totalValue" here
  break;
  }
  }
  }]
  });
  
  $("#pivotGridContainer").dxPivotGrid({
  dataSource: pivotGridDataSource
  });
});
```

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

### Import ContextMenu UI Component

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

Shows how to import the ContextMenu UI component. Examples cover CommonJS and ES6+ module formats.

```javascript
    1.     2.     3. 
* require("devextreme/ui/context_menu");
* // ===== or =====
* import ContextMenu from "devextreme/ui/context_menu";
```

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

### Set Initial Date Range Values (Composition API)

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/DateRangeBox/Getting_Started_with_DateRangeBox

Specify the date range selected at startup using startDate and endDate properties with the Composition API. This example sets the range to a week starting from the current date.

```vue
<template>
  <DxDateRangeBox ...
    :start-date="startDate"
    :end-date="endDate"
  />
</template>

<script setup>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxDateRangeBox } from 'devextreme-vue/date-range-box';

const startDate = new Date();
const endDate = new Date().setDate(new Date().getDate()+7);
</script>
```

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

### Import DataGrid UI Component

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

Illustrates importing the DataGrid UI component. Includes examples for both CommonJS and ES6+ module systems.

```javascript
    1.     2.     3. 
* require("devextreme/ui/data_grid");
* // ===== or =====
* import DataGrid from "devextreme/ui/data_grid"
```

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

### Set Initial Date Range Values (Options API)

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/DateRangeBox/Getting_Started_with_DateRangeBox

Specify the date range selected at startup using startDate and endDate properties with the Options API. This example sets the range to a week starting from the current date.

```vue
<template>
  <DxDateRangeBox ...
    :start-date="startDate"
    :end-date="endDate"
  />
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxDateRangeBox } from 'devextreme-vue/date-range-box';

export default {
  components: {
    DxDateRangeBox
  },
  data() {
    return {
      startDate: new Date(),
      endDate: new Date().setDate(new Date().getDate()+7),
    }
  }
}
</script>
```

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

### Configure RangeSelector Scale with Date-Time Interval

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

Example demonstrating how to configure the scale for a date-time range selector. It sets the start and end values, specifies the tick interval in days, and defines a minimum and maximum range using date-time specific values.

```javascript
$( () => {
  $('#range-selector').dxRangeSelector({
  // ...
  scale: {
  startValue: new Date(2023, 1, 1),
  endValue: new Date(2023, 6, 1),
  tickInterval: 'day',
  minRange: {
  days: 10
  },
  maxRange: 'month',
  },
  });
});
```

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

### Initialize DataSource with an Array

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

Create a DataSource by directly passing an array of data to its constructor.

```javascript
const dataSource = new DevExpress.data.DataSource([
  { name: "item1" },
  { name: "item2" },
  { name: "item3" }
]);
```

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

### Create Guid Instance from String

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

Instantiate a DevExtreme Guid object from a string representation of a GUID.

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

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

### Create DataSource from In-Memory Array

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

Demonstrates the general form of creating a DataSource using an in-memory array with ArrayStore. This is useful for understanding examples, prototyping, or processing medium-sized arrays obtained from web services.

```javascript
var dataSource = new DevExpress.data.DataSource({
  store: {
    type: "array",
    key: "id",
    data: [
      { id: 1, value: "Item 1" }
    ]
  }
});
```

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

### Create DataSource with LocalStore

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

Shows how to create a DataSource using LocalStore for persisting data in the browser's HTML5 Web Storage. The 'name' property is required to scope the data.

```javascript
var dataSource = new DevExpress.data.DataSource({
  store: {
    type: "local",
    name: "MyLocalData",
    key: "id"
  }
});
```

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

### Create a new Guid instance

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

Use the ctor() method to create a new Guid instance with a generated GUID.

```javascript
var instance = new Guid();
```

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

### Create a Guid instance with a specific value

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

Use the ctor(value) method to create a Guid instance with a specified GUID value.

```javascript
var instance = new Guid("some-guid-value");
```

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

### Define a Sample Object with Getters and Setters

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

Illustrates the creation of a JavaScript object with properties and methods that act as getters and setters for accessing and modifying object data.

```javascript
var person = {
  firstName: "John",
  lastName: "Smith",
  birthDate: new Date(1985,10,15),
  getBirthYear: function(){
    return this.birthDate.getFullYear();
  },
  address: {
    zipCode: 90007,
    state: "CA",
    city: "Los Angeles",
    getAddress: function(){
      return this.zipCode + " " + this.state + " " + this.city;
    }
  }
};
```

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

### Create a Guid instance with a specific value

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

Create a new Guid instance with a specified GUID string. Hyphens are optional in the input string.

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

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

### Import Guid

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

Import the Guid object from the devextreme/common module.

```javascript
import { Guid } from "devextreme/common"
```

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

### Initialize a DevExtreme DataSource

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

Instantiate a DevExtreme DataSource with basic configuration. Ensure to call dispose() if created outside a component.

```javascript
const dataSource = new DevExpress.data.DataSource({
  // DataSource is configured here
});
```

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

### ctor()

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

Creates a new Guid instance that contains a generated GUID.

```APIDOC
## ctor()

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

### Method
```javascript
new DevExpress.data.Guid()
```

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

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

### option()

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

Gets all UI component properties as an object.

```APIDOC
## option()

### Description
Gets all UI component properties.

### Method
Instance

### Return Value
Object - The UI component's properties.
```

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

### ctor(value)

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

Creates a new Guid instance that contains the specified GUID.

```APIDOC
## ctor(value)

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

### Method
```javascript
new DevExpress.data.Guid(value)
```

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

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

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

### Importing Toolbar Component

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

Demonstrates importing the Toolbar UI component using CommonJS or ES module syntax.

```javascript
require("devextreme/ui/toolbar");
```

```javascript
import Toolbar from "devextreme/ui/toolbar";
```

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

### Create Sample Data

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

An array of sample data objects used for demonstrating data binding operations.

```javascript
const data = [
  {
  firstName: "John",
  lastName: "Smith",
  city: "San Francisco"
  },
  {
  firstName: "Xavier",
  lastName: "Lee",
  city: "New York"
  },
  {
  firstName: "Maria",
  lastName: "Gomez",
  city: "Denver"
  }
  ];
```

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

### Get Validator Instance Element

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

Gets the root UI component element of the Validator.

```javascript
// Returns an HTML element or a jQuery element
// $("#myValidator").dxValidator("instance").element();
```

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

### Importing Current Theme Method

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

Demonstrates how to import the current theme method using CommonJS or ES module syntax.

```javascript
require("devextreme/ui/themes").current;
```

```javascript
import { current } from "devextreme/ui/themes";
```

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

### Get PivotGridFieldChooser Instance

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

Gets the PivotGridFieldChooser instance associated with the specified DOM element.

```javascript
getInstance(element)
```

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

### Configure DataSource Store

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

Demonstrates three ways to configure the 'store' property of a DataSource: using an ArrayStore instance, an ArrayStore configuration object, or a direct array assignment.

```javascript
var ds = new DevExpress.data.DataSource({
  store: new DevExpress.data.ArrayStore({
    // ArrayStore instance
  })
  // ===== or =====
  store: {
    type: "array",
    // ArrayStore configuration object
  }
  // ===== or =====
  store: [
    { id: 1, name: "John Doe" }
  ]
});
```

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

### option(options)

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

Sets multiple widget configuration options.

```APIDOC
## option(options)

### Description
Sets multiple widget configuration options.

### Parameters
*   **options** (Object) - An object containing option names as keys and their new values as values.
```

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

### Group Label Customization Example

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

Example demonstrating how to customize group label font properties.

```javascript
$(function() {
  $("#treeMapContainer").dxTreeMap({
    // ...
    group: {
      label: {
        font: {
          size: 20,
          opacity: 0.7,
        }
      }
    }
  });
});
```

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

### Get Single Validator Option

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

Gets the value of a single property. Returns the property's value.

```javascript
// $("#myValidator").dxValidator("option", "optionName");
```

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

### load(options)

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

Starts loading data with specified options for data processing.

```APIDOC
## load(options)

### Description
Starts loading data with specified data processing settings.

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

### Return Value
(PromiseLike object) - A Promise that is resolved after data is loaded.

### Example
```javascript
var store = new DevExpress.data.ODataStore({
  // ODataStore is configured here
});

var options = { filter: ["age", ">", 30] };

store.load(options)
  .done(function (data) {
    // Process "data" here
  })
  .fail(function (error) {
    // Handle the "error" here
  });
```
```

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

### getInstance(element)

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

Creates a widget instance.

```APIDOC
## getInstance(element)

### Description
Creates a widget instance.

### Method
getInstance

### Parameters
#### Path Parameters
- **element** (Element) - Required - The DOM element.

```

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

### Get Validator Instance

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

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

```javascript
// Returns the UI component's instance
// $("#myValidator").dxValidator("instance");
```

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

### Get TreeMap Size

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

Gets the current dimensions of the TreeMap component in pixels. Returns an object containing width and height.

```javascript
let size = treeMap.getSize();
// size.width and size.height
```

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

### instance()

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

Gets the Sortable UI component instance.

```APIDOC
## instance()

### Description
Gets the Sortable UI component instance.
```