Kendo Grid Modifying remote data before inserting

2019-09-07 15:58发布

问题:

I have a view model set up like this

$(function () {

data = {
    id: "",
    blah: null,
    blah2: null
};

vM = kendo.observable({
    arrData: [],
    DisplayThisArr: [],
    /*
    * Functions you see are here
    */

}); // End vM

kendo.bind($("#grid"), vM);

});

I bind it to a view that looks like this

<!DOCTYPE html>
<html>
<head>
<!-- Imports here, including the vM.js file -->

</head>


<body>
    <div id="container">

        <!-- Set up the Grid -->
        <div id="grid"
             data-role="grid"
             data-column-menu="true"
             data-filterable="true"
             data-sortable="true"
             data-row-filter="true"
             data-columns='[
                                {"field": "1", "title" : "1"},
                                {"field": "2", "title" : "2"},
                                {"field": "3", "title": "3"},
                                {"field": "4", "title": "4"},
                                {"field": "5", "title": "5"},
                                {"field": "6", "title": "6"},
                                {"field": "7", "title": "7"},
                                {"field": "propertyImAdding", "title" : "NEW PROP"}
                            ]'
             data-bind="source: dataSource">
        </div><!-- End of the grid Div -->
    </div><!-- End of the container Div -->
</body>
</html>

I pull data from a remote API

dataSource: new kendo.data.DataSource({
        schema: {
            model: {
                1: { type: "string" },.
                2: { type: "string" },
                3: { type: "string" },
                4: { type: "string" },
                5: { type: "string" },
                6: { type: "string" },
                7: { type: "string" },
                propertyImAdding: { type: "number" },
            }
        },
        batch: true,
        transport: {
            read:
                function(options) {
                  $.getJSON( 'https://localhost:port/api/blah/blah', data, function( json ) {
                        DisplayThisArr = json;
                        vM.getOtherData();
                        //options.success(???); //IDK what to do with this but I need it somewhere
                    });
                    //options.success(???); //IDK what to do with this but I need somewhere
                }
        }
    })

and I then get data from another api

getOtherData: function() {

        $.ajax({
            url: 'https://localhost:port/api/different/blah',
            dataType: 'json',
            async: false,
            success: function(jsonPayload) {
                arrData = jsonPayload;
                vM.modData(arrData, DisplayThisArr)
            }
        });

    }, //end displayData()

Then I modify the first array DisplayThisArray to have another property that I gather from the second array arrData.

modData: function(arrData, DisplayThisArr) {

        /* Hidden b/c not relivant */

        /* I add the new property that wasn't in the json data returned from the api and data to DisplayThisArr HERE */
        /* Now DisplayThisArr has been modified */

    }, //END modData()

Now that I modified the data how do I display it in my grid?

[EDIT] after @Brett comment, i have it set up like this and now i'm getting Uncaught TypeError: Cannot read property 'success' of undefined. Why is options undefined?

dataSource: new kendo.data.DataSource({
        schema: {
            model: {
                1: { type: "string" },.
                2: { type: "string" },
                3: { type: "string" },
                4: { type: "string" },
                5: { type: "string" },
                6: { type: "string" },
                7: { type: "string" },
                propertyImAdding: { type: "number" },
            }
        },
        batch: true,
        transport: {
            read:
                function(options) {

                $.ajax({
                  url: 'https://localhost:port/api/blah/blah',
                  dataType: 'json',
                  async: false,
                  data: data,
                  success: function(json) {
                        DisplayThisArr = json;
                        vM.getOtherData();
                        options.success(DisplayThisArr);
                  }
                });//end ajax
            }
        }
    })//End datasource