0x800a01bd – JavaScript runtime error: Object doesn't support this action – Kendo UI-Collection of common programming errors

What am I doing wrong? All I want to do is get some data from an API and display it on the screen:

    
        Kendo UI Test
        
        
         
         
    
    
        

        
            $(document).ready(function()
            {
                var retrievedData = new kendo.data.dataSource({
                    transport: {
                        read: {
                            url: "http://puppygifs.tumblr.com/api/read/json",
                            dataType: "json"
                        }
                    }
                });

                $("#grid").kendoGrid({
                    dataSource: retrievedData,
                    pageSize: 10
                });
            });

        
    

The error occurs at this part:

var retrievedData = new kendo.data.dataSource({
                    transport: {
                        read: {
                            url: "http://puppygifs.tumblr.com/api/read/json",
                            dataType: "json"
                        }
                    }
                });

EDIT:

How would I modify the code to capture data from an object that looks like this:

[
{
k__BackingField: {
isDirty: false,
isRecordAdded: false,
isRecordDeleted: false,
k__BackingField: null,
k__BackingField: null,
k__BackingField: null,
k__BackingField: null,
k__BackingField: 0,
k__BackingField: 0,
k__BackingField: null,
k__BackingField: 0,
k__BackingField: "0001-01-01T00:00:00",
k__BackingField: null,
k__BackingField: 0,
k__BackingField: null,
k__BackingField: 1889,
k__BackingField: null,
k__BackingField: null,
k__BackingField: null,
k__BackingField: null,
k__BackingField: null,
k__BackingField: 0,
k__BackingField: false,
notificationTypeId: 1,
notificationType: "Add/Edit Gross Earnings",
actionPageName: null,
param1: null,
param2: null,
param3: null,
param4: null,
param5: null,
dateEntered: "0001-01-01T00:00:00",
whoEntered: 0,
dateChanged: "0001-01-01T00:00:00",
whoChanged: 0
},
k__BackingField: [ ],
k__BackingField: false
},

1. You have a typo on dataSource option, it must be DataSource; the data you are reading are from another origin so you to use jsonp as dataType.

   The provided service return a complex set of data you have to read only data to show in grid and bind the data you want to show in your column.

   You can do this using schema and columns parameters.

   Code:

     $(document).ready(function () {
         var retrievedData = new kendo.data.DataSource({
             transport: {
                 read: {
                     url: "http://puppygifs.tumblr.com/api/read/json",
                     dataType: "jsonp"
                 }
             },
             schema: {
                 data: "posts"
             }
         });
         $("#grid").kendoGrid({
             dataSource: retrievedData,
             columns: [{
                 field: "id",
                 title: "ID",
                 width: 150
             }, {
                 field: "url",
                 title: "URL",
                 width: 150
             }]
         });
     });
   

   Working demo: