A markup component used to define markup options for a command.

Included in:, dx.web.js, dx.viz-web.js, dx.all.js
Export: default


The dxCommand markup component allows you to define a view-related action in an abstract way. Add a div element to the root of the view markup with the data-bind attribute set to dxCommand. Use the configuration options of the dxCommand component to define an action in an abstract way. These options include the handler performed when executing the command, the title, the icon, and the enabled and visible states.

<div data-options="dxView: { name: 'index', title: 'Home' }">
    <div data-bind="dxCommand: { id: 'myCommand', onExecute: '#product-details', title: 'Add' } "></div>

As you can see in the code above, a command can be used for navigation. In this instance, you can set the onExecute option to a URI or to an object defining a URI. In addition, you can specify navigation options for a command - the options that have the same names as the fields of the options object passed as the second parameter to the HtmlApplication.navigate(uri, options) method.

A command's markup options can be bound to ViewModel fields. Here is an example.

<div data-options="dxView: { name: 'home', title: 'Home' }">
    <div data-bind="dxCommand: { id: 'myCommand', onExecute: add, title: 'Add' } "></div>

To function properly, this code snippet expects the "add" field to be present in the ViewModel.

To be displayed, a command must be registered within a command container using the application's command mapping. Depending on the command container chosen for a command in a layout and the device the application is running on, different widgets will be used to display commands. You can specify widget configuration settings directly within the dxCommand component's configuration object.

<div data-bind="dxCommand: { id: 'myCommand', onExecute: '#product-details', title: 'Add', hint: 'Add a product' } "></div>

In the code above, the specified hint option will be applied if the widget that will display the command has the hint option in its configuration.

To learn more about commands and how to display them in a view, read the Add Commands to Views topic.


This section describes configuration options used to create a command.

Name Description

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


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


The identifier of the command.


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


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


Specifies the title of the widget associated with this command.


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


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


This section describes members used to manipulate the command.

Name Description

Executes the action associated with this command.