时间戳

首页 > 解决方案 > 防止删除键在 Kendo ListBox 上工作

kendo-ui - 防止删除键在 Kendo ListBox 上工作

问题描述

我在使用 MVVM 的 Razor 页面上使用 Kendo。在特定页面上，我有一对 ListBoxes。我想阻止用户使用删除键从框中删除项目。

如果我捕获并阻止remove事件工作，则可以解决问题，除非您不能使用工具箱或拖放将项目从一个盒子转移到另一个盒子（编辑：因为移动是更改和删除事件的组合）。

这就是我停止删除事件的方式......

<select style="min-width: 600px" id="listboxImports" data-role="listbox"
    data-text-field="title"
    data-value-field="id"
    data-selectable="multiple"
    data-toolbar='{tools: ["transferTo", "transferFrom"]}'
    data-connect-with="listboxSelected"
    data-draggable="true"
    data-template="template"
    data-drop-sources="['listboxSelected']"
    data-bind="source: imports, events: {remove: viewmodel.events.remove}"></select>

<script>
    var viewmodel = new kendo.observable({
        events: {
            remove: function(e) {
                e.preventDefault();
            },
            //
        }
    });
<script/>

我还尝试捕获删除键的keydown事件，但我无法确定在呈现 ListBox 时呈现的众多元素中的哪一个实际上正在处理该事件。

谁能告诉我怎么才能吃蛋糕吗？

标签： kendo-uikendo-mvvm

解决方案

花了一段时间，灵感来自剑道多选的相同问题：https ://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/prevent-removing-selected-items-on-退格：

  $("#listBoxA").parent().get(0).addEventListener('keydown',  function(e) {
   if (e.keyCode == kendo.keys.DELETE) {
        e.stopImmediatePropagation();  
        e.preventDefault();
      }
 }, true)

完整道场：https ://dojo.telerik.com/aFaCIkez/3

_keyDown 处理程序附加到 <ul> 元素。我的解决方案使用event capture将一个新的处理程序附加到其父处理程序，以便该处理程序将在 Kendo 之前执行，因此如果按下的键被删除，则停止事件的传播。

或者，一种可能的解决方法是设置navigatable为 false，但您显然会失去所有键盘功能。示例：https ://dojo.telerik.com/IHICAziR

推荐阅读