时间戳

首页 > 解决方案 > 如何禁用 kendo mvc 多选中的初始值，以便它们不会被取消选择？

javascript - 如何禁用 kendo mvc 多选中的初始值，以便它们不会被取消选择？

问题描述

我正在尝试使用一些初始值填充剑道多选，用户以后无法删除这些初始值。

我试图运行多选小部件的 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"))
  )

数据绑定函数：

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

标签： javascriptasp.net-mvckendo-uikendo-multiselect

解决方案

尝试使用那些无法取消选择的项目来阻止deselect事件完成。e.preventDefault()

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>

演示

推荐阅读