I am new to Kendo, so it is most likely an error on my part but I cannot seem to get source and template binding to work.
The following is my view. I have a drop down list which should update a ul of links but even though my binding is working (the select element is just for testing) I cant seem to get the ul to render using the template. I get no errors of any kind it just doesnt render.
<div class="global-nav-header border-bottom">
<h2 data-bind="text: headerText"></h2>
<select data-text-field="name" data-value-field="handle" data-bind="source: reportsTypes, value: selectedReportsType"></select>
</div>
<div class="global-nav-body">
<select data-text-field="name" data-value-field="handle" data-bind="source: reports"></select>
<ul class="reports-list" data-template="reports-ul-template" data-bind="source: reports">
</ul>
<script id="reports-ul-template" type="text/x-kendo-template">
<li>
<a href="#" class="instance-link" data-bind="text: name, style: { backgroundImage: icon }, attr: { data-id: id }"></a>
</li>
</script>
</div>
The view model is as follows so the selected reports type changs and the calculated field gets called but still no li's are rendered in my ul.
var viewModel = kendo.observable({
headerText: "Reports",
reportsTypes: getReportsTypes(),
selectedReportsType: 0,
reports: function () {
var reportsTypeHandle = this.get("selectedReportsType");
var reports;
switch (reportsTypeHandle) {
case 1:
reports = [
new report("Foundations", 1, "~/Content/images/icocyg_reports_small.png"),
new report("All", 2, "~/Content/images/icocyg_reports_small.png"),
new report("Large Tower", 3, "~/Content/images/icocyg_reports_small.png")];
break;
case 2:
reports = [
new report("Plant Overview", 5, "~/Content/images/icocyg_reports_small.png"),
new report("Area 15 Subsystem", 6, "~/Content/images/icocyg_reports_small.png"),
new report("Generator Layout", 7, "~/Content/images/icocyg_reports_small.png"),
new report("High Power Cables", 8, "~/Content/images/icocyg_reports_small.png")];
break;
case 3:
reports = [
new report("Plant Status", 9, "~/Content/images/icocyg_reports_small.png"),
new report("Electrical Status", 10, "~/Content/images/icocyg_reports_small.png"),
new report("Structural Status", 11, "~/Content/images/icocyg_reports_small.png"),
new report("Production Report", 12, "~/Content/images/icocyg_reports_small.png"),
new report("Production Report All", 13, "~/Content/images/icocyg_reports_small.png")];
break;
}
return reports;
}
});
The result I get is attached.
Thanks in advance.
The following is my view. I have a drop down list which should update a ul of links but even though my binding is working (the select element is just for testing) I cant seem to get the ul to render using the template. I get no errors of any kind it just doesnt render.
<div class="global-nav-header border-bottom">
<h2 data-bind="text: headerText"></h2>
<select data-text-field="name" data-value-field="handle" data-bind="source: reportsTypes, value: selectedReportsType"></select>
</div>
<div class="global-nav-body">
<select data-text-field="name" data-value-field="handle" data-bind="source: reports"></select>
<ul class="reports-list" data-template="reports-ul-template" data-bind="source: reports">
</ul>
<script id="reports-ul-template" type="text/x-kendo-template">
<li>
<a href="#" class="instance-link" data-bind="text: name, style: { backgroundImage: icon }, attr: { data-id: id }"></a>
</li>
</script>
</div>
The view model is as follows so the selected reports type changs and the calculated field gets called but still no li's are rendered in my ul.
var viewModel = kendo.observable({
headerText: "Reports",
reportsTypes: getReportsTypes(),
selectedReportsType: 0,
reports: function () {
var reportsTypeHandle = this.get("selectedReportsType");
var reports;
switch (reportsTypeHandle) {
case 1:
reports = [
new report("Foundations", 1, "~/Content/images/icocyg_reports_small.png"),
new report("All", 2, "~/Content/images/icocyg_reports_small.png"),
new report("Large Tower", 3, "~/Content/images/icocyg_reports_small.png")];
break;
case 2:
reports = [
new report("Plant Overview", 5, "~/Content/images/icocyg_reports_small.png"),
new report("Area 15 Subsystem", 6, "~/Content/images/icocyg_reports_small.png"),
new report("Generator Layout", 7, "~/Content/images/icocyg_reports_small.png"),
new report("High Power Cables", 8, "~/Content/images/icocyg_reports_small.png")];
break;
case 3:
reports = [
new report("Plant Status", 9, "~/Content/images/icocyg_reports_small.png"),
new report("Electrical Status", 10, "~/Content/images/icocyg_reports_small.png"),
new report("Structural Status", 11, "~/Content/images/icocyg_reports_small.png"),
new report("Production Report", 12, "~/Content/images/icocyg_reports_small.png"),
new report("Production Report All", 13, "~/Content/images/icocyg_reports_small.png")];
break;
}
return reports;
}
});
The result I get is attached.
Thanks in advance.