KendoUI Grid Server Binding Example

2 posts, 0 answers
  1. Bryan
    Bryan avatar
    14 posts
    Member since:
    Feb 2016

    Posted 20 Apr 2017 Link to this post

    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"
              }       
            ]
        }
    ]
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 21 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top