This is a migrated thread and some comments may be shown as answers.

How to use combobox in listview template

1 Answer 250 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Rod
Top achievements
Rank 1
Rod asked on 08 Jan 2013, 10:13 PM
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.

[
    {"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

Sort by
0
Alexander Valchev
Telerik team
answered on 10 Jan 2013, 10:12 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView
Asked by
Rod
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or