Как отключить начальные значения в мультиселекции kendo mvc, чтобы они не были выбраны? - PullRequest
Новая
       50

Как отключить начальные значения в мультиселекции kendo mvc, чтобы они не были выбраны?

0 голосов
/ 01 ноября 2019

Я пытаюсь заполнить множественный выбор кендо некоторыми начальными значениями, которые пользователь не может впоследствии удалить.

Я попытался выполнить событие 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...
        });
    }

1 Ответ

0 голосов
/ 01 ноября 2019

Попробуйте предотвратить завершение события 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>

Демо

...