columns Array
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.
Example - specify grid columns as array of strings
<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>
Example - specify grid columns as array of objects
<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>
Related Properties
- columns.aggregates
- columns.attributes
- columns.columnMenu
- columns.columns
- columns.command
- columns.command.className
- columns.command.click
- columns.command.iconClass
- columns.command.iconClass.cancel
- columns.command.iconClass.edit
- columns.command.iconClass.update
- columns.command.name
- columns.command.template
- columns.command.text
- columns.command.text.edit
- columns.command.text.cancel
- columns.command.text.update
- columns.command.visible
- columns.dataSource
- columns.dataTextField
- columns.dataValueField
- columns.draggable
- columns.editable
- columns.editor
- columns.editorOptions
- columns.encoded
- columns.exportable
- columns.exportable.excel
- columns.exportable.pdf
- columns.field
- columns.filterable
- columns.filterable.cell
- columns.filterable.cell.dataSource
- columns.filterable.cell.dataTextField
- columns.filterable.cell.delay
- columns.filterable.cell.inputWidth
- columns.filterable.cell.suggestionOperator
- columns.filterable.cell.minLength
- columns.filterable.cell.enabled
- columns.filterable.cell.operator
- columns.filterable.cell.showOperators
- columns.filterable.cell.template
- columns.filterable.extra
- columns.filterable.multi
- columns.filterable.dataSource
- columns.filterable.checkAll
- columns.filterable.itemTemplate
- columns.filterable.operators
- columns.filterable.search
- columns.filterable.ignoreCase
- columns.filterable.ui
- columns.footerAttributes
- columns.footerTemplate
- columns.format
- columns.groupable
- columns.groupable.sort
- columns.groupable.sort.compare
- columns.groupable.sort.dir
- columns.groupHeaderColumnTemplate
- columns.groupHeaderTemplate
- columns.groupFooterTemplate
- columns.headerAttributes
- columns.headerTemplate
- columns.hidden
- columns.hideOnGroup
- columns.locked
- columns.lockable
- columns.media
- columns.minResizableWidth
- columns.minScreenWidth
- columns.resizable
- columns.selectable
- columns.sortable
- columns.sortable.allowUnsort
- columns.sortable.compare
- columns.sortable.initialDirection
- columns.sticky
- columns.stickable
- columns.template
- columns.title
- columns.width
- columns.values
- columns.menu