Kendo Grid Object doesn't support property or

Question

I am trying to bind the kendo grid to a WCF remote odata service. But when I try to populate the grid I receive the exception Object doesn't support property or method 'slice'. Here is my javascript code to populate the grid.

$("#datagrid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "http://localhost:65401/sdrservice.svc/IssueLists"
                    },                    
                    pageSize: 20
                },                
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 3
                },
                columns: [{                  
                    field: "Issueid"                                        
                }, {
                    field: "Subject"                    
                }, {
                    field: "Description"
                }, {
                    field: "Module"                   
                }, {
                    field: "Status"
                }, {
                    field: "StartDate"
                }, {
                    field: "ClosureDate",
                    nullable: true
                }, {
                    field: "RaisedBy"
                }, {
                    field: "Duration"
                }]
            });

And my json object is like

    {"odata.metadata":"http://localhost:65401/sdrservice.svc/$metadata#IssueLists",
"value":[{"Issueid":"512","Subject":"Crossing","Description":"a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet","Module":"ADF","Status":"Fixed","StartDate":"2013-05-14T00:00:00","ClosureDate":null,"RaisedBy":"Azhar Husain","Duration":828},
    {"Issueid":"474","Subject":"Point","Description":"a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet sapien urna","Module":"ADF","Status":"Open","StartDate":"2012-10-09T00:00:00","ClosureDate":null,"RaisedBy":"Azhar Husain","Duration":1045},
    {"Issueid":"937","Subject":"Point","Description":"a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi","Module":"TM1","Status":"Fixed","StartDate":"2013-05-31T00:00:00","ClosureDate":null,"RaisedBy":"Azhar Husain","Duration":811},
    {"Issueid":"226","Subject":"Point","Description":"a libero nam dui proin leo odio porttitor id consequat in consequat","Module":"DATA MINING","Status":"Open","StartDate":"2014-11-08T00:00:00","ClosureDate":null,"RaisedBy":"Azhar Husain","Duration":285},
    {"Issueid":"76","Subject":"Hill","Description":"a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed","Module":"TM1","Status":"Fixed","StartDate":"2013-04-12T00:00:00","ClosureDate":null,"RaisedBy":"Azhar Husain","Duration":860}]}

I think the issue is with json object as slice method need array which is data.value here but how to use it is my problem as read line in method directly calls the service and perform the required task I have no control over it.

Answer 1

You need to set the dataSource's schema.data property.

schema: {
  data: 'value'
}

Documentation http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data

Answer 2

You need to set the schema in the configuration, since you aren't binding the datasource directly to the object that is returned, but actually to a property in that object (i.e. the value property).

Try setting your datasource like this:

dataSource: {
  type: "json",
  transport: {
    read: "http://localhost:65401/sdrservice.svc/IssueLists"
  },                    
  pageSize: 20,
  schema: {
    data: function(response) {
      return response.value;
    }
  }
}