kendo datasource pagination

Question

I am using sorting and paging in my MVC project with datatables. So paging and sorting is working.

Now the problem is-

I have shown pagesize:5 for datatable. It shows 5 rows per page but doesn't show pagenumbers. How do i show pagination with kendo datasource to show next 5 data rows with next pagenumber.

Take a look at my code-

 var template = kendo.template($("#template").html());

    // To Do Item Data
    // ---------------



    // Build the data source for the items
    var dataSource = new kendo.data.DataSource(
    { transport: {
        read: "/Task/Read"
    }, schema: {
        data: "Data"
    },
    serverGrouping: true,
    sort: { field: "TaskID", dir: "asc" },
    serverPaging: true,
    pageSize: 5 
});

    // When the data source changes, render the items
    dataSource.bind("change", function (e) {
        //alert('Bind');
        var html = kendo.render(template, this.view());
        $("#todos tbody").html(html);
    });

    // Initial read of the items in to the data source

    dataSource.read();




</script>

HTML CODE-

  <tr>
      <td> 
          <input type="checkbox" class="done" data-id="#= TaskID #" ></input>
      </td>
      <td>
          #= TaskID #
      </td>
      <td>
        #= Subject #
      </td>
      <td>
      #=AssignedTo#
      </td>
  </tr>
</script>
<div class="row-fluid">
<div class="span4"> <table id="todos" class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Done</th>
          <th>ID</th>
          <th>Task</th>
          <th>Assign To</th>
        </tr>
      </thead>
      <tbody>

      </tbody>

    </table></div>
</div>

Please tell me how do i show page number for showing rest rows. I have migrated from kendo UI Grid to kendo datasource and styling it with bootstrap.

Gurmeet Gurmeet · Accepted Answer · 2013-03-30T05:12:11

Try this:Add " ** pageable: true ** " to your kendo grid configuration outside the datasource like:

$("#grid").kendoGrid({
  scrollable: true,
  sortable: true,
 ** pageable: true,**

kendo datasource pagination

2 Answers