How to use combobox in listview template

2 posts, 0 answers
  1. Rod
    Rod avatar
    9 posts
    Member since:
    Jan 2013

    Posted 08 Jan 2013 Link to this post

    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>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 10 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top