saveChanges: Cannot Read Property 'call' of undefined

[Mathew]

I'm using KendoUI Grid within SharePoint 2013 webpage. 

I am able to update my item using the CSOM within the function. After the function completes i get the error :

• kendo.all.js:6550 Uncaught TypeError: Cannot read property 'call' of undefined 

Here is the code in the kendo.all.js: (error line in italics/bold)

 _promise: function (data, models, type) {
                var that = this;
                return $.Deferred(function (deferred) {
                    that.trigger(REQUESTSTART, { type: type });
                    that.transport[type].call(that.transport, extend({
                        success: function (response) {
                            deferred.resolve({
                                response: response,
                                models: models,
                                type: type
                            });
                        },
                        error: function (response, status, error) {
                            deferred.reject(response);
                            that.error(response, status, error);
                        }
                    }, data));
                }).promise();
            },

  Here is my grid :

$("#kendoMyAssignedTable").kendoGrid({
dataSource: {
type: "ajax",
transport: {
read: function(operation){
$.ajax({
url:  _spPageContextInfo.webAbsoluteUrl + $select=ID,Assigned,CONVERSION_x0020_ACTIVITY,Stat/Title,id,txt_AssignedTo,Comments,ActivityDueDate,ConvSchedID/LOCATION_x0020_NAME,Responsible/Title,WeekGroupID/Title,WaveID/Title,ConvSchedID/ID&$expand=Stat,ConvSchedID,WaveID,ConvSchedID,Responsible,WeekGroupID&$filter=(Responsible/Title eq '" + m + "') and (Assigned eq 1) and (Stat/Title ne 'Completed') and (Stat/Title ne 'Not Started')&$orderby=ActivityDueDate,WeekGroupID/ID",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
cache: false
})
.done(function(result){
operation.success(result.d.results);
})
.fail(function (result){
var test = '';
})
},
},
pageSize: 20,
group: [
{field: "WaveID.Title"},
{field: "Stat.Title"},
{field: "ConvSchedID.LOCATION_x0020_NAME"}
],
sort: {field: "ActivityDueDate", dir: "asc"}
},
batch: true,
navigatable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: true,
groupable: true,
dataBound: function(o){
var g = $("#kendoMyAssignedTable").data("kendoGrid");
console.log(g.columns.length);
for (var i=0; i < g.columns.length; i++){
g.showColumn(i);
}
$("div.k-group-indicator").each(function(i,v){
g.hideColumn($(v).data("field"));

})
},
allowCopy: true,
toolbar: ["save","cancel", "excel"],
columnMenu: true,
resizeable: true,
saveChanges: function(e){
var grid = $("#kendoAssignedTable").data("kendoGrid");
var data = grid.dataSource.data();
var dirty = $.grep(data,function(item){
return item.dirty
});
var myItem = '';
var ctx =SP.ClientContext.get_current();
var items=SP.ListOperation.Selection.getSelectedItems(ctx);
var list=ctx.get_web().get_lists().getByTitle("ConvCheckList");

console.log("dirty",dirty);
$(dirty).each(function(i,v){

console.log(v.Stat.Title);
myItem = v.ID;
var objectitem = list.getItemById(myItem);
objectitem.set_item("Stat", v.Stat.ID);
objectitem.update();
ctx.executeQueryAsync();
});
},
columns: [
{
field: "WaveID.Title",
title: "Wave",
filterale: {multi: true, search: true},
editor: function(element, options){element.text(options.model.WaveID.Title)}
},
{
field: "ActivityDueDate",
title: "Due Date",
type: "date",
filterable: {multi: true, search: true},
format: "{0:d}",
width: 150,
editor: function(element, options){element.text(options.model.ActivityDueDate)}
},
{
field: "WeekGroupID.Title",
title: "Week",
filterable: { multi: true, search: true},
width: 400,
editor: function(element, options){element.text(options.model.WeekGroupID.Title)}
},
{
field: "CONVERSION_x0020_ACTIVITY",
title: "Conversion Activity",
editor: function(element, options){element.text(options.model.CONVERSION_x0020_ACTIVITY)}
},
{ 
field: "ConvSchedID.LOCATION_x0020_NAME",
title: "Location Name", 
filterable: { multi: true, search: true},
editor: function(element, options){element.text(options.model.ConvSchedID.LOCATION_x0020_NAME)}
},
{ 
field: "Stat.Title",
title: "Status",
filterable: { multi: true, search: true},
editor: myStatusDropDown, 
template: "#=Stat.Title#"
},
{
field: "Comments",
title: "Comments"
}

],
editable: true
});
}
function myStatusDropDown(container, options){

$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Title",
dataValueField: "Title",
dataSource: {

transport: {
read: function(operation){
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('CheckListStatus')/Items?$select=Title,ID",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
cache: false
})
.done(function(result){
operation.success(result.d.results);
var datas = $(result.d.results);
console.log(datas);
})
.fail(function(result){
var test = '';
})

}
}
}
});

}

[Stefan]

Hello Mathew,

I can assume that the issue occurs because the transport.update is not set up.

In order to update the data the transport.update should be configurated.

Please check our article for the CRUD data operations, if the CRUD operations are correctly set, the Grid should work as expected:

http://docs.telerik.com/kendo-ui/framework/datasource/crud

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress