React SPA Framework - Markup Components - Command - Configuration

This section describes configuration options used to create a command.

disabled

Indicates whether or not the widget that displays this command is disabled.

Type:

Boolean

Default Value: false

elementAttr

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

Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#markup ComponentsContainer").dxMarkup Components({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-markup components ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-markup components>
import { DxMarkup ComponentsModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMarkup ComponentsModule
    ],
    // ...
})
ASP.NET MVC Control
Razor C#
Razor VB
@(Html.DevExtreme().Markup Components()
    .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().Markup Components() _
    .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's height.

Default Value: undefined

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%", "auto", "inherit".

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

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

icon

Specifies the name of the icon shown inside the widget associated with this command.

Type:

String

Default Value: ''

This option can take on the name of an icon from the built-in icon library.

iconSrc Deprecated

Use the icon property instead.

id

The identifier of the command.

Type:

String

Default Value: null

Setting this option is mandatory, since a command identifier is required when defining an application's command mapping. The identifier should be unique throughout the entire application.

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Markup Components

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model

Object

The model data. Available only if you use Knockout.
Default Value: null

onExecute

Specifies an action performed when the execute() method of the command is called.

Type:

Function

|

String

|

Object

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Command

Returns the command instance.
element

HTMLElement | jQuery

The command's container. It is an HTML Element or a jQuery Element when you use jQuery.
model

Object

The model data. Available only if Knockout is used.
Default Value: null

Assign a function to perform a custom action when the command is executed.

You can assign a URL to which the browser will navigate when the widget is clicked. The URL can be presented as a string or an object, both conforming to the navigation routing registered in the application. In addition, you can specify navigation parameters. For this purpose, specify command options with the same names as the fields of the options object passed as the second parameter to the HtmlApplication.navigate(uri, options) method. For details on using commands for navigation, refer to the Navigate to a View topic.

onInitialized

A function that is executed only once, after the widget is initialized.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Markup Components

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

You cannot access widget elements in this function because it is executed before they are ready.

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
name

String

The option's short name.
model

Object

The model data. Available only if you use Knockout.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component Markup Components

The widget's instance.
fullName

String

The option's full name.
value any

The option's new value.
Default Value: null

renderStage

Specifies whether the current command is rendered when a view is being rendered or after a view is shown.

Type:

String

Default Value: 'onViewShown'
Accepted Values: 'onViewShown' | 'onViewRendering'

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

title

Specifies the title of the widget associated with this command.

Type:

String

Default Value: ''

type

Specifies the type of the button, if the command is rendered as a Button widget.

Type:

String

Default Value: undefined

See the Button type option description for information on accepted values.

visible

A Boolean value specifying whether or not the widget associated with this command is visible.

Type:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

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:

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