New to Kendo UI for jQuery? Start a free 30-day trial

Columns.command

configuration

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.

columns.command

String|Array

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

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

<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: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>

columns.command.className

String

The CSS class applied to the command button.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{ className: "btn-destroy", name: "destroy", text: "Remove" }] }
  ],
  editable: true,
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>
<style>
.btn-destroy {
    color: red;
}
</style>

columns.command.click

Function

The JavaScript function executed when the user clicks the command button. The function receives a jQuery Event as an argument.

The function context (available via the this keyword) will be set to the grid instance.

Grid custom commands are rendered as anchors (<a>) with no href value. Prevent the click event in the click function in order to avoid shifting of the page scroll position.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{
        name: "details",
        click: function(e) {
            // prevent page scroll position change
            e.preventDefault();
            // e.target is the DOM element representing the button
            var tr = $(e.target).closest("tr"); // get the current table row (tr)
            // get the data bound to the current table row
            var data = this.dataItem(tr);
              /* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("Details for: " + data.name);
        }
      }]
   }
  ],
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>

columns.command.iconClass

String|Object

The class for the web font icon of the button. When it is defined as an object it allows to customize the web font icon for the "edit", "update" and "cancel" command buttons.

Grid commands are rendered as anchors (<a>) with a span inside. The icon for the button depends on the iconClass which is rendered as a class for the inner span. Default commands have a predefined iconClass value.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{
        name: "copy",
        iconClass: "k-icon k-i-copy"
        }]
   }
  ],
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{
        name: "edit",
        iconClass: {
            edit: "k-icon k-i-pencil",
            update: "k-icon k-i-copy",
            cancel: "k-icon k-i-cancel"
          }
        }]
   }
  ],
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  },
  editable: "inline"
});
</script>

columns.command.name

String

The name of the command. The built-in commands are "edit" and "destroy". Can be set to a custom value.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{ name: "edit" }] }
  ],
  editable: "popup",
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>

columns.command.template

String

The template of the command column.

Add the k-grid-[command.name] to any element in the template which requires the click handler to be called.

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { command: [
        {
          // for click to work when there is template, add class "k-grid-[command.name]" to some element, otherwise the click handler will not be triggered
          name: "settings",
          template: "Some text in the command column <a class='k-button k-grid-settings'><span class='k-icon k-i-settings'></span>Settings</a>",
          click(e){
            kendo.alert("Settings clicked!")
          }
        }
      ]
      }
    ],
    dataSource: [{ name: "Jane Doe" }]
  });
</script>

columns.command.text

String|Object

The text displayed by the command button and the "cancel", "edit" and "update" texts of the edit command. If not set the name option is used as the button text.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{ name: "destroy", text: "Remove" }] }
  ],
  editable: true,
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: [{ name: "edit",
                  text: { edit: "Custom edit", cancel: "Custom cancel", update: "Custom update" } }] }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "inline"
  }
});
</script>

columns.command.visible

Function

The JavaScript function executed on initialization of the row which will determine whether the command button will be visible. The function receives a the data item object for the row as an argument.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{ name: "edit", visible: function(dataItem) { return dataItem.name==="Jane" } }] }
  ],
  editable: "popup",
  dataSource: {
    data: [ { name: "Jane" }, { name: "Bill" } ],
    schema: {
      model: {
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</script>

Related Members