Problems customizing listview edit demo

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

    Posted 09 Jan 2013 Link to this post

    I have taken the listview edit demo customized it. Can anyone please help me with the following issues I am having?

    1. I would like the listview item to go into edit mode upon selection (instead of using the edit, save, cancel button if possible)
    2. Currently when I enter in values for multiple lines, if I hit cancel on one line item, the values clear out for all other list items.

    Here is my example code...

    //JSON file data
    [
        {"questiontext":"Please enter the first name.","control":{"type":"textbox","label":"First Name"},"answer":"","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":"CA"},{"itemtext":"Closed","itemvalue":"CL"},{"itemtext":"Complete","itemvalue":"CO"}]},"answer":"","comment":""},
        {"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":"","comment":""},
        {"questiontext":"What was the date of the incident?","control":{"type":"datetime","mask":"datetime","label":"Date:"},"answer":"","comment":""},
        {"questiontext":"What was the date of the incident?","control":{"type":"datetime","mask":"dateonly","label":"Date:"},"answer":"","comment":""},
        {"questiontext":"What was the date of the incident?","control":{"type":"datetime","mask":"timeonly","label":"Time:"},"answer":"","comment":""}
    ]
     
    <!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
                        # } else if (control.type == 'datetime' && control.mask == 'datetime')  { #
                            <input data-role="datetimepicker" data-bind="value:answer" />
                        # } else if (control.type == 'datetime' && control.mask == 'dateonly')  { #
                            <input data-role="datepicker" data-bind="value:answer" />
                        # } else if (control.type == 'datetime' && control.mask == 'timeonly')  { #
                            <input data-role="timepicker" data-bind="value:answer" />
                        # } #         
                    </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. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 10 Jan 2013 Link to this post

    Hello Rod,

    In the code you've posted I don't see the corresponding code for editing item on select. I would suggest you to use jsbin/jsfiddle when posting runnable sample code as this will speed up the resolution.

    In order to achieve the desired behavior you can review ListView API doc.
    When item is selected change event is triggered and to put an item in edit mode you can use edit method.


    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!
  3. Kendo UI is VS 2017 Ready
  4. Rod
    Rod avatar
    9 posts
    Member since:
    Jan 2013

    Posted 16 Jan 2013 Link to this post

    Hi Nikolay. I think I can figure out the selection and putting it in edit mode (Although a quick sample would help). The more pressing issue is my #2 item. Can you address that?

    Thanks,
    Rod
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Jan 2013 Link to this post

    Hello Rod,

    I am not sure how reproduce the issue. Pressing enter in edited item does not cause any action here:
    http://demos.kendoui.com/web/listview/editing.html

    All the best,
    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!
  6. Rod
    Rod avatar
    9 posts
    Member since:
    Jan 2013

    Posted 17 Jan 2013 Link to this post

    Nikolay, the steps to reproduce are...

    1. Click edit on the first item in the list. Enter a value in the textbox and hit save.
    2. Click edit on the second item in the list. Select a value from the combobox and hit save.
    3. Click edit again on the second item in the list. Now hit cancel without doing anything. The values for items 1 and 2 are cleared out.

    Rod
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 21 Jan 2013 Link to this post

    Hello Rod,

    The behavior that you have described might be reproduces only when you don't have model schema and update transport defined in the DataSource. It cannot be reproduces in the demo which I refer in the previous post.

    For more details please refer the DataSource definition in the demo.

    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
Kendo UI is VS 2017 Ready