Templates not rendering in window

[Amit]

Hello,

I am trying to use/define templates based on meta-data. In the example below, I have hard coded a json array (to be replaced with remote data) that is used to populate the template, and other fields as well. While the correct templates are being invoked (identified by the for debug labels added), the date picker and drop list assigned to the data-role attribute are not functioning.

1.  the mock data is bound to a list view, which
2.  uses a template that calls a function
3.  the function calls another template which contains the datepicker.

Thanks in advance for your help.

Regards,

Amit Kohli

<div id="container">
</div>

<script type="text/x-kendo-template" id="textBoxTemplate">
<input type="text" id="txt#=columnName#">
</script>

<script type="text/x-kendo-template" id="dateTemplate">
<input name="#=columnName#" 
                type="text" 
                data-type="date" 
                data-role="datepicker" /><label>for debug - date</label>
</script>

<script type="text/x-kendo-template" id="dropListTemplate">
<input name="dll#=columnName#" id="dll#=columnName#"
        data-value-field="LookupValue"
        data-text-field="LookupName"
        data-source="#:lookupList#"
        data-value-primitive="true"
        data-role="dropdownlist" /><label>for debug - droplist</label>
</script>

<script type="text/x-kendo-template" id="outerTemplate">
    <table>
<tr>
<td>#=columnDisplayName#</td>
<td>
                #= renderEntityTemplate(data) #
            </td>
</tr>
</table>
</script>

<script type="text/javascript">
    //todo - amit k - validations for required, format, etc. ? May one assume all dates are required
    $(document).ready(function () {
        
        var mockData =
            [
                {  columnDisplayName: "Entity Code", columnName: "EntCode", templateType: "textBoxTemplate", lookupList: ""          },
                {  columnDisplayName: "Start Date", columnName: "EqEffBegDate", templateType: "dateTemplate", lookupList: ""        },
                {  columnDisplayName: "Entity Type", columnName: "EntTypeTID", templateType: "dropListTemplate",
                    lookupList: [{ "LookupValue": 1, "LookupName": "One" }, { "LookupValue": 2, "LookupName": "Two" }]
                },
            ];

        $("#container").kendoListView({
            dataSource: mockData,
            template: kendo.template($("#outerTemplate").html())
        });
    });

    function renderEntityTemplate(data) {
        //debugger;
        return kendo.Template.compile($('#' + data.templateType).html())(data);
    }
</script>

[Amit]

Update - partial success with attribute initialization - the datepicker works.
However, for the dropdownlist - setting the json directly in the template works, (http://jsbin.com/qilenuke/1/edit)
but if it is set in the mock data (as in the code below) - the error is  - SCRIPT1007: Expected ']' 
kendo.all.min.js, line 9 character 3663

Formatting the javascript shows the error here - 
        function M(e,n){
            var r;
            return 0===n.indexOf("data")&&(n=n.substring(4),n=n.charAt(0).toLowerCase()+n.substring(1)),n=n.replace(et,"-$1"),r=e.getAttribute("data-"+gt.ns+n),null===r?r=t:"null"===r?r=null:"true"===r?r=!0:"false"===r?r=!1:kt.test(r)?r=parseFloat(r):K.test(r)&&!X.test(r)&&(r=Function("return ("+r+")")()),r
        }

Thanks in advance

Amit

01.<div id="container">
02.</div>
03.
04.<script type="text/x-kendo-template" id="textBoxTemplate">
05.    <input type="text" id="txt#=columnName#">
06.</script>
07.
08.<script type="text/x-kendo-template" id="dateTemplate">
09.    <input name="#=columnName#"
10.                type="text"
11.                data-type="date"
12.                data-role="datepicker" /><label>1111</label>
13.</script>
14.
15.<script type="text/x-kendo-template" id="dropListTemplate">
16.    <input name="ddl#=columnName#" id="ddl#=columnName#"
17.        data-value-field="LookupValue"
18.        data-text-field="LookupName"
19.        data-source="#:lookupList#"
20.        data-value-primitive="true"
21.        data-role="dropdownlist" /><label>2222</label>
22.</script>
23.
24.<script type="text/x-kendo-template" id="outerTemplate">
25.    <table>
26.        <tr>
27.            <td>#=columnDisplayName#</td>
28.            <td>
29.                #= renderEntityTemplate(data) #
30.            </td>
31.        </tr>
32.    </table>
33.</script>
34.
35.
36.
37.<script type="text/javascript">
38.    //todo - amit k - validations for required, format, etc. ? May one assume all dates are required
39.    $(document).ready(function () {
40.        /*ajax call to get data for edit or new node, iterate and display templates
41.        elements returned are -
42.        1.  columnName
43.        2.  columnDisplayName
44.        3.  templateType
45.        4.  [LookupData]
46.        if lookupData create datasource
47.        */
48.        var mockData =
49.            [
50.                {
51.                    columnDisplayName: "Entity Code", columnName: "EntCode", templateType: "textBoxTemplate", lookupList: ""
52.                },
53.                {
54.                    columnDisplayName: "Start Date", columnName: "EqEffBegDate", templateType: "dateTemplate", lookupList: ""
55.                },
56.                {
57.                    columnDisplayName: "Entity Type", columnName: "EntTypeTID", templateType: "dropListTemplate",
58.                    lookupList: [{ "LookupValue": 1, "LookupName": "One" }, { "LookupValue": 2, "LookupName": "Two" }]
59.                },
60.            ];
61.
62.        $("#container").kendoListView({
63.            dataSource: mockData,
64.            template: kendo.template($("#outerTemplate").html()),
65.            dataBound: function (e) {
66.                kendo.init("#container");
67.            }
68.        });
69.    });
70.
71.    function renderEntityTemplate(data) {
72.        //debugger;
73.        return kendo.Template.compile($('#' + data.templateType).html())(data);
74.    }
75.</script>

[Daniel]

Hello Amit,

Evaluating the "lookupList" field as string will result in "[object Object]" to be set for the data-source attribute. With the approach that you are currently using you could convert the array to JSON in order to set the data for the dropdownlist:

data-source='#:kendo.stringify(lookupList)#'

However, a simpler approach would be to use source binding for the listview. I created a small example with the code that you provided which demonstrates this case.


Regards,
Daniel
Telerik