Configuration

An object defining configuration options for the widget.

animation

Specifies the animation to be used to show the rendered content.

Default Value: undefined

You can pass a configuration object defining the required animation or the name of one of the registered animations.

Note that you can specify a staggered animation so that content elements with a similar selector are animated using the specified animation one after another with a specified delay. For details, refer to the Animate the Content Appearance article.

onRendered

Specifies a callback function that is called when the widget's content has finished rendering but is not yet shown.

Type:

Function

Function parameters:
e:

Object

Provides function parameters.

Object structure:
component:

Object

A root element of the rendered markup.

element:

jQuery

An HTML element of the widget.

model:

Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Default Value: null

onShown

Specifies a callback function that is called when widget content is shown and animation has completed.

Type:

Function

Function parameters:
e:

Object

Provides function parameters.

Object structure:
component:

Object

A root element of the shown markup.

element:

jQuery

An HTML element of the widget.

model:

Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Default Value: null

renderWhen

Specifies the jQuery.Promise or boolean value, which when resolved, forces widget content to render.

Default Value: undefined

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

showLoadIndicator

Indicates if a load indicator should be shown until the widget's content is rendered.

Type:

Boolean

Default Value: false

To learn more about how to indicate that the content is currently loaded, refer to the Indicate the Loading State article.

staggerItemSelector

Specifies a jQuery selector of items that should be rendered using a staggered animation.

Type:

String

Default Value: undefined

Elements with the selector specified by this option will be searched within the widget's content. The found elements will be shown with animation specified by the animation option. If the specified animation is staggered, the elements will be animated one after another with the delay specified within the animation's configuration.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

visible

Specifies whether the widget is visible.

Type:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget width.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The width of the widget in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }