Kendo MultiSelect сделать значение для выбора и отключить

Question

Нужна помощь здесь. Здесь я создаю простую демонстрацию и чего я хочу добиться от dataBound, если выбран узел checked='yes' и отключить (применить k-state-disable) от редактирования. Я пытаюсь установить (selected,true) & (disabled,true), но, похоже, это не работает.

DEMO IN DOJO

<select id="multiselect"></select>

$("#multiselect").kendoMultiSelect({
    dataSource: {
    data: [
      {id:1, Name: "John 1", checked: 'no'},
      {id:2, Name: "John 2", checked: 'yes'},
      {id:3, Name: "John 3", checked: 'no'},
      {id:4, Name: "John 4", checked: 'yes'},
      {id:5, Name: "John 5", checked: 'no'},
      {id:6, Name: "John 6", checked: 'no'}
    ]
  },
  dataTextField: "Name",
    dataValueField: "id", 
    dataBound: function(e) {
    var multiselect = $("#multiselect").data("kendoMultiSelect");
    var x = multiselect.dataSource.view();

    for (var i = 0; i < x.length; i++) {
      if (x[i].checked == "yes") {
        //x[i].set("selected", true);
        //x[i].set("disabled ", true);
        //x[i].prop("disabled", true).addClass("k-state-disabled");
      } 
    }
  },

});

Answer 1

Я хочу предложить другой способ достижения этого. Старайтесь не менять DOM в dataBound всякий раз, когда это возможно. Поэтому я хотел бы предложить использовать опцию itemTemplate и событие select:

Вы можете применить .k-state-disabled класс в опции itemTemplate:

itemTemplate: '<span # if (data.checked === "yes") { #class="k-state-disabled"# } #>#: Name #</span>'

Это сделает опцию отключенной. Но все еще возможно выбрать его в списке, поэтому вы можете использовать событие select, чтобы предотвратить это:

select: function(e) {
    if (e.dataItem.checked === 'yes') {
        e.preventDefault();
    }
},

Использование e.preventDefault() внутри этого события не позволит пользователю выбрать параметр, соответствующий состояние.

Обновленная демоверсия

Answer 2

Вам необходимо обработать select и deselect события:

    function onDeselect(e) {
        if (e.dataItem.checked == 'yes') {
            e.preventDefault();
        }
    }  



    function onSelect(e) {
        if(e.dataItem.checked == 'yes') {
            e.preventDefault();
        }
    };  

$("#multiselect").kendoMultiSelect({
  select: onSelect,
  deselect: onDeselect,
  //...
});

рабочая демонстрация