dataSource Object|Array|kendo.data.DataSource
The data source of the Grid holds the items that will be rendered inside the widget. An item can be a JavaScript object which represents a valid data source configuration, a JavaScript array, or an existing kendo.data.DataSource instance.
If the dataSource
option is set to a JavaScript object or array, the widget will initialize a new kendo.data.DataSource instance by using that value as a data source configuration.
If the dataSource
option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.
For live demos and more complex configurations, refer to the article on binding the Grid to local data and binding the Grid to remote data.
Example - set dataSource as a JavaScript object with data, page and pageSize properties
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
// The dataSource configuration is an object which contains some data and a couple of configurations.
dataSource: {
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 },
{ name: "Mike Doe", age: 31 },
{ name: "Tom Doe", age: 35 },
{ name: "Danny Doe", age: 37 }
],
pageSize: 2, // The number of items displayed per page
page: 2 // Page 2 will be opened by default when the Grid loads.
}
});
</script>
Example - set dataSource as a JavaScript array
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
// The dataSource configuration is a simple array with no additional configurations.
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
Example - set dataSource as an existing kendo.data.DataSource instance
<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// The remote endpoint from which the data is retrieved.
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
// The dataSource configuration is set to an existing DataSource instance.
dataSource: dataSource,
pageable: true
});
</script>