Hi guys
I've tried to follow the following post on how to use Foreign Key from a datasource - something that seems not to be possible out of the box: http://d585tldpucybw.cloudfront.net/forums/foreign-key-question
When getValues is called the console.log show that it is actually populating the array: OrganisationArray - maybe this is not before loaded when the grid is created? Please give me an advice in what direction to turn :-)
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style> html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } </style>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.silver.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div>
<div id="grid" ></div>
<script>
function getValues(data, valueField, textField) {
var values = [];
for (var i = 0; i < data.length; i++) {
values.push({ text: data[i][textField], value: data[i][valueField] });
}
return values;
}
var OrganisationArray = [];
var dsOrganisation = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: { url: "http://localhost:8080/DataEntryService/Organisation" }
},
change: function () {
OrganisationArray = getValues(this.data(), "OrganisationMDXMember", "Organisationen");
//console.log(this.data().length);
console.log(OrganisationArray.length);
console.log(OrganisationArray[0]["value"]);
console.log(OrganisationArray[0]["text"]);
console.log(OrganisationArray[1]["value"]);
console.log(OrganisationArray[1]["text"]);
},
});
function organisationDropDownEditor(container, options) {
$('<input required data-text-field="Organisationen" data-value-field="OrganisationMDXMember" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "Organisationen",
dataValueField: "OrganisationMDXMember",
minLength: 1,
filter: "contains",
suggest: true,
placeholder: "Vælg organisationsenhed...",
autoBind: false,
dataSource: dsOrganisation
});
}
$(document).ready(function () {
dsOrganisation.read();
$("#grid").kendoGrid({
columns: [
{ field: "SkeyDefault", title: "Id", width: 20 },
{ field: "Userid", title: "Userid", width: 50 },
{ field: "Parameter", width: 50 },
{
field: "MDXParametervaerdi", width: 150,
editor: organisationDropDownEditor,
values: OrganisationArray
},
{ command: ["destroy"], title: " ", width: 70 }
],
pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
sortable: true,
filterable: true,
groupable: false,
editable: true,
toolbar: ["create", "save", "cancel"], // "save", "cancel", "excel", "pdf"
dataSource: {
type: "odata-v4",
transport: {
read: /* GET */ { url: "http://localhost:8080/DataEntryService/ReportingServicesUserDefault" },
update: /* PUT */ { url: function (data) { return 'http://localhost:8080/DataEntryService/ReportingServicesUserDefault(' + data.SkeyDefault + ')'; } },
destroy: /* DELETE */ { url: function (data) { return 'http://localhost:8080/DataEntryService/ReportingServicesUserDefault(' + data.SkeyDefault + ')'; } },
create: /* POST */ { url: "http://localhost:8080/DataEntryService/ReportingServicesUserDefault" }
},
pageSize: 20,
schema: {
model: {
id: "SkeyDefault",
fields: {
SkeyDefault: { editable: false, type: "number" },
Userid: { editable: true, type: "string", required: true },
Parameter: { editable: false, type: "string", required: true, defaultValue: "Organisation" },
// Parametervaerdi: { editable: true, type: "string" },
MDXParametervaerdi: { editable: true, type: "string", required: true }
}
}
},
error: function (e) {
console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
}
}
});
});
</script>
</div>
</body>
</html>
4 Answers, 1 is accepted
Rank 1
Indeed, the problem will occur because the grid is initialized before the values are loaded. You should initialize the grid after the values are loaded in the change handler:
var OrganisationArray = [];var dsOrganisation = new kendo.data.DataSource({ type: "odata-v4", transport: { read: { url: "http://localhost:8080/DataEntryService/Organisation" } }, change: function () { OrganisationArray = getValues(this.data(), "OrganisationMDXMember", "Organisationen"); initGrid(); }});$(document).ready(function () { dsOrganisation.read();}); function initGrid() { $("#grid").kendoGrid({ ... });}Regards,
Daniel
Telerik
Rank 1
Hi Daniel
As simpel as that, thanks Daniel. :-) - one thing I had to change was that initGrid should only be initialized once (the change event is called every time I open the ComboBox) - I therefore used a variable for the purpose in the initGrid function but is there an "once" event handler or another maybe more generic way to do this?
Yes, you can bind a one time handler with the one method:
dsOrganisation.one("change", function() { ...});dsOrganisation.read();You could also use the promise returned from the read method instead of a change handler:
dsOrganisation.read().done(function () { OrganisationArray = getValues(dsOrganisation.data(), "OrganisationMDXMember", "Organisationen"); initGrid();});Regards,
Daniel
Telerik