Kendo ListView: switching to the edit template by selecting the desired item

Question

I have this simple example illustrating the problem: http://dojo.telerik.com/AROMAZ

I want to select (click) an item to make it switch to its 'edit' template. It works fine only if I click on the edited item's 'cancel' icon before selecting a new item.

If I select a new item without manually deselecting the previous one, it stops working.

I don't what to rely nor have the 'cancel' button.

It should be easy.. Click the item you want to edit (to switch to its 'edit' template). Selecting one should deselect the previously selected item. ie edit one at at time.

I think the problem is I couldn't find a way to auto-select / un-edit an item (if there is any selected) before manually editing another one.

EDIT 1:

Placing this.cancel(); before this.edit(selected) doesn't work as expected. Notice this code was commented out in the original dojo example.

When you select a new item, the previously selected item gets un-edited (this is fine). However, the newly selected item doesn't get edited (undesired behavior), and an exception is thrown (undesired behavior).

The exception is:

Uncaught TypeError: Cannot read property 'uid' of undefined
    at init.edit (kendo.all.js:53910)
    at init.change (VM1332 result:42)
    at init.trigger (kendo.all.js:124)
    at init.change (kendo.all.js:53707)
    at init.trigger (kendo.all.js:124)
    at init._notify (kendo.all.js:25836)
    at init.value (kendo.all.js:25811)
    at init._tap (kendo.all.js:25725)
    at init.d (jquery-1.12.4.min.js:2)
    at init.trigger (kendo.all.js:124)

The addition of this.cancel(); is illustrated in this modified dojo: http://dojo.telerik.com/AROMAZ/7

Note: To see the exception, open the browser's Developer Tools (ie Shift+Ctr+I in Chrome)

EDIT 2:

Placing this.save(); before this.edit(selected) can throw exceptions too. Example: http://jsfiddle.net/horacioj/mkJTG/417/

Answer 1

Instead of cancel try to use:

this.save();

Before

this.edit(selected);

Seems this solutions fully fits your wants.

EDIT

To avoid an exception when you click on the same element while in edit mode:

$("#listView").kendoListView({
dataSource: dataSource,
template: "<div style='padding: 10px; border: 1px solid red;'>#= Id # </div>",
editTemplate: "<div style='padding: 10px; border: 1px solid red;'>EDITING #= Id # </div>",
selectable: "single",
change: function(e) {
    var index = this.select().index();        
    var dataItem = this.dataSource.at(index);

    if(e.sender.LastIndex != index) {
      this.save();        
      this.edit(this.select());          
    }        

    e.sender.LastIndex = index;
}});

Answer 2

I think I got it working exactly as I want. See http://jsfiddle.net/horacioj/t45n0hdj/

It does a this.cancel(); before the this.edit() . If this.select(); fails (and therefore the .edit() would throw and exception), then it does the .select() searching the item by index (or id). This prevents the exception to happen.

A variable remembering the last item that was edited helps to prevent keeping an item edited if it was already selected (ie clicking the same item will toggle its state instead of keeping it in edit mode).

Basically:

var lastEditedIndex = -1;

$("#listView").kendoListView({
  ....
  ....
  change: function(e) {
    var index = this.select().index();
    this.cancel();
    var selected = this.select();
    if (selected.length === 1) {
      this.edit(selected);
      lastEditedIndex = index;
    } else {
      selectByIndex(index);
    }
  }


function selectByIndex(index) {
  if (lastEditedIndex === index) return;

  var listView = $('#listView').data('kendoListView');
  var itemWithID = listView.dataSource.at(index);
  listView.select(listView.element.children('[data-uid="' + itemWithID.uid + '"]').first());
  lastEditedIndex = index;
}