Edit this page

columns.command String |Array

The configuration of the column command(s). If set the column would display a button for every command. Commands can be custom or built-in ("edit" or "destroy").

The "edit" built-in command switches the current table row in edit mode.

The "destroy" built-in command removes the data item to which the current table row is bound.

Custom commands are supported by specifying the click option.

The built-in "edit" and "destroy" commands work only if editing is enabled via the editable option. The "edit" command supports "inline" and "popup" editing modes.

Example - set command as a string

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: "destroy" } // displays the built-in "destroy" command
  ],
  editable: true,
  dataSource: [ { name: "Jane Doe" } ]
});
</script>

Example - set command as array of strings

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: ["edit", "destroy"] } // displays the built-in "edit" and "destroy" commands
  ],
  editable: "inline",
  dataSource: [ { name: "Jane Doe" } ]
});
</script>

Example - set command as array of objects

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [
        {
         name: "details",
         click: function(e) {
            // command button click handler
         }
        },
        { name: "destroy" } // built-in "destroy" command
      ]
    }
  ],
  editable: true,
  dataSource: [ { name: "Jane Doe" } ]
});
</script>