KendoUI Multiselect Удалить несколько

Question

Я использую Kendo UI Multiselect: http://demos.kendoui.com/web/multiselect/events.html

У меня есть эти данные:

var data =
    [
        { text: "Shirt-Black", value: "1" },
        { text: "Shirt-Brown", value: "2" },
        { text: "Shirt-Blue", value: "3" },
        { text: "Cap-Green", value: "4" },
        { text: "Cap-Red", value: "5" },
        { text: "Cap-White", value: "6" },
        { text: "Jacket-Denim", value: "7" }
    ];

Теперь я хочу, чтобы, если я выбрал "Рубашка коричневого цвета", остальные записи для рубашки, то есть "Рубашка черного цвета" и "Рубашка голубого цвета", не должны отображаться в списке, что означает, что пользователь не должен иметь возможность выбрать рубашку из двух цвета.

Точно так же, если была выбрана "Кепка" любого цвета, тогда пользователь не сможет выбрать "Кепку" любого другого цвета.

Есть ли способ добиться этого?

Answer 1

Это не встроенная функциональность. Вы даже не можете использовать метод dataSource filter(), поскольку он также удалит выбранные элементы из списка.

Тем не менее, этот код будет делать то, что вы просите:

$("#select").kendoMultiSelect({
    ...
    change: function(e) {
      var dataItems = e.sender.dataItems();
      var categories = [];

      for(var i = 0; i < dataItems.length; i++){
        var category = dataItems[i].text.substring(0, dataItems[i].text.indexOf('-'));
        categories.push(category);
      }

      e.sender.ul.find('li').each(function(index, value){
        var $li = $(value);
        var hidden = false;
        for(var i = 0; i < categories.length; i++){
          var category = categories[i];
          if ($li.text().match("^" + category)){
            $li.css('display', 'none');
            hidden = true;
          }
        }
        if(!hidden){
          $li.css('display', 'list-item');
        }
      });
    }
});

Рабочая KendoUi Dojo: http://dojo.telerik.com/AGisi