React Common - Object Structures

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.

This option accepts three types of values:

• String
  A predefined format or custom format string.

• Function
  Specifies a custom format. 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 if you use Devextreme-Intl:

  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

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

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.

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

• Templates