如何设置不同的颜色不同的列表视图项在kendoUI

Question

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

如何显示不同的颜色根据状态列表视图项目的？例如

下面是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