Question

我有一个简单的例子来说明问题：http://dojo.telerik.com/AROMAZ

我想选择（点击）某个项目，使其切换到“编辑”状态。模板。只有当我点击已修改的项目时才能正常工作取消＆＃39;选择新项目前的图标。

如果我选择了一个新项目而没有手动取消选择前一个项目，它将停止工作。

我不知道该依赖什么，也不会取消＆＃39;取消＆＃39;按钮。

应该很容易..点击您要修改的项目（切换到“编辑”模板）。选择一个应该取消选择以前选择的项目。即，在时间编辑一个。

我认为问题是在手动编辑另一个项目之前，我无法找到自动选择/取消编辑项目的方法（如果有任何选定项目）。

编辑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)

此修改过的道场http://dojo.telerik.com/AROMAZ/7

中添加了this.cancel();

注意：要查看例外情况，请打开浏览器的开发者工具（即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;
}

Kendo ListView：通过选择所需的项

2 个答案: