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