0

I'm new with Kendo.

I was trying to create a Kendo grid with data from a remote link

My Code:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://www.mocky.io/v2/53e1cd17aaabaeaa0bc9a8f9",
            dataType: "jsonp",
            //contentType: "application/json; charset=utf-8",
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 550,
    editable: "inline"
});

Where the remote link return

[{"metaId":1,"7":"A","3":"B","10":"C","18":"D","9":"E","5":"F","2":"G","27":"A","1":"AB","6":"AD","4":"AK","20":"AL"},...]

I'm getting error

Uncaught object

Why am I getting this error? How to solve it?

CodePen

Update

Sample call from Kendo on read

http://www.mocky.io/v2/53e1cd17aaabaeaa0bc9a8f9?callback=jQuery191038502124254591763_1407308470150&_=1407308470151

Response 

jQuery191038502124254591763_1407308470150([{"metaId":1,"7":"A","3":"B","10":"C","18":"D","9":"E","5":"F","2":"G","27":"A","1":"AB","6":"AD","4":"AK","20":"AL"},{"metaId":2,"7":"A","3":"B","10":"C","18":"D","9":"E","5":"F","2":"G","27":"A","1":"AB","6":"AD","4":"AK","20":"AL"},{"metaId":3,"7":"A","3":"B","10":"C","18":"D","9":"E","5":"F","2":"G","27":"A","1":"AB","6":"AD","4":"AK","20":"AL"},{"metaId":4,"7":"A","3":"B","10":"C","18":"D","9":"E","5":"F","2":"G","27":"A","1":"AB","6":"AD","4":"AK","20":"AL"},{"metaId":5,"7":"A","3":"B","10":"C","18":"D","9":"E","5":"F","2":"G","27":"A","1":"AB","6":"AD","4":"AK","20":"AL"}]);
Okky
  • 10,338
  • 15
  • 75
  • 122
  • @OnaBai: Kendo will internaly make the JSONP call and then the link will return the jsonp data as per the callback function name mentioned by kendo. The data I mentioned is the JSON that I'm sending from the server side. – Okky Aug 06 '14 at 07:00
  • @OnaBai: Please see updated question for clarification. – Okky Aug 06 '14 at 07:02

1 Answers1

1

The problems is that fields (columns) cannot be numbers. This is because internally, if you have a column called 1, it generates code as data.1 which is not valid. Change your columns name to a valid JavaScript field name and it will work.

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • Let me check. Thanks for the guidance – Okky Aug 06 '14 at 07:12
  • Thank you. Is there any documentation that says I cant use data like this or something? – Okky Aug 06 '14 at 07:53
  • 1
    Some sort of... if you go [here](http://docs.telerik.com/kendo-ui/api/framework/model#methods-Model.define) and check where it says **options.fields Object|Array** they say: _ Quote the key if it contains spaces or other **symbols which are not valid for a JavaScript identifier**._ They talk about _symbols_ but the question is that it should be a valid JavaScript identifier... – OnaBai Aug 06 '14 at 08:21