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

dataSource.transport.submit handler using initialization syntax

3 Answers 477 Views

Data Source

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

Rick asked on 22 Jun 2017, 01:06 PM

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

3 Answers, 1 is accepted

answered on 26 Jun 2017, 09:58 AM

Hello Rick,

The documentation which we have on the data source transport submit needs to be enhanced because the submit function is only called when using custom transport. If you modify the transport read operation to be a custom function, you can use it together with "submit" as in this demo I created for you here:

http://dojo.telerik.com/aFogo

The exception in the provided demo comes from the missing transport update configuration when using the built-in transport CRUD operations. Once added, the error disappears:

http://dojo.telerik.com/acebA

I will update the documentation article accordingly. Thank you for bringing this to our attention. As a small token of appreciation, I have updated your Telerik Points.

If you give me some more details on the scenario which you are working on, perhaps I could look into another option that you can utilise, perhaps one of the data source events - requestStart, sync or change?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

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.

answered on 28 Jun 2017, 08:03 AM

Thank you for your thorough reply. I've added a custom reader function to the datasource, and it seems to work. Adding this to the documentation would be good for future reference, so thanks for that.

I've tried the second sample (http://dojo.telerik.com/acebA), but it doesn't show up anything on the screen. The (javascript) source file seems to point to localhost. So I'm unable to verify this case.

The scenario I'm facing is editing data as a whole set. There are a few rows in the grid that represent settings of the application. In the backend they're serialized as a single JSON blob and saved in the database. It would be some overhead of deserializing the object, updating (or insert/delete for that matter) the setting, serializing and saving it again. Not to mention that some settings depend on other settings, so I need to save them all at the same time. So currently I'm handling the submit event (with batch=true), retrieving all rows from the datasource using dataSource.data() and pass that to the backend. Would you have another suggestion to just pass all data to the backend using the datasource?

The question can be marked as resolved, although I'm interested what other options are available for this use case.

answered on 29 Jun 2017, 02:37 PM

Hi Rick,

Please accept my apology for the mislinked file. I used my locally hosted non-minified Kendo UI version while debugging. I have now replaced the script with the CDN hosted kendo.all.min.js, so you should be able to see it at:

http://dojo.telerik.com/acebA/4

Regarding the question of other options, is the built-in transport not suitable for you? When configured for crud operations, the data source sends the three requests at the same time to the URLS in its definition when synced:

So it is either the submit function we discussed, the built-in transport or custom transport that are the possible options.Custom transport documentation article is available at:

http://docs.telerik.com/kendo-ui/framework/datasource/crud#local-or-custom-transport-crud-operations

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

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.