如何在剑道 UI 中为不同的列表视图项设置不同的颜色

Question

我在列表视图中显示项目如下：

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

这是我实现的示例 kendo 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>

Answer 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

如何在剑道 UI 中为不同的列表视图项设置不同的颜色

How to set different color for different listview item in kendoUI

model-view-controller

listview

kendo-ui

kendo-asp.net-mvc