This is a migrated thread and some comments may be shown as answers.

Source and Template Binding Doesn't Render

1 Answer 66 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Karl asked on 26 Feb 2013, 12:17 PM
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 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">
<script id="reports-ul-template" type="text/x-kendo-template">
            <a href="#" class="instance-link" data-bind="text: name, style: { backgroundImage: icon }, attr: { data-id: id }"></a>

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,
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")];
            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")];
            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")];
        return reports;

The result I get is attached.

Thanks in advance.


1 Answer, 1 is accepted

Sort by
Alexander Valchev
Telerik team
answered on 27 Feb 2013, 04:33 PM
Hi Karl,

Since the example is not runnable and I cannot debug I am not sure where exactly the problem comes from. Definitely when the template renders it will throw a JavaScript error because the "#" character is not escaped.
<a href="\#" class="instance-link" data-id="#= id #">#= name #</a>

When the hash sign is not part of the template syntax, the developer must escape it.

Apart from that your code looks OK. I tested it here and got everything to work as expected. Please compare the presented implementation with your current one and let me know if you have any further questions.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
General Discussions
Asked by
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question