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