This is a migrated thread and some comments may be shown as answers.

saveChanges: Cannot Read Property 'call' of undefined

1 Answer 362 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mathew
Top achievements
Rank 1
Mathew asked on 04 Jan 2017, 01:52 AM

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 = '';
})

}
}
}
});

}

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 05 Jan 2017, 03:57 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Mathew
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or