CODEWITHSUNDEEP
kendo-grid
Bryan Schmiedeler
Bryan Schmiedeler

Reputation: 3127

KendoUI Grid Server Binding Example

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).

I also modified my javascript source. [see below].

Usually I just get a blank screen.

Would be very grateful for any assistance.

Script:

$(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");
        });

JSON feed:

[  
  {
      "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"
          }        
        ]
    }
]

Upvotes: 0

Views: 25

Answers (1)

dev_in_progress
dev_in_progress

Reputation: 2494

Correct your JSON feed, you need to return object not array:

{
   "total": 10,
   "data": []
}

After that say what is data and what is total in you schema:

schema : {
           total: "total",
           data: "data",
              .
              .
         }

Note: if you mock data like in your case (total: 100, data -> size is 2) your paginatio will be created by total parameter not data itself. You will see 5 pages with same data (that is ok).

Upvotes: 1

Related Questions