Kendo ListView：通過選擇所需項目切換到編輯模板

Question

我有一個說明問題的簡單示例： http : //dojo.telerik.com/AROMAZ

我想選擇（單擊）一個項目以使其切換到“編輯”模板。 僅當我在選擇新項目之前單擊編輯項目的“取消”圖標時，它才能正常工作。

如果我選擇一個新項目而不手動取消選擇上一個項目，則它將停止工作。

我沒有什么可依靠的，也沒有“取消”按鈕。

它應該很容易。單擊您要編輯的項目（切換到其“編輯”模板）。 選擇一個應取消選擇先前選擇的項目。 即一次編輯一個。

我認為問題是在手動編輯另一個項目之前，我找不到自動選擇/取消編輯項目（如果有選擇項）的方法。

編輯1：

放置this.cancel(); 在this.edit(selected)之前無法正常工作。 注意，此代碼在原始的dojo示例中已被注釋掉。

當您選擇一個新項目時，先前選擇的項目將不被編輯（可以）。 但是，新選擇的項目不會被編輯（不良行為），並且會引發異常（不良行為）。

例外是：

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)

this.cancel(); 在此修改后的dojo中進行了說明： http : //dojo.telerik.com/AROMAZ/7

注意：要查看異常，請打開瀏覽器的開發人員工具（即Chrome中的Shift + Ctr + I）

編輯2：

放置this.save(); 在this.edit(selected)也可以引發異常之前。 示例： http ： //jsfiddle.net/horacioj/mkJTG/417/

Answer 1

而不是取消嘗試使用：

this.save();

之前

this.edit(selected);

看來此解決方案完全符合您的需求。

編輯

為避免在編輯模式下單擊同一元素時出現異常，請執行以下操作：

$("#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

我認為我完全可以按照自己的意願進行操作。 參見http://jsfiddle.net/horacioj/t45n0hdj/

它執行this.cancel(); 在this.edit()之前。 如果this.select(); 失敗（因此.edit()會拋出異常），然后它會執行.select()按索引（或ID）搜索項目。 這樣可以防止發生異常。

記住最后一個已編輯項目的變量有助於防止對已被選中的項目進行編輯（例如，單擊同一項目將切換其狀態，而不是使其處於編輯模式）。

基本上：

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;
}