如何编辑Kendo UI Multiselect药片

Question

使用Kendo UI multiselect，它们已经内置在药丸容器中...您可以指定特定的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没有一个家长选择去将从tagTemplate添加到父项<li>，将样式应用到内容/ tagTemplate本身并不包含整个标签。不过，它可以使用JavaScript完成。

我已经更新附加到复选的变化情况来执行一些JavaScript的背景颜色应用于父基于项目的一些任意值所选项目的<li>的例子。在我的示例中，我将公司名称添加到tagTemplate的数据值，并且我的JavaScript触发器会根据名称应用不同的颜色。

更新了tagTemplate包括项目的公司名称：

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。