Как отредактировать таблетки Kendo UI Multiselect

Question

С мультиспектром Kendo UI они создали контейнеры для таблеток ... вы можете указать конкретные tagTemplates, но это просто изменяет то, что находится внутри контейнера для таблеток, а не сама таблетка.

Мне интересно, сможет ли кто-нибудь узнать, как настроить фактическую таблетку выбранного предмета.

Благодарим за помощь.

Answer 1

Вы можете использовать CSS стиль вашего выбора на соответствующий селектор, т.е.

.k-multiselect li.k-button { 
    border-radius: 50px; 
    border-style: ridge; 
    border-width: 2px; 
    background-color: deeppink; 
} 

Пример: http://dojo.telerik.com/@Stephen/AyEKE

Редактировать основанный на комментарий CSS не имеет родительского селектор, чтобы пойти up от tagTemplate до родителя <li>, к которому должен применяться стиль, поскольку применение стиля к тегу content/tagTemplate не охватывает весь тег. Однако это можно сделать с помощью javascript.

Я обновил пример для присоединения к событию изменения в Множественном выполнить некоторые JavaScript, чтобы применить цвет фона для родителя<li> выбранных элементов на основе некоторой произвольной величины элемента. В моем примере я добавил значение CompanyName в tagTemplate значение данных и триггеры javascript для этого, чтобы применить другой цвет, основанный на имени.

Обновленный tagTemplate включить CompanyName пунктов:

tagTemplate: '<span data-companyname="#:data.CompanyName#"... 

И добавил обработчик изменения событий для множественного выбора, который находит родительский узел и применяет стиль:

change: function (e) { 
        var selectedTags = $(".k-multiselect li.k-button"); 
        for (var i = 0; i < selectedTags.length; i++) { 
         var tag = $(selectedTags[i]); 
         var item = $(tag.find("span.selected-value")); 
         if (item.data("companyname") === "Alfreds Futterkiste") { 
         tag.css({ "background-color": "deeppink" }); 
         } 
         if (item.data("companyname") === "Ana Trujillo Emparedados y helados") { 
         tag.css({ "background-color": "green" }); 
         } 
         // ... 
        } 
        } 

Теперь, это не обязательно лучший способ реализовать javascript, но я верю, что у вас есть, чтобы использовать javascript.