Kendo UI - pagination grid (server side)

Question

I am trying to use Kendo-UI pagination grid. everything seems to be working, expecting for the Total attribute, although I set it to 100, it shows 1 - 10 out of 10 elements the size of which I set. Has anyone had better success? I searched Kendo docs and forums without any 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

As explained in the documentation , when serverPaging is enabled , you need to specify the total quantity in your scheme, and you will also need to return this amount every time you return a response from the server exactly at that location indicated by the scheme.

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

The same is discussed here .

Check out the following example .

Answer 2

That's right, you need to pass the Total field in your answer.

Your view might look like this:

 @(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 is 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 }); } 

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

This is the DataSourceRequest format that the grid passes to the controller; it already contains the parameters needed for the paging call.

Review the response from the action and you will see that there is a data field containing all the records. The Total field is the total amount for all the records that are needed to pager the Kendo grid.

Answer 3

According to the original example, “General” will be automatically recognized. If you want to show 100 results per page, set it to "PageSize" instead.

Answer 4

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

 .EnableCustomBinding(true) 

As explained in the article, custom binding allows you to bypass the built-in search and sort tools. Thus, Total will be taken into account.