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

Example - set the CSS class of the command

<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.

Example - handle the click event of the custom command button

<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.

Example - provide an iconClass for the grid command column

<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>

Example - provide an custom iconClass for the update and cancel command buttons

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

columns.command.iconClass.cancel String

The class for the web font icon of the cancel command button.

Example - provide an custom iconClass for the cancel command button

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

columns.command.iconClass.edit String

The class for the web font icon of the edit command button.

Example - provide an custom iconClass for the edit command button

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

columns.command.iconClass.update String

The class for the web font icon of the update command button.

Example - provide an custom iconClass for the update command button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{
        name: "edit",
        iconClass: {
            update: "k-icon k-i-copy"
          }
        }]
   }
  ],
  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.

Example - set the command name

<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.

Example - customize the template of the command column

<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.

Example - customize the text of the command

<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>

Example - customize the "edit", "cancel" and "update" text of the edit command

<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.text.edit String

The "edit" text of the edit command.

Example - customize the edit text of the edit command

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

columns.command.text.cancel String

The "cancel" text of the edit command.

Example - customize the cancel text of the edit command

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

columns.command.text.update String

The "update" text of the edit command.

Example - customize the update text of the edit command

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{ name: "edit", text: { update: "Custom Update"} }] }
  ],
  editable: "inline",
  dataSource: {
    data: [ {Id: 1, name: "Jane Doe" } ],
    schema: {
      model: {
        id: "Id",
        fields: {
          name: { type: "string" }
        }
      }
    }
  }
});
</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.

Example - set the command name

<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>