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

Columns

configuration

The configuration of the grid columns. An array of JavaScript objects or strings. JavaScript objects are interpreted as column configurations. Strings are interpreted as the field to which the column is bound. The grid will create a column for every item of the array.

If this setting is not specified the grid will create a column for every field of the data item.

columns

Array

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: ["name", "age"], // two columns bound to the "name" and "age" fields
  dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }]
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [{
    field: "name",// create a column bound to the "name" field
    title: "Name" // set its title to "Name"
  }, {
    field: "age",// create a column bound to the "age" field
    title: "Age" // set its title to "Age"
  }],
  dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>

columns.aggregates

Array

The aggregate(s) which are calculated when the grid is grouped by the columns field. The supported aggregates are "average", "count", "max", "min" and "sum".

<div id="grid"></div>
<script>
  let encode = kendo.htmlEncode;

  $("#grid").kendoGrid({
    columns: [
      { field: "firstName", groupable: false },
      { field: "lastName" }, /* group by this column to see the footer template */
      { field: "age",
       groupable: false,
       aggregates: [ "count", "min", "max" ],
       groupFooterTemplate: ({ age }) => `age total: ${encode(age.count)}, min: ${encode(age.min)}, max: ${encode(age.max)}`
      }
    ],
    groupable: true,
    scrollable: false,
    dataSource: {
      data: [
        { firstName: "Jane", lastName: "Doe", age: 30 },
        { firstName: "John", lastName: "Doe", age: 33 }
      ]
    },
    groupable: true,
    scrollable: false,
    dataSource: {
      data: [
        { firstName: "Jane", lastName: "Doe", age: 30 },
        { firstName: "John", lastName: "Doe", age: 33 }
      ],
      group: {
        field: "age", aggregates: [
          { field: "age", aggregate: "count" },
          { field: "age", aggregate: "min"},
          { field: "age", aggregate: "max" }
        ]
      }
    }
  });
</script>

Check Aggregates for a live demo.

columns.attributes

Object|Function

HTML attributes of the table cell (<td>) rendered for the column.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: {
      "class": "table-cell !k-text-right",
      style: "font-size: 14px"
    }
  } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>

The table cells would look like this: <td class="table-cell" style="text-align: right; font-size: 14px">...</td>.

Since R2 2023 attributes logic has changed due to Kendo templates evaluation rendering updates. Now we deliver a new attributes overload that accepts a single string parameter and the name of the JS handler that returns the attributes.

<div id="grid"></div>
<script>
  let ageAttributes = (data) => {
    return { style: `background-color: ${data.color} ` }
  }

  $("#grid").kendoGrid({
    columns: [
      {
        field: "name",
        title: "Name",
        attributes: { "class": "table-cell !k-text-right" }
      },
      {
        field: "age",
        title: "Age",
        attributes: ageAttributes
      }
    ],
    dataSource: [
      { name: "Anne Smith", age: 30, color: "#FFD68A" },
      { name: "John Doe", age: 22, color: "#B2AC88" }
    ]
  });
</script>

columns.columnMenu

Boolean

If set to false the column menu will not be rendered for the specific column.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", columnMenu: false },
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columns.columns

Array

The columns which should be rendered as child columns under this group column header.

**Note that group column cannot be data bound and supports limited number of bound column settings - such as title, headerTemplate, locked

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columns: [
    {
        title: "Personal Info",
        columns: [
            { field: "name" },
            { field: "birthdate" }
        ]
    },
    {
        title: "Location",
        columns: [
            { field: "city" },
            { field: "country" }
        ]
    },
    {
        field: "phone"
    }
  ],
  editable: true,
  dataSource: [ { name: "Jane Doe", birthdate: new Date("1995/05/04"), city: "London", country: "UK", phone: "555-444-333" } ]
});
</script>

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.

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

Object|kendo.data.DataSource

The data source of the values for the foreign key columns. Can be a JavaScript object which represents a valid data source configuration or an existing kendo.data.DataSource instance.

Note: When the dataSource property is set one should also set the dataTextField and dataValueField.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    {
      field: "categoryId",
      title: "Category",
      dataSource: {
        transport: {
          read: {
            url: "https://demos.telerik.com/service/v2/core/categories"
          }
        }
      },
      dataTextField: "categoryName",
      dataValueField: "categoryId"
    }
  ],
  dataSource: [
    { name: "Tea", categoryId: 1 },
    { name: "Coffee", categoryId: 1 },
    { name: "Ham", categoryId: 2 }
  ]
});
</script>

columns.dataTextField

String

The data text field of the foreign key item.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    {
      field: "categoryId",
      title: "Category",
      dataSource: [
        { id: 1, name: "Beverages" },
        { id: 2, name: "Food" }
      ],
      dataTextField: "name",
      dataValueField: "id"
    }
  ],
  dataSource: [
    { name: "Tea", categoryId: 1 },
    { name: "Coffee", categoryId: 1 },
    { name: "Ham", categoryId: 2 }
  ]
});
</script>

columns.dataValueField

String

The data value field of the foreign key item.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    {
      field: "categoryId",
      title: "Category",
      dataSource: [
        { categoryId: 1, categoryName: "Beverages" },
        { categoryId: 2, categoryName: "Food" }
      ],
      dataTextField: "categoryName",
      dataValueField: "categoryId"
    }
  ],
  dataSource: [
    { name: "Tea", categoryId: 1 },
    { name: "Coffee", categoryId: 1 },
    { name: "Ham", categoryId: 2 }
  ]
});
</script>

columns.draggable

Boolean

If set to true a draghandle will be rendered and the user could reorder the rows by dragging the row via the drag handle. If the selectable option is enabled for rows only selected rows will can be dragged and reordered.

Note that the reordering operation is only a client-side operation and it does not reflect the order of any data that is bound to the server.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { draggable: true },
    { field: "name" }
  ],
  dataSource: [
    { id:1, name: "Jane Doe" },
    { id:2, name: "John Doe" }
  ]
});
</script>

columns.editable

Function

The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name",
       editable: function (dataItem) {
         return dataItem.name === "Jane"; // Name editor is created only if dataItem name is Jane
       }
      },
      {
        field: "salary",
        editable: function (dataItem) {
          return dataItem.name === "Jane"; // Salary editor is created only if dataItem name is Jane
        }
      }
    ],
    editable: true,
    dataSource: [ { name: "Jane", salary: 2000 }, { name: "Bill", salary: 2000 } ]
  });
</script>

columns.editor

String|Function

Provides a way to specify a custom editing UI for the column. Use the container parameter to create the editing UI.

The editing UI should contain an element whose name HTML attribute is set as the column field.

Validation settings defined in the model.fields configuration will not be applied automatically. In order the validation to work, the developer is responsible for attaching the corresponding validation attributes to the editor input the data-bind attribute is whitespace sensitive. In case the custom editor is a widget, the developer should customize the validation warning tooltip position in order to avoid visual issues.

When used as String, defines the editor widget type. For further info check the Form API: field

Parameters:containerjQuery

The jQuery object representing the container element.

optionsObject

options.fieldString

The name of the field to which the column is bound.

options.labelString

The column title.

options.modelkendo.data.Model

The model instance to which the current table row is bound.

options.editorOptionsObject

The object representing the editor options.

options.editorOptions.adaptiveModestring

Specifies the adaptive rendering of the editor component.

options.editorOptions.sizesize

The editor component size.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    editor: function(container, options) {
     // create an input element
     var input = $("<input/>");
     // set its name to the field to which the column is bound ('name' in this case)
     input.attr("name", options.field);
     // append it to the container
     input.appendTo(container);
     // initialize a Kendo UI AutoComplete
     input.kendoAutoComplete({
       dataTextField: "name",
       dataSource: [
         { name: "Jane Doe" },
         { name: "John Doe" }
       ]
     });
    }
  } ],
  editable: true,
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "num",
    editor: function(container, options) {
     //create input element and add the validation attribute
     var input = $('<input name="' + options.field + '" required="required" />');
     //append the editor
     input.appendTo(container);
     //enhance the input into NumericTextBox
     input.kendoNumericTextBox();

     //create tooltipElement element, NOTE: data-for attribute should match editor's name attribute
     var tooltipElement = $('<span class="k-invalid-msg" data-for="' + options.field + '"></span>');
     //append the tooltip element
     tooltipElement.appendTo(container);
   }
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          num: { type: "number", validation: { required: true } }
        }
      }
    }
  }
});
</script>

Check Editing custom editor for a live demo.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "num",
    editor: "NumericTextBox"
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          num: { type: "number", validation: { required: true } }
        }
      }
    }
  }
});
</script>

columns.editorOptions

Object

Defines the widget configuration when one is initialized as editor for the column (or the widget defined in items.editor). For further info check the Form API: field.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "num",
    editor: "NumericTextBox",
    editorOptions: { step: 2 }
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          num: { type: "number", validation: { required: true } }
        }
      }
    }
  }
});
</script>

columns.encoded

Boolean

If set to true the column value will be HTML-encoded before it is displayed. If set to false the column value will be displayed as is. By default the column value is HTML-encoded.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", encoded: false }
  ],
  dataSource: [ { name: "<strong>Jane Doe</strong>" } ]
});
</script>

columns.exportable

Boolean|Object

If the column isn't visible, the exportable property must be set to true explicitly.

If set to false the column will be excluded from the exported Excel/PDF files.

Can be set to a JavaScript object which specifies whether the column should be exported per format.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["excel", "pdf"],
  columns: [
    { field: "productName", title: "Product" },
    { field: "unitPrice", title: "Price" },
    { field: "internalCode", title: "Code", exportable: false }
  ],
  dataSource: [
    { productName: "Tea", unitPrice: 2.5, internalCode: "TEA001" },
    { productName: "Coffee", unitPrice: 3.0, internalCode: "COF001" }
  ]
});
</script>

columns.field

String

The field to which the column is bound. The value of this field is displayed in the column's cells during data binding. Only columns that are bound to a field can be sortable or filterable. The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    // create a column bound to the "name" field
    { field: "name" },
    // create a column bound to the "age" field
    { field: "age" }
  ],
  dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>

columns.filterable

Boolean|Object

If set to true a filter menu will be displayed for this column when filtering is enabled. If set to false the filter menu will not be displayed. By default a filter menu is displayed for all columns when filtering is enabled via the filterable option.

Can be set to a JavaScript object which represents the filter menu configuration.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", filterable: false },
    { field: "age" }
  ],
  filterable: true,
  dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>

columns.footerAttributes

Object

HTML attributes of the column footer. The footerAttributes option can be used to set the HTML attributes of that cell.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<div id="grid"></div>
<script>
    let encode = kendo.htmlEncode;
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age",
          footerTemplate: ({ age }) => `Min: ${encode(age.min)} Max: ${encode(age.max)}`,
          footerAttributes: {
              "class": "table-footer-cell k-text-right",
              style: "font-size: 14px"
          }
        }
      ],
      dataSource: {
        data: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
        ],
        aggregate: [
            { field: "age", aggregate: "min" },
            { field: "age", aggregate: "max" }
        ]
      }
    });
</script>

The table footer cell will look like this: <td class="table-footer-cell" style="text-align: right; font-size: 14px">Min: 30 Max: 33</td>.

columns.footerTemplate

String|Function

The template which renders the footer table cell for the column.

The fields which can be used in the template are:

average - the value of the "average" aggregate (if specified)
count - the value of the "count" aggregate (if specified)
max - the value of the "max" aggregate (if specified)
min - the value of the "min" aggregate (if specified)
sum - the value of the "sum" aggregate (if specified)
data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average

If the grid is bound using source binding, it will initially be assigned with an empty dataSource without any aggregates. In order to avoid a JavaScript error for an undefined aggregate when the footer is rendered with the empty dataSource, you should check if the field is defined in the template data before accessing the value. If no groups are specified for the actual dataSource, then you will also need to use the field name to access the aggregate value.

<div id="grid"></div>
<script>
let encode = kendo.htmlEncode;
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      footerTemplate: ({ age }) => `Min: ${encode(age.min)} Max: ${encode(age.max)}`,
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ],
    aggregate: [
        { field: "age", aggregate: "min" },
        { field: "age", aggregate: "max" }
    ]
  }
});
</script>

<div data-role="grid" data-bind="source:dataSource"
     data-columns='["category", "name", {"field": "price", "footerTemplate": ({price}) => `Total: ${kendo.htmlEncode(price ? price.sum : 0)}`}]'></div>
<script>
  $(function() {
    var viewModel = kendo.observable({
      dataSource: new kendo.data.DataSource({
        data: [
          { category: "Beverages", name: "Chai", price: 18 },
          { category: "Beverages", name: "Chang", price: 19 },
          { category: "Seafood", name: "Konbu", price: 6 }
        ],
        group: [{field: "category"}],
        aggregate: [
          { field: "price", aggregate: "sum" }
        ]
      })
    });
    kendo.bind($("body"), viewModel);
  });
</script>

<div data-role="grid" data-bind="source:dataSource"
     data-columns='["category", "name", {"field": "price", "footerTemplate": ({price}) => `Total: ${kendo.htmlEncode(price ? price.sum : 0)}`}]'></div>
<script>
  $(function() {
    var viewModel = kendo.observable({
      dataSource: new kendo.data.DataSource({
        data: [
          { category: "Beverages", name: "Chai", price: 18 },
          { category: "Beverages", name: "Chang", price: 19 },
          { category: "Seafood", name: "Konbu", price: 6 }
        ],
        aggregate: [
          { field: "price", aggregate: "sum" }
        ]
      })
    });
    kendo.bind($("body"), viewModel);
  });
</script>

columns.format

String

The format that is applied to the value before it is displayed.

Takes the form "{0:format}" where "format" can be a:

The kendo.format function is used to format the value.

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [ {
      field: "product",
    }, {
      field: "number",
      format: "{0:c}"
    } ],
    dataSource: [ { product: "Chai", number: 3.1415 } ]
  });
</script>

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [ {
      field: "product",
    }, {
      field: "number",
      format: "{0:0.0000}"
    } ],
    dataSource: [ { product: "Chai", number: 94 } ]
  });
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "date",
    format: "{0:g}"
  }, {
    field: "product"
  } ],
  dataSource: [ { date: new Date(), product: "Chai" } ]
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "date",
    format: "{0: yyyy-MM-dd HH:mm:ss}"
  }, {
    field: "product"
  } ],
  dataSource: [ { date: new Date(), product: "Chai" } ]
});
</script>

columns.groupFooterTemplate

String|Function

The template which renders the group footer for the corresponding column. By default the group footer is not displayed. The group footer will always appear as long as at least one column has a defined groupFooterTemplate.

The fields which can be used in the template are:

average - the value of the "average" aggregate (if specified)
count - the value of the "count" aggregate (if specified)
max - the value of the "max" aggregate (if specified)
min - the value of the "min" aggregate (if specified)
sum - the value of the "sum" aggregate (if specified)
data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average
group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups)

Important

If the template is declared as a function the group field is accessible only through the data field, e.g. data.fieldName1.group.value.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupFooterTemplate: ({ age }) => `Total: ${age.count}`
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupFooterTemplate: function(e) {
          return "Total: " + e.age.count;
      }
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

columns.groupHeaderColumnTemplate

String|Function

Introduced in the Kendo UI 2018 R3 release.

The template which renders the content for specific column in the group header when the grid is grouped by the column field.

Note: The columns.groupHeaderTemplate has a higher priority than columns.groupHeaderColumnTemplate. If columns.groupHeaderTemplate is defined for the current group column it will take precedence over the columns.groupHeaderColumnTemplate setting of the currently first visible column. See Group Templates for more details on how this can be useful.

The fields which can be used in the template are:

average - the value of the "average" aggregate (if specified)
count - the value of the "count" aggregate (if specified)
max - the value of the "max" aggregate (if specified)
min - the value of the "min" aggregate (if specified)
sum - the value of the "sum" aggregate (if specified)
data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average
group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups)

Important

If the template is declared as a function the group field is accessible only through the data field, e.g. data.fieldName1.group.value.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupHeaderColumnTemplate: ({ age }) => `Total: ${age.count}`
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupHeaderColumnTemplate: function(e) {
          return "Total: " + e.age.count;
      }
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

columns.groupHeaderTemplate

String|Function

The template which renders the group header when the grid is grouped by the column field. By default the name of the field and the current group value is displayed.

The fields which can be used in the template are:

value - the current group value
field - the current group field
average - the value of the "average" aggregate (if specified)
count - the value of the "count" aggregate (if specified)
max - the value of the "max" aggregate (if specified)
min - the value of the "min" aggregate (if specified)
sum - the value of the "sum" aggregate (if specified)
aggregates - provides access to all available aggregates, e.g. aggregates.fieldName1.sum or aggregates.fieldName2.average
items - the data items for current group. Returns groups if the data items are grouped (in case there are child groups)

Important

To use aggregates from other fields in the column.groupHeaderTemplate add them to the other columns.aggregates.

<div id="grid"></div>
<script>
 var grid = $("#grid").kendoGrid({
    groupable: true,
    columns: [
        { field: "name" },
        {
            field: "age",
            groupHeaderTemplate: ({ age, aggregates }) => `Age:${age.group.value} total: ${age.count} Max Year: ${aggregates.year.max}`,
            aggregates: ["count"]
        },
        { field: "year", aggregates: ["max"] }
    ],
    dataSource: {
        data: [
            { name: "Jane Doe", age: 30, year: 1978 },
            { name: "John Doe", age: 30, year: 1980 }
        ],
        group: {
            field: "age", aggregates: [{ field: "age", aggregate: "count" },
            { field: "age", aggregate: "max" }, { field: "year", aggregate: "max" }]
        }
    }
}).data("kendoGrid");
</script>

<div id="grid"></div>
<script>
var filterAdmins = function(item) {
  return item.role === "admin";
};
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupHeaderTemplate: ({ items }) => `Admin count: ${items.filter(filterAdmins).length}`
    },
    {field: "role" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30, role: "admin" },
      { name: "John Doe", age: 30, role: "guest" },
      { name: "Peter", age: 30, role: "admin" }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

<div id="grid"></div>
<script>
  var grid = $("#grid").kendoGrid({
    groupable: true,
    columns: [
      { field: "name" },
      {
        field: "age",
        groupHeaderTemplate: groupHeaderTemp,
        aggregates: ["count"]
      },
      { field: "year", aggregates: ["max"] }
    ],
    dataSource: {
      data: [
        { name: "Jane Doe", age: 30, year: 1978 },
        { name: "John Doe", age: 30, year: 1980 }
      ],
      group: {
        field: "age", aggregates: [
          { field: "age", aggregate: "count" },
          { field: "age", aggregate: "max" },
          { field: "year", aggregate: "max" }
        ]
      }
    }
  }).data("kendoGrid");

  function groupHeaderTemp(data) {
    return `Age: ${data.value} total: ${data.count} Max Year: ${data.aggregates.year.max}`;
  }
</script>

columns.groupable

Boolean|Object

If set to false the user will not be able to group the grid by this column (requires Grid groupable property to be enabled). By default all columns are groupable.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  groupable: true,
  columns: [
    { field: "name", groupable: false },
    { field: "age"}
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ]
  }
});
</script>

columns.headerAttributes

Object

HTML attributes of the column header. The grid renders a table header cell (<th>) for every column. The headerAttributes option can be used to set the HTML attributes of that th.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [{
    field: "name",
    headerAttributes: {
      "class": "table-header-cell !k-justify-content-right",
      style: "font-size: 14px"
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

columns.headerTemplate

String|Function

The template which renders the column header content. By default the value of the title column option is displayed in the column header cell.

If sorting is enabled, the column header content will be wrapped in a <span> element.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    headerTemplate: '<input type="checkbox" id="check-all" /><label for="check-all">Check All</label>'
  }],
  selectable: "multiple",
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

$("#check-all").change(function(e){
  var grid = $("#grid").data("kendoGrid");
  var selected = grid.select();

  if(selected.length > 0) {
    grid.clearSelection();
  } else {
    grid.select("tr:eq(0), tr:eq(1)");
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    headerTemplate: kendo.template('# if (true) { # <input type="checkbox" id="check-all" /><label for="check-all">Check All</label> # } else { # this will never be displayed # } #')
  }],
  selectable: "multiple",
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

$("#check-all").change(function(e){
  var grid = $("#grid").data("kendoGrid");
  var selected = grid.select();

  if(selected.length > 0) {
    grid.clearSelection();
  } else {
    grid.select("tr:eq(0), tr:eq(1)");
  }
});
</script>

columns.hidden

Boolean

If set to true the column will not be displayed in the grid. By default all columns are displayed.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { hidden: true, field: "id" },
    { field: "name" }
  ],
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

columns.hideOnGroup

Boolean

If set to true the column will be hidden when the grid is groupd via user iteraction. The column will be displayed again if iteraction to ungroup by it is performed.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", hideOnGroup: true },
    { field: "name" }
  ],
  groupable: true,
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

columns.lockable

Boolean

If set to false the column will remain in the side of the grid into which its own locked configuration placed it.

This option is meaningful when the grid has columns which are configured with a locked value. Setting it explicitly to false will

prevent the user from locking or unlocking this column using the user interface.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { locked: true, field: "id", lockable: false, width:250 },
    { locked: true, field: "age", width:250 },
    { field: "name", width:250 },
    { field: "city", lockable: false, width:250 }
  ],
  dataSource: [
      { id: 1, name: "Jane Doe", age: 31, city: "Boston" },
      { id: 2, name: "John Doe", age: 55, city: "New York" }
  ]
});
</script>

columns.locked

Boolean

If set to true the column will be displayed as locked (frozen) in the grid. Also see Locked Columns help section for additional information.

Important: Row template and detail features are not supported in combination with column locking. If multi-column headers are used, it is possible to lock (freeze) a column at the topmost level only.

Default: false

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
      columns: [
        { locked: true, field: "id", width:200 },
        { field: "name", width: 250 },
        { field: "age", width: 200},
        { field: "city", width: 300}
      ],
      dataSource: [ { id: 1, name: "Jane Doe", age: 32, city: "NYC" }, { id: 2, name: "John Doe", age: 28, city: "London" } ],
      width: 600,
      height: 130
    });
</script>

columns.media

String

Sets the condition that needs to be satisfied for a column to remain visible. The property accepts valid strings for the matchMedia browser API (assuming it is supported by the browser) and toggles the visibility of the columns based on the media queries.

The hidden option takes precedence over media. This option cannot be used with minScreenWidth at the same time.

Also accepts the device identifiers that are available in Bootstrap 4:

xs is equivalent to "(max-width: 576px)"
sm is equivalent to "(min-width: 576px)"
md is equivalent to "(min-width: 768px)"
lg is equivalent to "(min-width: 992px)"
xl is equivalent to "(min-width: 1200px)"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
      { field: "id", width: 250, media: "(min-width: 576px)" }, // column will become hidden if the media query is evaluated to false
      { field: "age", width: 250, media: "sm" }, // use a Bootstrap media (equivalent to `"(min-width: 576px)"`)
      { field: "city", width: 250, media: "(max-width: 576px) and (min-width: 300px)" }, // column will be visible when the width of the screen is less than 576px and more than 300px
      { field: "name", width: 250 } // column will always be visible
  ],
  dataSource: [
      { id: 1, name: "Jane Doe", age: 31, city: "Boston" },
      { id: 2, name: "John Doe", age: 55, city: "New York" }
  ]
});
</script>

columns.menu

Boolean

If set to true the column will be visible in the grid column menu. By default the column menu includes all data-bound columns (ones that have their field set).

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", menu: false },
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});
</script>

columns.minResizableWidth

Number

The pixel screen width below which the user will not be able to resize the column via the UI.

This option is meaningful when the grid is set as resizable.

 <div id="grid"></div>
 <script>
 $("#grid").kendoGrid({
   resizable: true,
   columns: [
     { field: "name", minResizableWidth: 80 },
     { field: "age" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ]
 });
 </script>

columns.minScreenWidth

Number

The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting, so the two should not be used at the same time.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 250, minScreenWidth: 500 }, //column will become hidden if screen size is less than 500px
    { field: "name", width: 250 }, //column will always be visible
    { field: "age", width: 250, minScreenWidth: 750 } //column will become hidden if screen size is less than 750px
  ],
  dataSource: [
      { id: 1, name: "Jane Doe", age: 31, city: "Boston" },
      { id: 2, name: "John Doe", age: 55, city: "New York" }
  ]
});
</script>

columns.pinnable

Boolean

If set to true a pin/unpin icon button will be rendered in the column cells, allowing users to pin or unpin individual rows by clicking it. Clicking the icon opens a menu with options to pin the row to the top, pin to the bottom, or unpin it.

Important: The pinnable option on the Grid must also be set to enable row pinning.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { pinnable: true, width: 40 },
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 },
      { id: 3, name: "Jim Doe", age: 25 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  pinnable: true
});
</script>

columns.resizable

Boolean

If set to false the column will become non-resizable, while all the other columns remaining resizable in the grid component. In order for this property to work, grid's resizable property must be set to true

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  resizable: true,
  columns: [
    { field: "id", width: 250, resizable: false }, //column will not be resizable anymore
    { field: "name", width: 250 },
    { field: "age", width: 250 }
  ],
  dataSource: [
      { id: 1, name: "Jane Doe", age: 31, city: "Boston" },
      { id: 2, name: "John Doe", age: 55, city: "New York" }
  ]
});
</script>

columns.selectable

Boolean

If set to true the grid will render a select column with checkboxes in each cell, thus enabling multi-row selection. The header checkbox allows users to select/deselect all the rows on the current page. The change event is fired when a row is selected.

Setting the columns.selectable to true overrides the selectable.mode configuration property if it is set to "single".

More about the Grid Selection feature you can find in this documentation article.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { selectable: true },
    { field: "name" }
  ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

columns.sortable

Boolean|Object

If set to true the user can click the column header and sort the grid by the column field when sorting is enabled. If set to false sorting will be disabled for this column. By default all columns are sortable if sorting is enabled via the sortable option.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { sortable: false, field: "id" },
    { field: "name" }
  ],
  sortable: true,
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

columns.stickable

Boolean

If set to true the user will be able to stick or unstick the column from the column menu.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 800 },
    { field: "name", width: 400, sticky: true, stickable: true },
    { field: "age", width: 800 }
  ],
  columnMenu: true,
  dataSource: [ { id: 1, name: "Jane Doe", age: 30 }, { id: 2, name: "John Doe", age: 33 } ]
});
</script>

columns.sticky

Boolean

If set to true the column will be displayed as sticky in the grid. Also see Sticky Columns help section for additional information.

Important: Row template and detail features are not supported in combination with sticky columns. If multi-column headers are used, it is possible to stick a column at the topmost level only.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 800 },
    { field: "name", width: 400, sticky: true },
    { field: "age", width: 800 }
  ],
  dataSource: [ { id: 1, name: "Jane Doe", age: 30 }, { id: 2, name: "John Doe", age: 33 } ]
});
</script>

columns.template

String|Function

The template which renders the column content. The grid renders table rows (<tr>) which represent the data source items. Each table row consists of table cells (<td>) which represent the grid columns. By default the HTML-encoded value of the field is displayed in the column.

Use the template to customize the way the column displays its value.

For additional and more complex examples that utilize column templates, visit the Knowledge Base documentation, and use the following search terms:

column template
grid column template
Column Template | Kendo UI Grid

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: ({ name }) => `<strong>${kendo.htmlEncode(name)}</strong>` //name is the field name
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: function(dataItem) {
      return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

columns.title

String

The text that is displayed in the column header cell. If not set the field is used.

Note: Column titles should not contain HTML entities or tags. If such exist, they should be encoded.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ { field: "name", title: "Name" } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

columns.values

Array

An array of values that will be displayed instead of the bound value. Each item in the array must have a text and value fields.

Use the values option to display user-friendly text instead of database values.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
      { text: "Beverages", value: 1 },
      { text: "Food", value: 2 }
    ] }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ]
});
</script>

This example displays "Beverages" and "Food" in the "category" column instead of "1" and "2".

<div id="example">
  <div data-role="grid"
       data-columns="[
                     { 'field': 'productName' },

                     { 'field': 'category', 'values': [

                     { 'text': 'Beverages', 'value': 1 },

                     { 'text': 'Food', 'value': 2 }

                     ]}

                     ]"
       data-bind="source: products" ></div>

  <script>
    var viewModel = kendo.observable({
      products: [
        { productName: "Tea", category: 1 },
        { productName: "Ham", category: 2 }
      ]
    });
    kendo.bind($("#example"), viewModel);
  </script>
</div>

Check ForeignKey column for a live demo.

columns.width

String|Number

The width of the column. Numeric values are treated as pixels. The width option supports the fundamental measuring units. For instance:

px sets the width in pixels
cm sets the width in centimeters
mm sets the width in millimeters
% sets the width relative to the grid's element width
em sets the width relative to the font-size of the grid's element width
rem sets the width relative to font-size of the root element

For more important information, please refer to Column Widths.

Grid options, including column widths, can be set programmatically after Grid initialization with the setOptions method.

 <div id="grid"></div>
 <script>
 $("#grid").kendoGrid({
   columns: [
     { field: "name", width: "200px" },
     { field: "age" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ]
 });
 </script>

 <div id="grid"></div>
 <script>
 $("#grid").kendoGrid({
   columns: [
     { field: "name", width: 200 },
     { field: "age" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ]
 });
 </script>

Related Members