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

Solution 1

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.

Solution 2

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.

Comments

[JBntis]

What will happen if you remove the ".Total" attribute?

[LCJ]

Can you please post the solution if you have resolved it using ASP.Net MVC Wrapper?

[spooti]

I want to show 10 items per page, and lets say I have 100 items in total

[JBntis]

From original example, There is no "Total" stated, Try removing it and you will get: 1 - 10 of 100 items

[spooti]

that will work if I will return all 100 items, which I don't want to. I want server side pagination not client side.

[spooti]

Thanks, as you can see from my code I'm using the Kendo Wrapper, since my model is DataTable. I would prefer to keep using that. I couldn't find an example that works with a MVC wrapper.

[Petur Subev]

How does your controller action look like - read.Action("Read", "Controls")) ?

[spooti]

It's not exactly what I was looking for, but I made some changes to my code and got it to work with this approach, Thanks

[spooti]

Thanks Andrei I'll check it out

[Glory Raj]

@PeturSubev i been stuck in same problem like paging and sorting ... here we are using SP to get the results from DB and we have implemented paging and sorting inside SP itself now I need to pass page number and page size and sorting column name to SP using kendo UI grid MVC wrapper , how can i send the page size and page number to the SP...