This object is returned by the DevExpress.devices.current() and DevExpress.devices.real() methods to provide information on the device on which the application is currently running. Use the fields of this object to get the required information on the device.

You can emulate as if the application runs on another device. For this purpose, use the DevExpress.devices.current() function passing the required device object as a parameter.

The information on the device on which the application is currently running is used to provide an appropriate look and feel for the application. In particular, the styles that are most appropriate for the current device will be applied.

dxDiagramConnector

An object that provides information about a connector in the Diagram widget.

Type:

Object

dxDiagramItem

An object that provides information about an item (shape or connector) in the Diagram widget.

Type:

Object

dxDiagramShape

An object that provides information about a shape in the Diagram widget.

Type:

Object

dxEvent

Describes dxEvent, a counterpart of the jQuery.Event to be used without jQuery.

dxSchedulerAppointment

An object that describes an appointment in the Scheduler widget.

Type:

Object

ExcelDataGridCell

A DataGrid cell to be exported to Excel.

Type:

Object

ExcelFont

An object that configures the font in an Excel cell.

Type:

Object

format

Formats values.

Type:

String

Function

Object

Function parameters:

value:

Number

Date

The value to be formatted.

Return Value:

String

The value after formatting.

Default Value: undefined

This option accepts three types of values:

String
A predefined format or custom format string.
Function
Applies a custom format to a value and returns this value as a string. A shortcut for the formatter option.

Object
Allows you to configure the format. Can have one of the following structures:

// Uses a predefined format
format: {
    type: String, // one of the predefined formats
    precision: Number, // the precision of values
    currency: String // a specific 3-letter code for the "currency" format
}

// Specifies a custom format
format: {
    formatter: Function, // a custom formatting function
    parser: Function // a parsing function for string values
}

You can specify the Intl NumberFormat's and DateTimeFormat's options parameter fields:

format: { year: "2-digit", month: "narrow", day: "2-digit" }
=== or ===
format: { style: "currency", currency: "EUR", useGrouping: true }

If you use Globalize, you can use the fields the numberFormatter, currencyFormatter, and dateFormatter accept instead of the fields described in this section. For example, you can use skeletons to format dates. Note that this approach can require additional CLDR modules not shipped with the DevExtreme package.

format: { skeleton: 'GyMMMd' }

View Demo

FunnelLegendItem

An object that provides information about a legend item in the Funnel widget.

Type:

Object

globalConfig

Specifies settings that affect all DevExtreme widgets.

import globalConfig from "devextreme/core/config"

Type:

Object

Pass this object to the DevExpress.config(globalConfig) method to apply these setting, or call the same method without arguments to get the object with current settings.

DevExpress.config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    //...
});

PieChartLegendItem

An object that provides information about a legend item in the PieChart widget.

Type:

Object

positionConfig

Configures the position of an overlay element.

Type:

Object

Assign this object to the position option of an overlay widget (Popup, Popover, Tooltip, etc.).

To position an element, specify the my, at, and of options. In the following code, the Popup widget's left side is aligned with the target's right side. This configuration reads as follows: "place my left side at the right side of the #target element."

jQuery

index.js

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            my: "left",
            at: "right",
            of: "#target"
        }
    });
});

Angular

app.component.html

<dx-popup ... >
    <dxo-position
        my="left"
        at="right"
        of="#target">
    </dxo-position>
</dx-popup>

Vue

App.vue

<template>
    <DxPopup ... >
        <DxPosition
            my="left"
            at="right"
            of="#target"
        />
    </DxPopup>
</template>

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

import DxPopup, {
    DxPosition
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition
    }
}
</script>

React

App.js

import React from 'react';

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

import Popup, {
    Position
} from 'devextreme-react/popup';

class App extends React.Component {
    render() {
        return (
            <Popup ... >
                <Position
                    my="left"
                    at="right"
                    of="#target"
                />
            </Popup>
        );
    }
}
export default App;

You can use the offset option to further adjust the position.

Possible positions are limited by the Window. To limit them by another element, specify the boundary option. If actual boundaries should be narrower or wider than the boundary element, set the boundaryOffset.

When a specified position exceeds the boundaries, a collision occurs. Use the collision option to specify how such collisions should be resolved.

template

A template notation used to specify templates for widget elements.

Type:

Templates are passed as options that end with ...Template (in jQuery, Angular, and Vue) or ...Render/...Component (in React).

Each template has access to the following parameters:

data
A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.
index
A zero-based index of the item in the collection. Available only in collection widget templates.
element
A jQuery element that represents the widget element being customized. Available only if you use jQuery.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List widget:

jQuery

index.js

$(function() {
    $("#listContainer").dxList({
        items: [
            { itemProperty: "someValue" },
            // ...
        ],
        itemTemplate: function (data, index, element) {
            return index + " - " + data.itemProperty;

            // ===== or using the "element" parameter =====
            const $item = $("<div>").text(
                index + " - " + data.itemProperty
            );
            element.append($item);
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-list
    [items]="listData"
    itemTemplate="list-item">
    <div *dxTemplate="let data of 'list-item'; let index = index">
        {{index}} - {{data.itemProperty}}
    </div>
</dx-list>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    listData = [
        { itemProperty: "someValue" },
        // ...
    ]
}

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

import { DxListModule } from 'devextreme-angular';

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

Vue

App.vue

<template>
    <DxList
        :items="listData"
        item-template="list-item">
        <template #list-item="{ data, index }">
            {{ index }} - {{ data.itemProperty }}
        </template>
    </DxList>
</template>

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

import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    },
    data() {
        return {
            listData: [
                { itemProperty: 'someValue' },
                // ...
            ]
        }
    }
}
</script>

React

App.js

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

import List from 'devextreme-react/list';

const renderListItem = (data, index) => {
    return (
        <div>{index} - {data.itemProperty}</div>
    );
}

class App extends React.Component {
    listData = [
        { itemProperty: 'someValue' },
        // ...
    ];

    render() {
        return (
            <List
                items={this.listData}
                itemRender={renderListItem}
            />
        );
    }
}
export default App;

Collection widgets also support templates for individual items. Do not specify the widget's dataSource option if you use individual templates.

jQuery

index.js

$(function() {
    $("#listContainer").dxList({
        items: [{
            template: function () {
                return $("<i>").text("Item 1")
            }
        }, {
            template: function () {
                return $("<b>").text("Item 2")
            }
        },{
            template: function () {
                return $("<div>").append(
                    $("<span>").text("Item with nested component"),
                    $("<div>").dxButton({
                        text: "Click me"
                    })
                )
            }
        }]
    });
});

Angular

app.component.html

app.module.ts

<dx-list>
    <dxi-item>
        <i>Item 1</i>
    </dxi-item>
    <dxi-item>
        <b>Item 2</b>
    </dxi-item>
    <dxi-item>
        <div *dxTemplate>
            Item with a nested component
            <dx-button text="Click me"></dx-button>
        </div>
    </dxi-item>
</dx-list>

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

import { DxListModule, DxButtonModule } from 'devextreme-angular';

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

Vue

App.vue

<template>
    <DxList>
        <DxItem>
            <template #default>
                <i>Item 1</i>
            </template>
        </DxItem>
        <DxItem>
            <template #default>
                <i>Item 2</i>
            </template>
        </DxItem>
        <DxItem>
            <template #default>               
                <div>
                    Item with a nested component
                    <DxButton text="Click me" />
                </div>
            </template>
        </DxItem>
    </DxList>
</template>

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

import DxList, {
    DxItem
} from 'devextreme-vue/list';
import DxButton from 'devextreme-vue/button';

export default {
    components: {
        DxList,
        DxItem,
        DxButton
    }
}
</script>

React

App.js

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

import List, { Item } from 'devextreme-react/list';
import Button from 'devextreme-react/button';

class App extends React.Component {
    render() {
        return (
            <List>
                <Item>
                    <i>Item 1</i>
                </Item>
                <Item>
                    <i>Item 2</i>
                </Item>
                <Item>
                    Item with a nested component
                    <Button text="Click me" />
                </Item>
            </List>
        );
    }
}
export default App;

VectorMapLegendItem

An object that provides information about a legend item in the VectorMap widget.

Type:

Object

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery/JS Common - Object Structures

See Also

See Also

See Also

See Also

jQuery

Angular

Vue

React

template

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

See Also