Paging using JSON response

[agv]

I have the grid below. It all runs and displays 5 rows.

<script>
$(function() {
    $("#grid").kendoGrid({
    dataSource: {
        type: "json",
        serverPaging: true,
        serverSorting: true,
        pageSize: 5,
        transport:     { read: { url: "ajax.php", dataType: "json" } },
        schema:     { data: "data" },
    },
    height: 250,

  pageable: true,

    scrollable: { virtual: true },
    selectable: "multiple row",
    columns:[{field: "post_code",title: "Post Code"},{field: "address_street",title: "Address"},{field: "driver",title: "Driver Name"}]
    });
});
</script>

The json response is as below. I validated and seem to be sound.

{
    "pageSize": 100,
    "data": [
        {
            "account": "Account 1",
            "address_street": "Address Line 1",
            "post_code": "Post Code 1",
            "driver": "Driver 1"
        },
        {
            "account": "Acount 2",
            "address_street": "Address Line 2",
            "post_code": "Post Code2",
            "driver": "Driver 2"
        },
        plus 98 other.............
    ]
}

and the GET request is as below.
ajax.php?take=5&skip=0&page=1&pageSize=5.

The problem I am having problems in getting this up and running. If someone could answer the question below it would be greatly appreciated.

Question 1 - Why won't my paginate buttons show? All my CSS and JS files are linked and downloaded examples work perfectly, but still can't paginate or scroll.
Question 2 - You can see I have transport and scheme in my dataSource. If this the proper method?
Question 3 - Is my JSON response formatted correctly? Are their any further parameters which would be required to make pagination work correctly?

If some could get back to me, it would be a massive help.

Thanks in advance,
Abdul.

[Rosen]

Hi Agv,

In order paging to work when bound to remote data, schema should specify the total records count field.

$("#grid").kendoGrid({
    dataSource: {
        type: "json",
        serverPaging: true,
        serverSorting: true,
        pageSize: 5,
        transport:  { read: { url: "ajax.php", dataType: "json" } },
        schema:     { data: "data", total: "pageSize" },
    },
//...

When serverPaging options is enabled  the server is responsible to return only the data for the current page, therefore you should ensure that your server logic is handling this. If you want to use the dataSource client sort and paging functionality, both serverPaging and serverSorting should be set to false. In this case the server should return all of the data.

Also please note that having both virtual scrolling and paging functionality enabled  is not supported.Regards,
Rosen
the Telerik team

[Vin]

I was testing the grid with JSON. Below is my configuration of the grid.

{
dataSource:
{
    type: "json",
    serverPaging: false,
    serverSorting: false,
    pageSize: 5,
    transport: { read: { url: "Home/IndexJson", dataType: "json" } },
    schema: { data: "Result", total: "PageSize" }
},
height: 250,
pageable: true,
sortable:
{mode: "single", allowUnsort: false},
columns:
[    { title: "Order ID", field: "OrderId" },    { title: "Order Date", field: "OrderDate" },    { title: "Ship Name", field: "ShipName" }
]
}

On the initial load the grid displays as expected 5 rows displayed with scroller and pager. But when I go to page 2 the pager at the bottom disappears.

Please help me.

Thanks,
Vinod

 

 

 

[Kevin]

I encountered the same problem with Vin. Pager control disappear after click page #2. Is there any solution to solve this problem ?

[Rosen]

Hi Kevin,

As the server paging option is not enabled could you verify that server is returning the entire data and not just single page?

All the best,
Rosen
the Telerik team

[Vin]

Rosen & Kevin,

The server is returning all the rows in json format. The datastructure returned is something like this

{
    PageSize:950
    Result:{row1, row2......row950}

}

If we do not supply the PageSize:950 the pager does not appear even on the first page.

Please help.
Vin

[Vin]

Rosen,
any updates on the pager disappearing on page 2?

[Rosen]

Hi Vin,

We were able to locate an issue which may result in similar to the described behavior. Thus could you check if there are any javascript errors when paging?
If this is the case you may try to modify the schema similar to the following and see if this resolve the issue you are facing:

{
    dataSource: {
        type: "json",
        serverPaging: false,
        serverSorting: false,
        pageSize: 5,
        transport: {
            read: {
                url: "Home/IndexJson",
                dataType: "json"
            }
        },
        schema: {
            data: function(result) {
                  return result.Result || result;
            },
            total: function(result) {
                  return result.PageSize || result.length || 0;
            }
        }
    },
   //..
}

Greetings,
Rosen
the Telerik team

[Vin]

Thank you,

Adding

schema: {

            data: function(result) {

                  return result.Result || result;

            },

            total: function(result) {

                  return result.PageSize || result.length || 0;

            }

        }

Fixed the issue with paging

[Mangesh]

Hi,

Even using following code, paging is not displaying :
schema: {

            data: function(result) {

                  return result.Result || result;

            },

            total: function(result) {

                  return result.PageSize || result.length || 0;

            }

        }

I checked for error in console, I've got following error:
"this.data.slice is not a function" in "kendo.all.min.js" file.

Here's my code:

var dataSource = new kendo.data.DataSource({
                    type: "json",
                    schema: {
                        data: function (result) {
                            return result.Result || result;
                        },
                        total: function (result) {
                            return result.PageSize || result.length || 0;
                        }
                    },
                    transport: {
                        read: {
                            type: "POST",
                            url: "http://localhost:17113/docmatrix/GetDocumentType.asmx/GetInvoiceDocs",
                            contentType: 'application/json; charset=utf-8',
                            datatype: "json"
                        },
                        parameterMap: function (options) {
                            return JSON.stringify(options);
                        }
                    },
                    pageSize: 10
                });

                $("#Invoicegrid").kendoGrid({
                    dataSource: dataSource,
                    columns: [
                    {
                        field: "ID",
                        title: "ID"
                    }],
                    groupable: true,
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    height: 600,
                    selectable: true
                });

Regards,

[Maxim]

Fix from Dec 13, 2011 works. You might need to replace "Result" and "PageSize" with whatever your server returns, which in my case was "data" and "total"