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;
}
});
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;
}
});