Trying to display data from a remote api sending jsonp and using server paging. For some reason the grid will not display the data. There are no error messages and Chrome/FF have no trouble parsing the jsonp. To get this to work I can change either the API or the web app, whatever it takes.
Here's the jsonp:
jQuery112403661894688946523_1524408300528([{"total":4,"d":[{"t_id":6,"thread_title":"The Latest news is not good","thread_body":"Here is a long description of the problem and no solution offerred. Here is more typical BB nonsense. Here's a personal story about more nonsense..","thread_created_dt":"2018-03-21T18:08:32.7651816","thread_edited_dt":"2018-03-21T18:08:32.7651816","up_count":0,"down_count":0,"posts_count":3,"posts_last_dt":"2018-04-17T02:21:02.5061225","posts_first_dt":"2018-03-21T18:20:18.1132348","u_id":2,"username":"scdecade","user_created_dt":"2018-01-06T15:52:50.0880940","ranking":1},{"t_id":4,"thread_title":"Lorum ipso lorum","thread_body":"Fets over on everyone.","thread_created_dt":"2018-01-06T16:45:05.1147048","thread_edited_dt":"2018-01-06T17:28:12.0919741","up_count":1,"down_count":1,"posts_count":58,"posts_last_dt":"2018-01-10T15:56:08.7811010","posts_first_dt":"2018-01-06T21:42:54.3239900","u_id":2,"username":"scdecade","user_created_dt":"2018-01-06T15:52:50.0880940","ranking":2}]}])
Here's the html body :
<body>
<br style="margin-bottom:240px;" />
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://ndpapi.azurewebsites.net/api/v/threads/active/5",
dataType: "jsonp",
type: 'GET'
},
parameterMap: function (options, type) {
if (type == "read") {
return {
n: options.page,
s: options.take
}
}
}
},
schema: {
total: "total",
data: "d",
model: {
id: "t_id",
fields: {
t_id: { type: "number" },
thread_title: { type: "string" },
thread_body: { type: "string" },
thread_created_dt: { type: "date" },
thread_edited_dt: { type: "date", nullable: true },
up_count: { type: "number" },
down_count: { type: "number" },
posts_count: { type: "number" },
posts_last_dt: { type: "date", nullable: true },
posts_first_dt: { type: "date", nullable: true },
u_id: { type: "number" },
username: { type: "string" },
tagline: { type: "string", nullable: true },
url: { type: "string", nullable: true },
user_created_dt: { type: "date", nullable: true },
ranking: { type: "number" }
}
}
},
pageSize: 2,
serverPaging: true,
serverFiltering: false,
serverSorting: false
});
$('#grid').kendoGrid({
dataSource: dataSource,
height: 800,
//toolbar: ["create", "delete", "update"],
filterable: false,
sortable: false,
pageable: {
refresh: true,
//buttonCount: 10,
//type: 'numeric',
pageSizes: true,
//pageSizes: [1, 2, 4, "all"],
info: true,
numeric: true,
previousNext: true
},
columns: [
{
field: "ranking",
title: "Rank",
format: "{0: #) }",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
},
{
field: "thread_title",
title: "Thread",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "120px"
},
{
field: "thread_body",
title: "Body",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "240px"
},
{
field: "up_count",
title: "+Votes",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
},
{
field: "down_count",
title: "-Votes",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
},
{
field: "posts_count",
title: "Posts",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
}]
});
</script>
</body>
3 Answers, 1 is accepted
I have created a small sample using the same response and grid configuration. However, the grid bounds as expected. Below you will find the sample I used for testing. Please examine it and let me know what I am missing:
Regards,
Georgi
Progress Telerik
After further investigation of the response from the server I noticed that the response is an array with a single item. However, the response from the server should be the item itself.
A possible solution is to modify the API to return an object instead of an array.
e.g.
jQuery112403661894688946523_1524408300528({"total":4,"d":[{"t_id":6,"thread_title":"The Latest news is not good","thread_body":"Here is a long description of the problem and no solution offerred. Here is more typical BB nonsense. Here's a personal story about more nonsense..","thread_created_dt":"2018-03-21T18:08:32.7651816","thread_edited_dt":"2018-03-21T18:08:32.7651816","up_count":0,"down_count":0,"posts_count":3,"posts_last_dt":"2018-04-17T02:21:02.5061225","posts_first_dt":"2018-03-21T18:20:18.1132348","u_id":2,"username":"scdecade","user_created_dt":"2018-01-06T15:52:50.0880940","ranking":1},{"t_id":4,"thread_title":"Lorum ipso lorum","thread_body":"Fets over on everyone.","thread_created_dt":"2018-01-06T16:45:05.1147048","thread_edited_dt":"2018-01-06T17:28:12.0919741","up_count":1,"down_count":1,"posts_count":58,"posts_last_dt":"2018-01-10T15:56:08.7811010","posts_first_dt":"2018-01-06T21:42:54.3239900","u_id":2,"username":"scdecade","user_created_dt":"2018-01-06T15:52:50.0880940","ranking":2}]})In case you have no access to the source of the API you can use the schema.parse.
e.g.
parse:function(e){ return e[0]; }Below you will find a sample which demonstrates the above approach:
Regards,
Georgi
Progress Telerik
Rank 1