Utils

This section describes an API that can be used in different application parts such as widgets, data and the application framework.

animationPresets

A repository of animations.

Export: default

To avoid defining animations each time you animate an element(s), register different animations in the DevExtreme.animationPresets repository and request them by associated names when required. This repository has a built-in set of animations. Here they are:

  • fade
  • stagger-fade
  • slide
  • stagger-slide
  • ios7-slide
  • overflow
  • ios7-toolbar
  • stagger-smooth-drop
  • stagger-drop
  • stagger-3d-drop
NOTE
Stagger-like animations are executed by the transitionExecutor only. They cannot be applied by calling the animate method for a particular element.

To populate the animationPresets repository with your animations, use the registerPreset(name, config) method. To get the required animation from the repository, use the getPreset(name) method.

cancelAnimationFrame(requestID)

Deprecated

Use the cancelAnimationFrame(requestID) instead.

config()

Gets the current global configuration object.

Module: core/config
Export: default
Return Value: Object
An object representing the current global configuration options.

config(config)

Sets the global configuration object.

Module: core/config
Export: default
Parameters:
config: Object
An object containing the required global configuration options.

The global configuration object contains the following fields:

  • rtlEnabled - Specifies whether or not the application supports a right-to-left representation.
    By default, rtlEnabled is set to false.

  • defaultCurrency - Specifies the default currency used in the application.
    By default, defaultCurrency is set to 'USD'.

    JavaScript
    var config = {
        rtlEnabled: true,
        defaultCurrency: "EUR"
    };
    DevExpress.config(config);

devices

An object that serves as a namespace for the methods and events specifying information on the current device.

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js

fx

An object that serves as a namespace for the methods that are used to animate UI elements.

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js
Module: animation/fx
Export: default

hideTopOverlay()

Hides the last displayed overlay widget.

Export: default
Return Value: Boolean
A Boolean value indicating whether or not hiding is successful. If no displayed overlay widgets were found, the function returns *false*.

localization

An object that serves as a namespace for the methods that are used to localize an application.

processHardwareBackButton()

Processes the hardware back button click.

Export: default

When building a mobile application, you should initiate processing of the hardware back button click. The following code demonstrates how to do this by calling the processHardwareBackButton() method within the event listener of the PhoneGap backbutton event.

JavaScript
$(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        //...
        document.addEventListener("backbutton", onBackButton, false);
    }
    function onBackButton() {
        DevExpress.processHardwareBackButton();
    }   
    //...   
}

To handle the back button click, subscribe to the HtmlApplication.navigatingBack() event and use the isHardwareButton event handler parameter within the handling function.

requestAnimationFrame(callback)

Deprecated

Use the requestAnimationFrame(callback) instead.

rtlEnabled

Deprecated

Use the config instead.

Specifies whether or not the entire application/site supports right-to-left representation.

Type: Boolean
Default Value: false

The most common scenario is to switch the entire application/site to a right-to-left representation. In this instance, use the DevExpress.rtlEnabled field. When this option is set to true, applications built using the DevExtreme framework and sites based on DevExtreme widgets will have a right-to-left reading order, mirroring of UI elements and reversed transition animation. If you need to switch the display of each DevExtreme component used within the application/site to a right-to-left representation, use a specifically designed configuration option - rtlEnabled.

TransitionExecutor

The manager that performs several specified animations at a time.

Export: default

While there are scenarios when animating certain elements is required, there can be more complex scenarios when you need to perform a transition - several animations of different elements performed simultaneously. For instance, when you navigate from a view to another view in a mobile application, the content of the new view replaces the content of the old view. Moreover, the header can be animated differently from the rest of the content on both views. Thus, four different animations must be performed simultaneously. To simplify the implementation of such scenarios, the TransitionExecutor is implemented.

To register the set of animations to be performed simultaneously, use the enter(elements, animation) and leave(elements, animation) methods of the TransitionExecutor object. Use the enter(elements, animation) method to specify the elements that should appear ("enter") on the page with a specified animation. The leave(elements, animation) method should be called if there are elements that must disappear ("leave") from the page.

The TransitionExecutor object is also useful when a need arises to perform a staggered animation of elements when elements are animated with a slight delay after animation of each successive element starts resulting in a curtain-like effect. In this instance, each element should be registered with by the enter(elements, animation)/leave(elements, animation) method with the animation configuration where the staggerDelay option is specified.

To start a transition, call the start() method of the TransitionExecutor object. To clear the registered set of animations in the TransitionExecutor object, call the reset() method.

NOTE
The Transition Executor is used automatically in [DevExtreme SPA applications) to animate different parts of views. You need to provide a particular set of animations for the application only.

ui

An object that serves as a namespace for DevExtreme UI widgets as well as for methods implementing UI logic in DevExtreme sites/applications.

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js

utils

An object that serves as a namespace for utility methods that can be helpful when working with the DevExtreme framework and UI widgets.

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js

validationEngine

An object that serves as a namespace for the methods required to perform validation.

Export: default

viz

An object that serves as a namespace for DevExtreme Data Visualization Widgets.

Included in: dx.viz.js, dx.viz-web.js, dx.all.js

Errors and Warnings

This section lists core errors and warnings that may occur in DevExtreme applications.