This is a migrated thread and some comments may be shown as answers.

Error on Server Side Paging

1 Answer 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sowmya
Top achievements
Rank 1
Sowmya asked on 09 Jun 2015, 01:51 PM
We are getting a couple of problems when we trying to return the data with our custom api and consume through kendo for server side sorting and paging. The Kendo scripts seem to not like it and throws an error.

 Please find below the details:-

Web-api Result
 
data:{

count: 23,

  data: [

1.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1156, name: "Soda DPG For Test", type: 2,…},

2.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1157, name: "Coke DPG For Test", type: 2,…},

3.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1205, name: "Pespi Diet DPG", type: 2,…}

4.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1206, name: "Copy of Pespi Diet DPG",…},

5.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1238, name: "soda product group", type: 2,…},

6.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1196, name: "Blend Tea Bag DPG - edited",…},

7.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1193, name: "Blend Tea DPG", type: 2,…},

8.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1188, name: "Classic Blend DPG", type: 2,…},

9.  {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1203, name: "Copy of Classic Blend DPG",…},

{$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1236, name: "Copy of test create edited",…}

]

}

Exception, While data binding:

TypeError: e.slice is not a function

    at ht.extend.success (kendo.all.min.js:11)

    at Object.ht.extend.read.n._queueRequest.n.online.n.transport.read.success (kendo.all.min.js:11)



Angular js controller source
 

Demos.controller("MyCtrl", function ($scope) {

$scope.testgriddata = {

              dataSource: {

                   transport: {

   read:  {

                           method: "GET",

                           url: 'http://api.dev.test.com/product-hierarchies/nodes',

                          headers: {

                               "x-security-context": "102",

                               "Authorization": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6InBmVTFLcUJVZ3BNb1hTME5nZ2dHdF9ZVGRBayJ9.eyJpc3MiOiJodHRwczovL2FjY291bnQuZGV2LmV5Yy5jb20vIiwiYXVkIjoidXJuOnNleWM6cnA6YXBpIiwibmJmIjoxNDMyODk5NDE0LCJleHAiOjE0NjQ1MjE4MTQsIm5hbWVpZCI6ImFkbWluIiwidW5pcXVlX25hbWUiOiJhZG1pbiIsImVtYWlsIjoiZXljQGV5Yy5jb20iLCJ1cm46ZXljLmNvbS9hLzEvY2xhaW1zL3NlY3VyaXR5LWNvbnRleHQiOlsiMTAwMDIiLCIxMDAwNSJdLCJhdXRobWV0aG9kIjoiaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93cy8yMDA4LzA2L2lkZW50aXR5L2F1dGhlbnRpY2F0aW9ubWV0aG9kL3Bhc3N3b3JkIiwiYXV0aF90aW1lIjoiMjAxNS0wNS0yOVQxMToyOToyMi45MTdaIiwiYWN0b3J0IjoiZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKdWIyNWxJbjAuZXlKMWJtbHhkV1ZmYm1GdFpTSTZJa05PUFhObGVXTXRjbkF0WVhOd1pXTjBjeXdnVHoxRldVTXNJRk05VEc5dVpHOXVMQ0JEUFZWTElpd2lZWFYwYUcxbGRHaHZaQ"
                           },

   dataType: 'json'  },

                        parameterMap: function (data, type) {

                            if (type == "read") {

                                return {

                                    pagesize: data.pageSize,

                                    pagenum: data.page-1,

                                    sortcolumn: (data.sort != "undefined" && data.sort.length != 0) ? $scope.GetObjectKeyIndex($scope.testgriddata.columns, data.sort[0].field) : null,

                                    sortdirection: (data.sort != "undefined" && data.sort.length != 0) ? (data.sort[0].dir == "asc" ? 0 : 1) : null,

                                }

                               }

                           },

                        schema: { 

                            data: "data",

                            total: "count",

                           model: {

                               fields: {

                                   name: { type: "string" },

                                   description: { type: "string" },

                                   createdDate: { type: "date" },

                                   createdByUser: { type: "string" },

                                   type: { type: "string" }

                               }

                           }

                       },

                   },

                   pageSize: 25, 

                   serverPaging: true,

                   serverFiltering: false,

                   serverSorting: true,

                   sort: { field: "LastUpdatedDate", dir: "desc" }

               },

              

                   height: 550,

  

                   sortable: true,

                   //filterable: {

                   //    mode: "row"

                   //},

    pageable: {

        refresh: true,

       input: true,

        pageSizes: true,

        pageSizes: [5, 10, 15,20,25],

        buttonCount: 5

    },

     

    columns:

    [         

                      {

                          field: "name",

                          title: " Name",

                          filterable: {

                              cell: {

                                  showOperators: false

                              }

                          }

                      },

                    {

                        field: "description",

                        title: "Description",

                        filterable: {

                            cell: {

                                showOperators: false

                            }

                        }

                    },

                    {

                        field: "noofproducts",

                        title: "No of Products"

                    },

                     {

                         field: "type",

                         title: "Product Group Type",

                         template: "#= type==2?'Dynamic Product Group':'Custom Product Group' #",

                         filterable: {

                             cell: {

                                 showOperators: false

                             }

                         }

                     },

                  

                    {

                        field: "createdDate",

                        title: "Created Date",

                        template: "#= kendo.toString(kendo.parseDate(createdDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"

                      

                    },

                    {

                        field: "createdByUser",

                        title: "Created By"

                    },

                    {

                        field: "LastUpdatedDate",

                        title: "Last Updated Date",

                        filterable: {

                            cell: {

                                showOperators: false

                            }

                        }

                    },

                     {

                         field: "LastUpdatedBy",

                         title: "Last Updated By",

                         filterable: {

                             cell: {

                                 showOperators: false

                             }

                         }

                     },

                     {

                         field: "LastUsedDate",

                         title: "Last Used Date",

                         filterable: {

                             cell: {

                                 showOperators: false

                             }

                         }

                     }]

           },

    $scope.GetObjectKeyIndex= function (obj, keyToFind) {

        var i = 0, key;

        for (key in obj) {

            if (obj[key].field == keyToFind) {

                return i+1;

            }

            i++;

        }

        return null;

    }

});

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Jun 2015, 08:03 AM
Hi Sowmya,

The error e.slice is not a function will occur when the schema.data is not set correctly.

In order to resolve the issue:

  -  fix the syntax error - schema configuration should not be nested in the transport object. It should be defined at dataSource level.
  -  change the schema to:


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


Your JSON data contains wrapping 'data' object.

I hope this information will help.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Sowmya
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or