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