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

Columns.command.iconClass

configuration

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.

columns.command.iconClass

String|Object

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

String

The class for the web font icon of 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.

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

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