From v18.1, the DevExtreme hybrid mobile-related tools, including DevExtreme SPA Framework, are deprecated. See this blog post for more information.

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.


This section describes members used to manipulate the command.


This section describes events fired by this widget.

See Also