Configuration

This section describes the configuration options of the LoadIndicator widget.

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type: Object
Default Value: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

height

Specifies the widget's height.

Type: Number|String| function()
Return Value: Number|String

The widget height.

Default Value: undefined

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

  • Number
    The height of the widget in pixels.

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

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

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type: String
Default Value: undefined

Show Example:
AngularJS
Knockout
jQuery

indicatorSrc

Specifies the path to an image used as the indicator.

Type: String
Default Value: ''

Show Example:
AngularJS
Knockout
jQuery

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function(e)
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

Type: function(e)
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

Default Value: null

You cannot access elements in the widget because this handler is executed before they are ready. Use the onContentReady handler instead.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function(e)
Function parameters:

Information about the event.

Object structure:
component: Object
name: String

A short name of the option whose value has been changed.

fullName: String

A full name of the option whose value has been changed; contains a full hierarchy of the option.

value: any

A new value for the option.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

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
});

visible

Specifies whether the widget is visible.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery

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;
    }