如何编辑 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>，样式需要应用到该父选择器，因为将样式应用于内容/tagTemplate 本身不包含整个标签。不过，它可以使用 javascript 来完成。

我已更新示例以附加到 Multiselect 的更改事件以执行一些 javascript 以根据任意值将背景颜色应用于所选项目的 parent <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。