Kendo ui 列表视图在更改数据时失去焦点

Question

我有一个 kendo ui 带有模板的列表视图，该模板根据基础数据有条件地隐藏元素。示例如下：

<script type="text/x-kendo-template" id="template">
    <div class="product">
        <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
        <div>
          # if (Discontinued) { #
                Discontinued Product
          # } #
        </div>
    </div>
</script>

如果我修改基础数据源项以使用以下代码设置停用：

data[index].set('Discontinued', true);

如果索引是当前 selected 项目，则该项目失去焦点并且不再 selected。

请参阅以下 dojo 示例 http://dojo.telerik.com/UlOze，select 列表中的一个项目，然后将其设置为停用。

有没有人找到这个问题的解决方案/解决方法？

谢谢。

------------最终解决方案-------------

根据下面 dimodi 的回答，我拼凑了解决方案。要使其正常工作，数据源必须具有架构 -> 模型 -> id 属性集。

第一次捕获当前 selected 数据项：

      var selectedItem = $(listElement).find(".k-state-selected");
      var selectedDataItem = list.dataItem(selectedItem);

2nd：调用.set后重新查找数据项并设置k-state-selected class。这是必需的，因为列表组件正在重新生成 uid。

     if (selectedDataItem) {
        var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
        var uid = newSelectedItem.uid;
        jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
      }

我已经更新了原来的 dojo 来展示这个解决方案，以防它对其他人有帮助。

Answer 1

更改数据项时，会重新呈现其对应的 ListView 项以应用更改。结果，选择丢失了，因为它是一个纯粹的视觉特征，不会在重新绑定时保留。您可以在使用 set() 之前检查是否选择了某个项目，然后通过应用 k-state-selected [=16] 手动恢复选择=] 之后的元素。

Kendo ui 列表视图在更改数据时失去焦点

Kendo ui list view losing focus when changing data

kendo-ui

kendo-datasource

kendo-template

kendo-listview