Telerik Datasource Json Server Paging Not Working

Question

I'm working on a Hybrid app built with Json data. There's a small problem though. I can't figure out how to get the paging to work for the Datasource.

The json structure looks like this.

{
    "respond":1,
    "paging":{
        "stillmore":1,
        "perpage":10,
        "callpage":1,
        "next":2,
        "previous":0,
        "pages":6,
        "result":"52"
    },
    "message":"",
    "result":[
        {Main Data}
    ]
}

Here's my DataSource structure

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "JsonURL",
                    dataType: "json",
                    jsonp: "$callback",

                    cache: true

                },
                serverFiltering: true,
                filter: { logic: "paging", filters: [ { field: "name", operator: "startswith", value: "Jane" } ] },
                parameterMap: function (data, type) {
                     return kendo.stringify(data);
                    if (type == "read") {
                        // send take as "$top" and skip as "$skip"
                        return {
                            $callpage: data.page,
                            $perpage: data.pageSize
                        }
                    }
                }
            },

            schema: {
                data: "result", // twitter's response is { "results": [ /* results */ ] }
                total: "paging.result",
                },

            sort: {
                field: "ID",
                dir: "desc"
            },
            serverPaging: true,
            serverSorting: true,
            pageSize: 20
        });

It's not paging. I have about 100 results, and the server only displays 20 every page. When you want to load the next 20, nothing happens. It gets stuck on the loading gif.

I can't seem to figure it out. How can I enable server paging with this Json return?

Any tips would be welcome! Thanks!

Answer 1

You have mistake in your code in:

parameterMap: function (data, type) {
    // DELETE THIS LINE: return kendo.stringify(data);
    if (type == "read") {
        // send take as "$top" and skip as "$skip"
        return {
            callpage: data.page,
            perpage: data.pageSize
        }
    }
}

You return return kendo.stringify(data); immediately and you can't use your custom binding for page number.

Try to delete this line as I show you above