Kendo UI下拉列表 - 每个列表项的不同背景颜色

时间:2014-04-14 09:05:11

标签: kendo-ui kendo-dropdown

如何在Kendo UI下拉列表中为每个列表项(未选中)提供不同的背景颜色,而不是为整个下拉列表提供常见的背景颜色?

1 个答案:

答案 0 :(得分:2)

您应该定义一个设置适当颜色的模板。

示例:

将DataSource定义为:

var colors = [
    "red",
    "green",
    "pink",
    "blue",
    "yellow"
];

模板为:

<script id="template" type="text/kendo-script">
    <div style="background-color: #= data #">#= data #</div>
</script>

然后您的下拉列表定义应为:

var template = kendo.template($("#template").html())
$("#dropdownlist").kendoDropDownList({
    dataSource: colors,
    template : template
});

这里的工作示例:http://jsfiddle.net/OnaBai/MzLrS/