Pagination on Kendo UI Grid is not working

Question

I'm displaying a grid with remote data, if I don't add pagination the full set of data is displayed, of course this is not desired.

The following is the code I'm using to display data on a grid:

var ds = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
            dataType: "json"
        }
    },
    schema: {
        data: "Response"
    },
    pageSize: 5
});
$("#usuariosGrid").kendoGrid({
    pageable: {
        refresh: true
    },
    columns: [
        { field: "UsuarioId", title: "ID", width: "100px" },
        { field: "Nombre", title: "Nombre", width: "100px" },
        { field: "ApellidoP", title: "Apellido Paterno", width: "100px" },
        { field: "ApellidoM", title: "Apellido Materno", width: "100px" },
        { command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" }
    ],
    dataSource: ds
});

This renders a grid with 5 items on it, but that's it, I can't navigate through the rest of the entries. The number of pages and items to display is marked as zero, disabling the navigation controls.

Am I missing something in my cofiguration? Thanks for any help you can provide.

score 6 · Accepted Answer · answered Feb 11 '13 at 22:52

6

When paging is done in the server (check serverpaging), you need to return the total number of records. See total for information.

answered Feb 11 '13 at 22:52

OnaBai

40,767
6
96
125

I changed my code to look like [this](http://pastebin.com/g9rzfidX), the number of pages is correct and the navigation buttons are working, but it is showing all of the entries in the same page all the time. Am I missing something else? – Uriel Arvizu Feb 12 '13 at 18:27
When doing `serverPaging` the server is responsible of pagination so it should only send `pageSize` records. Is your server returning only the number of records specified in `pageSize`? – OnaBai Feb 12 '13 at 23:22
I think I'm misinterpreted something, I thought that pageSize was referring to the amount of entries per page rendered in the grid. I thought that if the server returned 20 entries and the pageSize defined in the data source was 5, then I would render 4 pages with 5 entries each in the grid. But from what you're telling me, I'm guessing the pageSize is a parameter sent to the server to return 2 pages of entries? If that's the case, my server doesn't have an endpoint that receives such parameter. If my server returns _n_ entries, how can I render those entries in _m_ pages? – Uriel Arvizu Feb 13 '13 at 00:25
If you want to display groups of 5 entries per page BUT receiving all data from the server, then you should specify `serverPaging` to false. – OnaBai Feb 13 '13 at 00:30
1

ok, so I had to specify the pageSize, the total and set serverPaging to false. Now it works. Thanks. – Uriel Arvizu Feb 13 '13 at 18:10
Worked when i set dataSource to .ServerOperation(false); – Christopher Leach Aug 21 '13 at 13:01

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

I had the same issue because I misunderstood serverPaging. If you set serverPaging to true, you also have to modify what the server returns.

Previously, I had the server returning all of the data. To fix this, I used ToDataSourceResult to modify what my server returns.

See: How to implement Server side paging in Client side Kendo UI grid in asp.net mvc

edited May 23 '17 at 12:01

Community

1
1

answered Jul 16 '15 at 21:10

Elaine Lin

511
1
5
15

score 0 · Answer 3 · edited Jun 20 '19 at 19:03

0

spend a day on this minor issue, all you have to do is return the total number of records, if your service doesn't return the total number of records, do the following

schema: {
        data: "Response"
    },

total: function(response)
      {
        return response."your method name".length;
      }

edited Jun 20 '19 at 19:03

BUDDHIKA

306
2
8
23

answered Dec 09 '14 at 01:29

user4339579

1

Pagination on Kendo UI Grid is not working

3 Answers3