Templates not rendering in window

3 posts, 0 answers
  1. Amit
    Amit avatar
    4 posts
    Member since:
    Apr 2014

    Posted 11 Jun 2014 Link to this post

    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. Amit
    Amit avatar
    4 posts
    Member since:
    Apr 2014

    Posted 11 Jun 2014 Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 13 Jun 2014 Link to this post

    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!
     
Back to Top