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}
]
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 Answers, 1 is accepted
0
Rod Yager
Top achievements
Rank 1
Rank 1
answered on 18 Dec 2012, 07:06 PM
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.
{"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>
# } #0
Accepted
Hello Rod,
As you have fields which are prefixed with "@" symbol, the template that is rendering them should be formatter as follows:
For more details see the sample bellow:
http://jsbin.com/irihut/1/edit
Regards,
Nikolay Rusev
the Telerik team
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!