JavaScript/jQuery LoadIndicator Options
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){ $("#loadIndicatorContainer").dxLoadIndicator({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-load-indicator ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-load-indicator>
import { DxLoadIndicatorModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxLoadIndicatorModule ], // ... })
Vue
<template> <DxLoadIndicator ... :element-attr="loadIndicatorAttributes"> </DxLoadIndicator> </template> <script> import DxLoadIndicator from 'devextreme-vue/load-indicator'; export default { components: { DxLoadIndicator }, data() { return { loadIndicatorAttributes: { id: 'elementId', class: 'class-name' } } } } </script>
React
import React from 'react'; import LoadIndicator from 'devextreme-react/load-indicator'; class App extends React.Component { loadIndicatorAttributes = { id: 'elementId', class: 'class-name' } render() { return ( <LoadIndicator ... elementAttr={this.loadIndicatorAttributes}> </LoadIndicator> ); } } export default App;
height
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only when using Knockout. |
onDisposing
A function that is executed before the widget is disposed of.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
model |
Model data. Available only if you use Knockout. |
|
fullName |
The path to the modified option that includes all parent options. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
value | any |
The modified option's new value. |
rtlEnabled
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.
DevExpress.config({ rtlEnabled: true });
See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
width
This option accepts a value of one of the following types:
Number
The width 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:JavaScriptwidth: function() { return window.innerWidth / 1.5; }