Markup Components Command

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

Type: Object

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 action to be 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', action: '#product-details', title: 'Add' } "></div>

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

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

To function properly, this code snippet expects the "add" field to be present in the ViewModel. This field can be a function that will be called when executing the Add command.

A command can define a navigation action, that is the action configuration option can hold an object or a string representing the URL to which to navigate. In this instance, you can set a set of additional command options that are required for navigation to the specified view. These options are described within the navigate method description. Here they are: root, target and direction.

To be displayed, a command must be registered within a command container using the application's command mapping. 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.