Kendo UI - Grid pagination (server side)

Question

I'm trying to use Kendo-UI grid with pagination. everything seems to work expect for the Total attribute, although I set it to 100 it shows 1 - 10 of 10 items which the page size i'm setting. Anyone had better success with this? I searched Kendo docs and forums with no success.

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
    foreach (System.Data.DataColumn column in Model.Columns)
    {
        columns.Bound(column.ColumnName);
    }
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(10)
    .Total(100)
    .Model(model =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                model.Field(column.ColumnName, column.DataType);
            }                
        })
    .Read(read => read.Action("Read", "Controls"))
)

)

Thanks

Answer 1

Right, you need to pass the Total field in your response.

Your view can be like:

@(Html.Kendo().Grid<YourViewModel>()
      .Name("grid")
      .DataSource(dataSource => dataSource          
          .Ajax()
          .PageSize(20)
          .ServerOperation(true)
          .Read(read => read.Action("Data_Read", "YourController", new {Id=Model.CurrentId}))
       )
      .Columns(c =>
      {
          c.Bound(x => x.Name);
          c.Bound(x => x.CreatedTime);
      })
      .Pageable()
      .Sortable()
)

Your action code as below:

    public ActionResult Data_Read([DataSourceRequest]DataSourceRequest request, int Id)
        {
            int total = yourQuery.GetTotal(Id); 

            var returnViewModel = yourQuery.GetViewModels(Id, request.Page, request.PageSize);


            return Json(new
            {
                Data = returnViewModel,
                Total=total
            });
        }

View the request and response in Fiddler you will see how the magic happens: Request: sort=SessionId-asc&page=7&pageSize=20&group=&filter=

That is the DataSourceRequest format which the grid passes to the controller; it already contains the parameters needed for the paging.

View the response from the action and you will see there is a Data field containing all the records. The Total field is the total amount for all records which is required for the Kendo grid's paging.

Answer 2

If you use Kendo wrappers for ASP.NET MVC, consider adding:

.EnableCustomBinding(true)

As explained in this article, custom binding allows to bypass built-in paging/sorting facilities. In that way, Total will be taken into account.

Answer 3

According to the original example, The "Total" will be recognized automatically, And if you want to show 100 results per page set it in the "PageSize" Instead.

Answer 4

As explained in the documentation when serverPaging is enabled you need to specify total in your schema and you also need to return that total each time you return response from the server exactly at this place specified by the schema.

 dataSource: {
    serverPaging: true,
    schema: {
        data: "data",
        total: "total"
    },
  //...

Same is discussed here.

Check the following example.