dataSource.transport.submit handler using initialization syntax

4 posts, 0 answers
  1. Rick
    Rick avatar
    2 posts
    Member since:
    Feb 2011

    Posted 22 Jun Link to this post

    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>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
    </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

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    298 posts

    Posted 26 Jun Link to this post

    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 visualization (charts) and form elements.
  3. Rick
    Rick avatar
    2 posts
    Member since:
    Feb 2011

    Posted 28 Jun in reply to Alex Hajigeorgieva Link to this post

    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.

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    298 posts

    Posted 29 Jun Link to this post

    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 visualization (charts) and form elements.
Back to Top