How to use template expressions when bound to complex JSON object

3 posts, 1 answers
  1. Rod Yager
    Rod Yager avatar
    79 posts
    Member since:
    May 2010

    Posted 18 Dec 2012 Link to this post

    I have an array of objects that are read from a JSON file. I am having difficulty referencing attributes of the child object of the parent. What is the correct syntax or what step am I missing to accomplish what I am trying to do (which is conditional template formatting)? Any help would be appreciated. Thanks.

    In this example, "control.type" is what I am after in the edit template.

    My static JSON looks like this...

    [
    {"questiontext":"Please enter the first name.","control":{"@type":"textbox","@label":"First Name"},"answer":null,"comment":"This is where the comment goes"},
    {"questiontext":"What is the status?","control":{"@type":"combobox","@label":"Status:","item":[{"@key":"Open","@value":"OP"},{"@key":"Canceled","@value":"CO"},{"@key":"Closed","@value":"CL"},{"@key":"Complete","@value":"CO"}]},"answer":null,"comment":null},
    {"questiontext":"What is the status?","control":{"@type":"radiobutton","@label":"Status:","item":[{"@key":"Open","@value":"OP"},{"@key":"Canceled","@value":"CO"},{"@key":"Closed","@value":"CL"},{"@key":"Complete","@value":"CO"}]},"answer":null,"comment":null},
    {"questiontext":"What was the date of the incident?","control":{"@type":"datetime","@mask":"datetime","@label":"Date:"},"answer":null,"comment":null}
    ]

    <!DOCTYPE html>
    <html>
    <head>
        <title>Editing</title>
        <link href="../../iqaListTest/content/kendo/2012.3.1114/examples-offline.css" rel="stylesheet">
        <link href="../../../iqaListTest/content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet">
        <link href="../../../iqaListTest/content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet">
     
        <script src="../../../iqaListTest/scripts/kendo/2012.3.1114/jquery.min.js"></script>
        <script src="../../../iqaListTest/scripts/kendo/2012.3.1114/kendo.web.min.js"></script>
        <script src="../../iqaListTest/scripts/kendo/2012.3.1114/console.js"></script>
    </head>
    <body>
        <a class="offline-button" href="../index.html">Back</a>
        <div id="example" class="k-content">
        <div class="k-toolbar k-grid-toolbar">
            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
        </div>
             
        <div class="listview-holder">
            <div id="listView"></div>
        </div>
     
        <!--<div id="pager" class="k-pager-wrap">
        </div>-->
     
        <script type="text/x-kendo-tmpl" id="template">
            <div class="iqa-view">
                <dl>
                    <dt>Question</dt>
                    <dd>${questiontext}</dd>
                    <dt>Answer</dt>
                    <dd>${answer}</dd>
                    <dt>Comment</dt>
                    <dd>${comment}</dd>
                </dl>
                <div class="edit-buttons">
                    <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
                    <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
                </div>
            </div>
        </script>
     
        <script type="text/x-kendo-tmpl" id="editTemplate">
            <div class="iqa-view">
                <dl>
                    <dt>${control.label}</dt>
                    <dd>
                        #if (control.type == 'textbox')  { #
                             <input type="text" data-bind="value:answer" name="answer" required="required" validationMessage="required" />
                             <span data-for="answer" class="k-invalid-msg"></span>
                        # } #              
                    </dd>
                </dl>
                <div class="edit-buttons">
                    <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
                    <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
                </div>
            </div>
        </script>
     
        <script>
            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "iqaData.txt",
                            dataType: "json"
                        }
                    },
                    change: function () {
                         
                    }
                });
     
                var listView = $("#listView").kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($("#template").html()),
                    editTemplate: kendo.template($("#editTemplate").html())
                }).data("kendoListView");
     
                $(".k-add-button").click(function (e) {
                    listView.add();
                    e.preventDefault();
                });
            });
        </script>
        <style scoped>
            .iqa-view
            {
                float: left;
                width: 650px;
                margin: 5px;
                padding: 3px;
                -moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
                -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
                box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
                border-top: 1px solid rgba(0,0,0,0.1);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            }
     
            .listview-holder
            {
                width: 700px;
                margin: 0 auto;
                padding: 0;
                border: 0;
                border: 1px solid rgba(0,0,0,0.1);
                height: 400px;
                overflow: auto;
            }
     
            .iqa-view dl
            {
                margin: 10px 0;
                padding: 0;
                min-width: 0;
            }
            .iqa-view dt, dd
            {
                float: left;
                margin: 0;
                padding: 0;
                height: 30px;
                line-height: 30px;
            }
            .iqa-view dt
            {
                clear: left;
                padding: 0 5px 0 15px;
                text-align: right;
                opacity: 0.6;
                width: 100px;
            }
            .k-listview
            {
                border: 0;
                padding: 0;
                min-width: 0;
            }
            .k-listview:after, .iqa-view dl:after
            {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .edit-buttons
            {
                text-align: right;
                padding: 5px;
                min-width: 100px;
                border-top: 1px solid rgba(0,0,0,0.1);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            }
     
            .k-toolbar, #listView
            {
                width: 660px;
                margin: 0 auto;
                -webkit-border-radius: 11px;
                -moz-border-radius: 11px;
                border-radius: 11px;
            }
             
            span.k-invalid-msg
            {
                position: absolute;
                margin-left: 160px;
                margin-top: -26px;
            }
        </style>
    </div>
    </body>
    </html>
  2. Rod Yager
    Rod Yager avatar
    79 posts
    Member since:
    May 2010

    Posted 18 Dec 2012 Link to this post

    I would also like a way to loop through the control's items so that I can create more radio options or combobox values. JSON...

    {"questiontext":"What is the status?","control":{"@type":"radiobutton","@label":"Status:","item":[{"@key":"Open","@value":"OP"},{"@key":"Canceled","@value":"CO"},{"@key":"Closed","@value":"CL"},{"@key":"Complete","@value":"CO"}]},"answer":null,"comment":null},

    I know it looks something like this, but not sure how to do this with the objects I have via the JSON datasource.

    #for (var i=0,len=KeyPairs.length; i<len; i++){#
                <li>${ KeyPairs[i] }</li>
            # } #
  3. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2286 posts

    Posted 19 Dec 2012 Link to this post

    Hello Rod,

    As you have fields which are prefixed with "@" symbol, the template that is rendering them should be formatter as follows:
    <dt>${control["@label"]}</dt>
    //instead of
    <dt>${control.@label}</dt>
    // or as in your original template
    <dt>${control.label}</dt> // - there is no such field "label" it is "@label"


    For more details see the sample bellow:
    http://jsbin.com/irihut/1/edit

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top