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

Templates not rendering in window

2 Answers 290 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 11 Jun 2014, 07:20 PM
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>

2 Answers, 1 is accepted

Sort by
0
Amit
Top achievements
Rank 1
answered on 11 Jun 2014, 08:42 PM
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>
0
Daniel
Telerik team
answered on 13 Jun 2014, 02:41 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Templates
Asked by
Amit
Top achievements
Rank 1
Answers by
Amit
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or