Question

我正在尝试用一些初始值填充剑道多选，而这些初始值以后将不会被用户删除。

我试图遍历multiselect小部件的DataBond事件并获取每个元素，但是我无法完成我正在尝试的事情。也许（或更可能是）我做错了事。

此外，我已经看到了禁用元素的作用：

<span class="#: unselectableItem ? 'k-state-disabled': ''#">
     #: text #
</span>

但是我不确定如何实现它。

到目前为止我所拥有的：

@(Html.Kendo().MultiSelect().Name("msEquipoResponsable")
     .DataValueField("Id").DataTextField("Tipo")
     .DataSource(ds => ds.Read(r => r.Action("ObtenerPersonal","AuditoriaPlaneacionMemorandoEditor")))
     .Value(Model.EquipoResponsable.Split(','))
     .Events(ev => ev.DataBound("onBindingMS"))
  )

DataBound函数：

function onBindingMS(event) 
   {
        var dataItems = event.sender._dataItems;
        $.each(dataItems, (ind, el) => {
            //Disabled logic should be here i guess...
        });
    }

Answer 1

对于无法取消选择的项目，请尝试使用e.preventDefault()阻止deselect事件完成。

deselect: function(e) {
    if (e.dataItem.unselectableItem)
    {
        // Call preventDefault() to prevent the deselection
        e.preventDefault();
    }
}

在下面的代码段中，Item1和Item3项开始被选择，并且根据unselectableItem属性不能取消选择：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head>
<body>
</body>
  <select id="multiselect" multiple="multiple">
    <option selected>Item1</option>
    <option>Item2</option>
</select>
<script id="item-template" type="text/x-kendo-template">
  <span class="#: unselectableItem ? 'k-state-disabled': ''#">
     #: text #
	</span>
</script>
<script>
$("#multiselect").kendoMultiSelect({
  dataSource: [{
    id: 1,
    text: "Item1",
    unselectableItem: true
  },{
    id: 2,
    text: "Item2",
    unselectableItem: false
  },{
    id: 3,
    text: "Item3",
    unselectableItem: true
  },{
    id: 4,
    text: "Item4",
    unselectableItem: false
  }],
  dataValueField: "id",
  itemTemplate: $("#item-template").html(),
  tagTemplate: $("#item-template").html(),
  deselect: function(e) {
    if (e.dataItem.unselectableItem)
    {
      // Call preventDefault() to prevent the deselection
      e.preventDefault();
    }
  },
  value: [1,3]
});
</script>
</html>

Demo

如何禁用Kendo MVC多选中的初始值，以免取消选择它们？

1 个答案: