防止删除键在 Kendo ListBox 上工作

Question

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

如果我设置陷阱并阻止 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 时呈现的众多元素中的哪一个真正处理了该事件。

谁能告诉我蛋糕和怎么吃？

Answer 1

受 kendo 的 Multiselect 的相同问题的启发，花了我一段时间：https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/prevent-removing-selected-items-on-backspace：

  $("#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 处理程序附加到

event capturing

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

防止删除键在 Kendo ListBox 上工作

Prevent the delete key from working on Kendo ListBox

kendo-ui

kendo-mvvm