KendoUI Grid Server Binding Example

[Bryan]

I have successfully set up several KendoUI Grids, but I cannot get one using server-side paging to work. I modified my rest service so I will return a total value (hard coded right now).

Below please find the JSON that is put out and the javascript. Any help would be greatly appreciated.

$(document).ready(function(){

        // Setup Rest Service
        var loc = ( location.href );
        var url = loc.substring( 0, loc.lastIndexOf( "/" ) ) + "/xpRest.xsp/test/";


        dataSource = new kendo.data.DataSource({
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,            transport : {
                read : {
                    url : url + "READ",
                    dataType : "json"
                },
                type : "READ"
            },
            schema : {
                    total: "total",
                    model : {
                    id : "unid",
                    fields   : {
                        unid : {
                            type : "string",
                            nullable : false
                        },
                            tckNbr : {
                            type : "string",
                            editable : false
                        },
                            tckSts : {
                            type : "string",
                            editable : false
                        }
                }
            }
        }
        });

            grid = $("#grid-databound-dataItem").kendoGrid({
            dataSource : dataSource,
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns : [
                       {field : "tckNbr", title : "Number", type: "string"},
                       {field : "tckSts", title : "Status", type: "string"}
                       ]
            }).data("kendoGrid");
        });

 

[
  {
      "total":100,
        "data":
        [
          {
              "tckNbr":"3031",
              "tckSts":"1 Not Assigned",
              "unid":"0014DA9095BF6D638625810700597A36",
              "tckReqs":"Bryan S Schmiedeler",
              "tckNts":
              [
                "Bryan DeBaun"
              ],
              "tckBUs":
              [
                "NAP\/IFI"
              ],
              "tckApps":"GTM",
              "tckType":"Issue",
              "tckPriority":"Medium"
          },
          {
              "tckNbr":"3031",
              "tckSts":"1 Not Assigned",
              "unid":"00598976D88226D2862581070059AD25",
              "tckReqs":"Bryan S Schmiedeler",
              "tckNts":
              [
                "Bryan DeBaun"
              ],
              "tckBUs":
              [
                "NAP\/IFI"
              ],
              "tckApps":"GTM",
              "tckType":"Issue",
              "tckPriority":"Medium"
          }
        ]
    }
]

[Dimiter Topalov]

Hi Bryan,

This thread seems to be a duplicate of a private support ticket with the same issue and related information. I will paste the answer from the ticket here, so others can benefit as well:

When the server response is not a plain array of data items, but is instead a complex object, like in the discussed case, the schema.data option must be used to point to the field from the server response that contains the collection of items.

Likewise, the schema.total option must provide the total number of items to ensure that the paging functionality will be working as expected (this part of the dataSource configuration seems fine).

However, please choose only one of the threads, if further communication is needed, in order to avoid any possible duplicates or misunderstanding. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress