Uncaught object error Kendo grid read issue

Question

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

Answer 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.