Indicates whether the grid will call read on the DataSource initially.

Example

$("#grid").kendoGrid({
     dataSource: sharedDataSource,
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     autoBind: false // the grid will not be populated with data until read() is called on the sharedDataSource
 });

A collection of column objects or collection of strings that represents the name of the fields.

Example

var sharedDataSource = new kendo.data.DataSource({
     data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
     pageSize: 1
});
$("#grid").kendoGrid({
    dataSource: sharedDataSource,
    columns: [ { title: "Action", command: "destroy" }, // creates a column with delete buttons
               { title: "Title", field: "title", width: 200, template: "<div id='title'>${ title }</div>" },
               { title: "Year", field: "year", filterable: false, sortable: true, format: "{0:dd/MMMM/yyyy}" } ];
});

command: String

Definition of command column. The supported built-in commands are: "create", "cancel", "save", "destroy".

editor: Function

Provides a way to specify custom editor for this column.

Example

$(".k-grid").kendoGrid({
     dataSource: {
         data: createRandomData(50)
     },
     editable: true,
     columns: [
         {
             field: "Name",
             editor: function(container, options) {
                 // create a KendoUI AutoComplete widget as column editor
                  $('<input name="' + options.field + '"/>')
                      .appendTo(container)
                      .kendoAutoComplete({
                          dataTextField: "ProductName",
                          dataSource: {
                              transport: {
                                //...
                              }
                          }
                      });
             }
         }
     ]
  });

container: Object

The container in which the editor must be added.

options: Object

Additional options.

field: String

The field for the editor.

model: Object

The model for the editor.

encoded: Boolean(default: true)

Specified whether the column content is escaped. Disable encoding if the data contains HTML markup.

field: String

The field from the datasource that will be displayed in the column.

filterable: Boolean(default: true)

Specifies whether given column is filterable.

format: String

The format that will be applied on the column cells.

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "BirthDate",
             title: "Birth Date",
             format: "{0:dd/MMMM/yyyy}"
        }
     ]
  });

sortable: Boolean(default: true)

Specifies whether given column is sortable.

template: String

The template for column's cells.

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ]
  });

title: String

The text that will be displayed in the column header.

width: String

The width of the column.

Instance of DataSource or Object with DataSource configuration.

Example

var sharedDataSource = new kendo.data.DataSource({
     data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
     pageSize: 1
});

$("#grid").kendoGrid({
     dataSource: sharedDataSource
 });

Example

$("#grid").kendoGrid({
     dataSource: {
         data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
         pageSize: 1
     }
 });

Template to be used for rendering the detail rows in the grid. See the Detail Template example.

Indicates whether editing is enabled/disabled.

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ]
     toolbar: [
         "create",
         { name: "save", text: "Save This Record" },
         { name: "cancel", template: "<img src="icons/cancel.png' rel='cancel' />" }
     ],
     editable: {
         update: true, // puts the row in edit mode when it is clicked
         destroy: false, // does not remove the row when it is deleted, but marks it for deletion
         confirmation: "Are you sure you want to remove this item?"
     }
 });

confirmation: Boolean | String

Defines the text that will be used in confirmation box when delete an item.

destroy: Boolean

Indicates whether item should be deleted when click on delete button.

mode: String

Indicates which of the available edit modes(incell(default)/inline/popup) will be used

template: String

Template which will be use during popup editing

update: Boolean

Indicates whether item should be switched to edit mode on click.

Indicates whether grouping is enabled/disabled.

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     groupable: true
 });

Indicates whether keyboard navigation is enabled/disabled.

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     navigatable: true
 });

Indicates whether paging is enabled/disabled.

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     pageable: true
 });

Template to be used for rendering the rows in the grid.

Example

//template
 <script id="rowTemplate" type="text/x-kendo-tmpl">
     <tr>
         <td>
             <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
         </td>
         <td>
             ${ Name }
         </td>
         <td>
             ${ AverageRating }
         </td>
     </tr>
 </script>

 //grid intialization
 <script>PO details informaiton
     $("#grid").kendoGrid({
         dataSource: dataSource,
         rowTemplate: kendo.template($("#rowTemplate").html()),
         height: 200
     });
 </script>

Enable/disable grid scrolling. Possible values:

true: Enables grid vertical scrolling
false: Disables grid vertical scrolling
{ virtual: false }: Enables grid vertical scrolling without data virtualization. Same as first option.
{ virtual: true }: Enables grid vertical scrolling with data virtualization.

Example

$("#grid").kendoGrid({
     scrollable: {
         virtual: true //false
     }
 });

Indicates whether selection is enabled/disabled. Possible values:

"row": Single row selection.
"cell": Single cell selection.
"multiple, row": Multiple row selection.
"multiple, cell": Multiple cell selection.

Defines whether grid columns are sortable.

Example

$("#grid").kendoGrid({
    sortable: true
});
//
// or
//
$("#grid").kendoGrid({
    sortable: {
        mode: "multiple", // enables multi-column sorting
        allowUnsort: true
});

allowUnsort: Boolean(default: false)

Defines whether column can have unsorted state.

mode: String(default: "single")

Defines sorting mode. Possible values:

"single": Defines that only once column can be sorted at a time.
"multiple": Defines that multiple columns can be sorted at a time.

This is a list of commands for which the corresponding buttons will be rendered. The supported built-in commands are: "create", "cancel", "save", "destroy".

Example

$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ]
     toolbar: [
         "create",
         { name: "save", text: "Save This Record" },
         { name: "cancel", template: '<img src="icons/cancel.png' rel='cancel' />" }
     ],
     editable: true
  });

name: String

The name of the command. One of the predefined or a custom.

template: String

The template for the command button.

text: String

The text of the command that will be set on the button.