Hi forum readers,
My apologies if my question is rather basic. I am a WPF developer moving in to web development for the first time in many years and am trying to get my head around applying JSON to MVVM to a Kendo UI control.
Background
We are trying to retrieve JSON data from our MVC project. Put it in to the ViewModel and then get a dropdownlist to populate a list of TradeId values.
We have gone through the demo's (e.g. remote binding) as an FYI.
Question:
Of course like any other person starting off we have run in to an issue. Can anyone shed any light on what we might be doing wrong or missing?
At present we get an error as follows:
Error: Unable to parse bindings.
Message: ReferenceError: tradesSource is not defined;
Bindings value: source: tradesSource, value: selectedTrade
Our code is as follows:
[code]
<script>
$(document).ready(function () {
// ... some unrelated code
// Setup ViewModel
var crudServiceBaseUrl = "/trades/GetFilteredTrades/";
var viewModel = kendo.observable({
tradesSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: crudServiceBaseUrl,
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl,
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
schema: {
model: {
id: "TradeId"
}
}
}),
selectedTrade: null,
hasChanges: false,
save: function () {
this.tradesSource.sync();
this.set("hasChanges", false);
},
remove: function () {
if (confirm("Are you sure you want to delete this Trade?")) {
this.tradesSource.remove(this.selectedTrade);
this.set("selectedTrade", this.tradesSource.view()[0]);
this.change();
}
},
showForm: function () {
return this.get("selectedTrade") !== null;
},
change: function () {
this.set("hasChanges", true);
}
});
console.log("View Model created");
kendo.bind($("#form-container"), viewModel);
console.log("View Model bound to #form-container");
});
</script>
<div id="form-container">
console.log("Combobox created");
<h4>ComboBox</h4>
<select data-role="combobox"
data-text-field="TradeId"
data-value-field="TradeId"
data-bind="source: tradesSource, value: selectedTrade">
</select>
</div>
[/code]
Thanks in advance
My apologies if my question is rather basic. I am a WPF developer moving in to web development for the first time in many years and am trying to get my head around applying JSON to MVVM to a Kendo UI control.
Background
We are trying to retrieve JSON data from our MVC project. Put it in to the ViewModel and then get a dropdownlist to populate a list of TradeId values.
We have gone through the demo's (e.g. remote binding) as an FYI.
Question:
Of course like any other person starting off we have run in to an issue. Can anyone shed any light on what we might be doing wrong or missing?
At present we get an error as follows:
Error: Unable to parse bindings.
Message: ReferenceError: tradesSource is not defined;
Bindings value: source: tradesSource, value: selectedTrade
Our code is as follows:
[code]
<script>
$(document).ready(function () {
// ... some unrelated code
// Setup ViewModel
var crudServiceBaseUrl = "/trades/GetFilteredTrades/";
var viewModel = kendo.observable({
tradesSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: crudServiceBaseUrl,
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl,
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
schema: {
model: {
id: "TradeId"
}
}
}),
selectedTrade: null,
hasChanges: false,
save: function () {
this.tradesSource.sync();
this.set("hasChanges", false);
},
remove: function () {
if (confirm("Are you sure you want to delete this Trade?")) {
this.tradesSource.remove(this.selectedTrade);
this.set("selectedTrade", this.tradesSource.view()[0]);
this.change();
}
},
showForm: function () {
return this.get("selectedTrade") !== null;
},
change: function () {
this.set("hasChanges", true);
}
});
console.log("View Model created");
kendo.bind($("#form-container"), viewModel);
console.log("View Model bound to #form-container");
});
</script>
<div id="form-container">
console.log("Combobox created");
<h4>ComboBox</h4>
<select data-role="combobox"
data-text-field="TradeId"
data-value-field="TradeId"
data-bind="source: tradesSource, value: selectedTrade">
</select>
</div>
[/code]
Thanks in advance