dataSource Object|kendo.data.DataSource

Instance of kendo DataSource. See the kendo.data.DataSource.

This option is mandatory because the Pager is tightly connected with DataSource. The pager is UI widget for managing paging over the DataSource. The Pager gets values like page size or total count of items from DataSource.

Example - standalone pager

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
        data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ],
        pageSize: 2
    });

    $("#pager").kendoPager({
        dataSource: dataSource,
        pageSizes: [10, 25, 50]
    });

    dataSource.read();
</script>
<style>
    #pager {

    }
</style>

If the Pager is used with another widget then we usually specify this Pager like object of options for given widget. In that case the DataSource is automatically injected to the Pager from the widget. See example for a Grid below.

Example - grid pager

<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
      columns: [
        { field: "productName" },
        { field: "category" }
      ],
      dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageable: {
        // we don't set any DataSource here
        pageSize: 2,
        buttonCount: 1
      }
    });
</script>