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>