Hey,
I'm currently trying to use batch syncing with the server using the DataSource's transport.submit handler. The documentation tells me to pass a method, and to set batch to true on the DataSource itself in order to work properly. To my surprise I'm facing an exception with the following stacktrace:
Uncaught TypeError: Cannot read property 'data' of undefined
at init.setup (VM3012 kendo.all.min.js:27)
at init.update (VM3012 kendo.all.min.js:27)
at Object.<
anonymous
> (VM3012 kendo.all.min.js:27)
at Function.Deferred (VM2971 jquery.min.js:2)
at init._promise (VM3012 kendo.all.min.js:27)
at init._send (VM3012 kendo.all.min.js:27)
at init.sync (VM3012 kendo.all.min.js:27)
at init.saveChanges (VM3012 kendo.all.min.js:50)
at HTMLAnchorElement.<
anonymous
> (VM3012 kendo.all.min.js:50)
at HTMLDivElement.dispatch (VM2971 jquery.min.js:3)
A workaround would be to set the method after grid initialization (code below), but I'm wondering what could be wrong with my initial syntax/code.
var grid = $("#grid").data("kendoGrid");
grid.dataSource.transport.submit = function(e) { alert("alternate submit"); };
Reproduction (DoJo): Try to (inline) edit a row, then press 'save changes', using the code below:
<!DOCTYPE html>
<
html
>
<
head
>
<
base
href
=
"http://demos.telerik.com/kendo-ui/grid/editing"
>
<
style
>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"example"
>
<
div
id
=
"grid"
></
div
>
<
script
>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
submit: function(e) {alert("submit"); }
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120, editor: customBoolEditor },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
/*
Workaround:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.transport.submit = function(e) { alert("alternate submit"); };
*/
});
function customBoolEditor(container, options) {
$('<
input
class
=
"k-checkbox"
type
=
"checkbox"
name
=
"Discontinued"
data-type
=
"boolean"
data-bind
=
"checked:Discontinued"
>').appendTo(container);
$('<
label
class
=
"k-checkbox-label"
></
label
>').appendTo(container);
}
</
script
>
</
div
>
</
body
>
</
html
>
Kind regards