Kendo MultiSelect生成要选择和禁用的值 [英] Kendo MultiSelect make value to be selected and disable

问题描述

这里需要帮助.我在这里创建了一个简单的演示，如果选择了checked='yes'节点并从编辑中禁用(应用k-state-disable)，我想从dataBound中实现什么.我尝试设置(selected,true)& (disabled,true)，但似乎不起作用.

Need help here. I create a simple demo here and what I want to achieve from dataBound if checked='yes' node is selected and disable(apply k-state-disable) from edit. I try to set (selected,true) & (disabled,true) but seem it not working.

在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");
      } 
    }
  },

});

推荐答案

我想提出另一种方法来实现这一目标.尽可能避免在dataBound中更改DOM.因此，我建议使用 itemTemplate 选项和 select 事件:

I want to suggest another way for achieve that. Avoid changing DOM in dataBound whenever possible. So I would like to suggest using itemTemplate option and select event:

您可以在itemTemplate选项中应用.k-state-disabled类:

You can apply .k-state-disabled class within the itemTemplate option:

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

这将使该选项看起来像已禁用.但是仍然可以在列表中选择它，因此您可以使用select事件来防止这种情况:

That will make the option look like disabled. But it is still possible to select it in the list, so you can use select event to prevent that:

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

在该事件中使用e.preventDefault()将阻止用户选择与条件匹配的选项.

Using e.preventDefault() inside that event will prevent user from selecting the option which matches the condition.

更新了演示

这篇关于Kendo MultiSelect生成要选择和禁用的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！