Kendo UI Grid Anuglar Cell Color

Question

我有一个使用Kendo UI Grid的Angular 2应用程序。在那里我有一个表格显示一些数据（整数值）。是否有可能根据其类型为每个单元着色？也许根据类型为每个单元添加css类？

现在，数据看起来像这样[{“a”：4，“b”= 35，...}，{...}，....]我也有每种元素的类型，但是尚未保存在数据网格中。

Answer 1

我有一个建议，它仍然在纯JS剑道的形式（但你应该能够做到这一点的角2剑道），通过使用schema.parse或角2：从后端获取数据后你可以在从休息端点检索数据之后添加附加字段。随机

schema: { 
    parse : function(response){ 
     var colors = [ 
      'red', 
      'green', 
      'blue', 
      'yellow' 
     ]; 
     //loop through all you data, add adding aditional field. 
     //also here i randomize the color for each cell 
     for(var i = 0; i< response.d.results.length; i++){ 
     response.d.results[i].cell1 = colors[ Math.floor(Math.random()*colors.length)]; 
     response.d.results[i].cell2 = colors[ Math.floor(Math.random()*colors.length)]; 
     response.d.results[i].cell3 = colors[ Math.floor(Math.random()*colors.length)]; 
     response.d.results[i].cell4 = colors[ Math.floor(Math.random()*colors.length)]; 
     } 

     return response 
    } 
} 

添加你的逻辑在我的情况的循环，我只是指定颜色里面。然后你可以使用它像这个类的行模板（看小区1，小区2，小区3，小区4属性）在kendo-angular2 reference detail row template ：

<script id="rowTemplate" type="text/x-kendo-tmpl"> 
    <tr data-uid="#: uid #"> 
     <td class="photo #=data.cell1#"> 
      <img src="../content/web/Employees/#:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" /> 
     </td> 
     <td class="details #=data.cell2#"> 
      <span class="name">#: FirstName# #: LastName# </span> 
      <span class="title">Title: #: Title #</span> 
     </td> 
    <td class="country #=data.cell3#"> 
      #: Country # 
     </td> 
     <td class="employeeID #=data.cell4#"> 
      #: EmployeeID # 
     </td> 
    </tr> 
</script> 

然后添加CSS

<style> 
    .red { 
     background-color: red; 
    } 
    .green { 
     background-color: green; 
    } 
    .blue { 
     background-color: blue; 
    } 
    .yellow { 
     background-color: yellow; 
    } 
</style> 

工作示例dojo