I am trying to create a conditional template to display different controls based on the item it is being bound to. In my example, I render a combobox in the second item when in edit mode. The values in the combo appear just fine until I hit save. What I see then is [object Object] where the regular template is trying to display it. How can store and show my selected value in the non-editable template?
FYI.. This is being bound to a JSON string.
FYI.. This is being bound to a JSON string.
[ {"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":[{"itemtext":"Open","itemvalue":"OP"},{"itemtext":"Canceled","itemvalue":"CO"},{"itemtext":"Closed","itemvalue":"CL"},{"itemtext":"Complete","itemvalue":"CO"}]},"answer":null,"comment":null}, {"questiontext":"What is the status?","control":{"type":"radiobutton","label":"Status:","item":[{"itemtext":"Open","itemvalue":"OP"},{"itemtext":"Canceled","itemvalue":"CO"},{"itemtext":"Closed","itemvalue":"CL"},{"itemtext":"Complete","itemvalue":"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>${control.label}</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>Question</dt> <dd>${questiontext}</dd> <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> # } else if (control.type == 'combobox') { # <select data-role="combobox" data-text-field="itemtext" data-value-field="itemvalue" data-bind="source:control.item, value:answer"></select> # } # </dd> <dt>Comment</dt> <dd>${comment}</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" } } }); var listView = $("#listView").kendoListView({ dataSource: dataSource, template: kendo.template($("#template").html()), selectable: "single", 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>1 Answer, 1 is accepted
0
Hello Rod,
The issue is caused by the fact that initially the field is bound to an object - null is an object. As a result when the user selects an item from the ComboBox, the answer field of the DataSource will be set to an object.
To display the selected value, please bind the field to an empty string: "answer": ""
Regards,
Alexander Valchev
the Telerik team
The issue is caused by the fact that initially the field is bound to an object - null is an object. As a result when the user selects an item from the ComboBox, the answer field of the DataSource will be set to an object.
To display the selected value, please bind the field to an empty string: "answer": ""
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!