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.

Solution 1

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

Solution 2

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

Comments

[Uriel Arvizu]

I changed my code to look like this, 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?

[OnaBai]

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?

[Uriel Arvizu]

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?

[OnaBai]

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.

[Uriel Arvizu]

ok, so I had to specify the pageSize, the total and set serverPaging to false. Now it works. Thanks.

[Christopher Leach]

Worked when i set dataSource to .ServerOperation(false);