如何在 kendo UI 中为不同的列表视图项设置不同的颜色答案

【问题标题】：How to set different color for different listview item in kendoUI如何在 kendo UI 中为不同的列表视图项设置不同的颜色
【发布时间】：2015-04-07 11:47:12
【问题描述】：

我在 Listview 中显示项目如下：

如何根据状态显示不同颜色的listview item？例如

这是我已经实现的示例剑道 ui 代码。

<script type="text/x-kendo-tmpl" id="template">
  <div class="product">
    <h3>#:CustomerVersion#</h3>
    <h5>#:Rank#</h5>
    <h3>#:AccountType#</h3>
  </div>
</script>


<div class="demo-section">
  @Code Dim listName = "List" Dim listViewRankBar = Html.Kendo().ListView(Of RankBarModel)() With listViewRankBar .Name(listName) .TagName("div") .ClientTemplateId("template") .DataSource(Sub(datasource) datasource.Read(Sub(read) read.Action("Products_Read",
  "RankBar")) datasource.PageSize(15) End Sub) .Selectable(Sub(selectable) selectable.Enabled(True) selectable.Mode(ListViewSelectionMode.Single) End Sub) .Events(Sub(events) events.Change("onChange").DataBound("onDataBound") End Sub) '.Pageable() End
  With End Code @listViewRankBar
</div>

【问题讨论】：

标签： listview model-view-controller kendo-ui kendo-asp.net-mvc

【解决方案1】：

假设您的状态字段为Status，则类似于：

<script type="text/x-kendo-tmpl" id="template">
  <div class="product #if (Status == 'Active') {# active #} else {# inactive #}#">
    <h3>#:CustomerVersion#</h3>
    <h5>#:Rank#</h5>
    <h3>#:AccountType#</h3>
  </div>
</script>

可以在此处找到运行示例：http://dojo.telerik.com/@mmillican/iDOSu

【讨论】：