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...
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>5 Answers, 1 is accepted
0
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
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!
0
Rod
Top achievements
Rank 1
Rank 1
answered on 16 Jan 2013, 04:27 PM
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
Thanks,
Rod
0
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
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!
0
Rod
Top achievements
Rank 1
Rank 1
answered on 17 Jan 2013, 12:41 PM
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
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
0
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
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!