React Common - 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

device

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

import device from "devextreme/core/devices"
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.

dxEvent

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

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
    One of the predefined formats (see the type option) or a format string. The built-in localization engine supports the following characters. You can specify different formats by repeating these characters.

    Numeric Formats

    Format character Description
    0 A digit. Displays '0' if it is not specified in the UI.
    # A digit or nothing. One symbol represents several integer digits, but only one decimal digit.
    For example, "#.#" represents "123.4", but not "123.45".
    . A decimal separator.
    Displayed according to the decimalSeparator or the set locale if you use Intl or Globalize.
    , A group separator.
    Displayed according to the thousandsSeparator or the set locale if you use Intl or Globalize.
    % The percent sign. Divides the input value by 100.
    If it is enclosed in single quotes ('%'), it only adds this sign to the input value.
    ; Separates positive and negative numbers. If there is no explicit negative format, a positive number receives the "-" prefix.
    Other characters Any character. Should be placed only at the format string's beginning or end.
    You can use the special characters above as well (in single quotation marks).

    Date-Time Formats

    Format character Description
    y A calendar year.
    Q A quarter number or name.
    Available combinations with example: "Q" - "2", "QQ" - "02", "QQQ" - "Q2" and "QQQQ" - "2nd quarter".
    M A month number or name.
    Available combinations with example: "M" - "9", "MM" - "09", "MMM" - "Sep", "MMMM" - "September", "MMMMM" - "S".
    d A month day.
    E A week day name.
    Available combinations with example: "E", "EE" or "EEE" - "Tue", "EEEE" - "Tuesday", "EEEEE" - "T".
    a A day period (am or pm).
    h An hour. From 1 to 12.
    H An hour. From 0 to 23.
    m A minute.
    s A second.
    S A fractional second.
    NOTE
    Reference the Globalize library in your application to use other numeric or datetime format characters.
  • Function
    Specifies a custom format. A shortcut for the formatter option.

  • Object
    Allows you to configure the format. Can have one of these two 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
    }

    If you use Devextreme-Intl, 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 accepted by numberFormatter, currencyFormatter, and dateFormatter instead of the fields described in this section. For example, you can use skeletons to format dates. Note that this approach might require additional CLDR modules not shipped with the DevExtreme package.

    format: { skeleton: 'GyMMMd' }

View Demo

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 argumants to get the object with current settings.

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

positionConfig

The position object specifies the widget positioning options.

Type:

Object

This object is passed to the position configuration option of a widget that overlays the main screen (LoadPanel, Popup, Popover, and Toast).

The positionConfig object may contain the following fields: my, at, of, offset and collision. Look at the following sentence to see how to use these fields to position the required element against the target element.

"Place my 'left' side at the 'left bottom' corner of the '#targetElement'." The italic quoted phrase located after each option name within the sentence represents a value of the appropriate option.

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. Useful for referring to external templates when using a 3rd-party template engine.

    JavaScript
    HTML
    DevExpress.ui.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