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

Specifies whether or not the current component supports a right-to-left representation.

Type:

Boolean

Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

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 widget tab index.

Type:

Number

Default Value: 0

visible

A Boolean value specifying whether or not the widget is visible.

Type:

Boolean

Default Value: true

width

Specifies the width of the widget.

Type:

Number

|

String

|

function

Return Value:

Number

|

String

The widget width.

Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }