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. Kendo UI is VS 2017 Ready
  4. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 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