CODEWITHSUNDEEP
kendo-uikendo-grid
spooti
spooti

Reputation: 247

Kendo UI - Grid pagination (server side)

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

Upvotes: 10

Views: 51472

Answers (4)

Petur Subev
Petur Subev

Reputation: 20233

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.

Upvotes: 14

Jim Yu
Jim Yu

Reputation: 551

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.

Upvotes: 9

user870717
user870717

Reputation:

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.

Upvotes: 0

JBntis
JBntis

Reputation: 79

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.

Upvotes: 0

Related Questions