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

Question

I'm trying to have a kendo multiselect filled with some initial values which can't be removed later by the user.我正在尝试使用一些初始值填充剑道多选，用户以后无法删除这些初始值。

I've tried to run through the DataBond event of multiselect widget and get each of the elements, but I couldn't accomplish what I'm trying.我试图运行多选小部件的 DataBond 事件并获取每个元素，但我无法完成我正在尝试的事情。 Maybe (or more probably) I'm doing something wrong.也许（或更可能）我做错了什么。

Also, I've seen this to disable elements:另外，我已经看到这个禁用元素：

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

But i'm not sure, how to implement it.但我不确定，如何实现它。

What I have so far:到目前为止我所拥有的：

@(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:数据绑定 function：

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

Answer 1

Try preventing the deselect event to be completed using e.preventDefault() for those items which cannot be deselected.尝试使用e.preventDefault()来阻止deselect事件的完成，用于那些无法取消选择的项目。

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

In the snippet below, items Item1 and Item3 starts selected and cannot be deselected according to the unselectableItem property:在下面的代码片段中，项目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 个解决方案

解决方案1
0 2019-11-01 00:54:57

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

问题描述

1 个解决方案

解决方案1 0 2019-11-01 00:54:57

解决方案1
0 2019-11-01 00:54:57