Object Structures

This section describes the structure of the objects that are used in API multiple times as function parameters or option values.

animationConfig

Defines animation options.

Type:

Object

BarGaugeBarInfo

An object that provides information about a bar in the BarGauge widget.

Type:

Object

BarGaugeLegendItem

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

Type:

Object

See Also

BaseChartLegendItem

An object that provides information about a legend item in the Chart and PolarChart widgets.

Type:

Object

See Also

CellRange

The coordinates of the exported DataGrid in the Excel file.

Type:

Object

This object has the following structure:

{
    from: { row: 1, column: 1 }, 
    to: { row: 4, column: 4 }
}

Whereas columns in Excel are indexed with letters, the CellRange is specified using numeric values. In the code above, the range is A1-D4.

device

The device object defines the device on which the application is running.

Module: core/devices
Export: default
Type:

Object

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

dxDiagramCustomCommand

An object that provides information about a custom command 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

ExportDataGridProps

Properties that can be passed to the exportDataGrid(options) method.

Type:

Object

FileSystemItem

An object that provides information about a file system item (file or folder) in the FileManager widget.

Export: default
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
Accepted Values: 'billions' | 'currency' | 'day' | 'decimal' | 'exponential' | 'fixedPoint' | 'largeNumber' | 'longDate' | 'longTime' | 'millions' | 'millisecond' | 'month' | 'monthAndDay' | 'monthAndYear' | 'percent' | 'quarter' | 'quarterAndYear' | 'shortDate' | 'shortTime' | 'thousands' | 'trillions' | 'year' | 'dayOfWeek' | 'hour' | 'longDateLongTime' | 'minute' | 'second' | 'shortDateShortTime'

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
    }

    or

    // 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

See Also

globalConfig

Specifies settings that affect all DevExtreme widgets.

Module: core/config
Export: default
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

See Also

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.

To use a template, pass a value with one of the following types to a widget's ...Template option:

  • String
    Specifies the name of the template to use if the template is defined within a widget using the dxTemplate markup component.

    Angular
    HTML
    TypeScript
    <dx-list ...
        itemTemplate="listItem">
        <div *dxTemplate="let itemData of 'listItem'; let itemIndex = index">
            {{itemIndex}} - {{itemData.itemProperty}}
        </div>
    </dx-list>
    import { DxListModule } from "devextreme-angular";
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxListModule
        ],
        // ...
    })
    AngularJS
    HTML
    JavaScript
    <div ng-controller="DemoController">
        <div dx-list="{
            ...
            itemTemplate: 'listItem'
        }" dx-item-alias="itemData">
            <div data-options="dxTemplate: { name: 'listItem' }">
                {{$index}} - {{itemData.itemProperty}}
            </div>
        </div>
    </div>
    angular.module('DemoApp', ['dx'])
        .controller('DemoController', function ($scope) {
            // ...
        });
    Knockout
    HTML
    JavaScript
    <div data-bind="dxList: {
        ...
        itemTemplate: 'listItem'
    }">
        <div data-options="dxTemplate: { name: 'listItem' }">
            <span data-bind="text: $index"></span> - <span data-bind="text: itemProperty"></span>
        </div>
    </div>
    var viewModel = {
        // ...
    };
    
    ko.applyBindings(viewModel);
  • DOM Node or jQuery
    Specifies the page element containing the template. Use it only for referring to external templates when using a 3rd-party template engine.

    JavaScript
    HTML
    DevExpress.setTemplateEngine("underscore");
    
    $(function() {
        $("#list").dxList({
            // ...
            itemTemplate: $("#itemTemplate")
        });
    })
    <div id="list"></div>
    <script type="text/html" id="itemTemplate">
        <!-- your Underscore template -->
    </script>
  • Function
    Combines the HTML markup using jQuery DOM manipulation methods:

    JavaScript
    $(function() {
        $("#listContainer").dxList({
            // ...
            itemTemplate: function (itemData, itemIndex, element) {
                element.append(
                    $("<span>").text(itemIndex) - $("<span>").text(itemData.itemProperty)
                )
            }
        });
    });
See Also

VectorMapLegendItem

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

Type:

Object

See Also