如何突出顯示Kendo UI ListView中的特定項目？

Question

我在如下表格顯示實現的劍術UI的ListView：

Name   user1 user2 user3 
country  usa  uk  germany 
production  5000 6000  1000 
Sales   200  400  100 

我想強調的6000細胞，其是生產數據對用戶2。我可以使用下面的代碼突出顯示整列，但我只想突出顯示單個項目（單元格）。我正在使用Kendo UI進行asp.net MVC。我如何使用JavaScript/jQuery來做到這一點？

<script> 
    $(function() { 
TestHub.client.highlightValue = function (id) { 
     var listView = $("#ListView_Test").data("kendoListView"); 
     listView.element.children("[data-uid='" + listView.dataSource.view()[2].uid + "']").effect("highlight", { color: Red}, 500); 
}) 
}; 
</script> 


    <div class="k-widget"> 
       <dl> 
        <dd>Name</dd> 
        <dd>Country</dd> 
        <dd>Production</dd> 
        <dd>Sales</dd> 
       </dl> 
      </div> 
@(Html.Kendo().ListView<Test.Models.TestViewModel>() 
    .Name("Test_LV") 
    .TagName("div") 
    .ClientTemplateId("templateTestLV") 
        .DataSource(dataSource => dataSource 
         .SignalR() 
         .Transport(tr => tr 
          .Promise("hubStart") 
           .Hub("TestHub") 
           .Client(c => c.Read("TestLV_Read").Update("TestLV_Update")) 
           .Server(s => s.Read("TestLV_Read").Update("TestLV_Update")) 
          ) 
         .Schema(schema => schema 
         .Model(m => 
         { 
          m.Id(p => p.Id); 

          m.Field(p => p.Name).Editable(false); 
          m.Field(p => p.Country).Editable(false); 
          m.Field(p => p.Production).Editable(false); 
          m.Field(p => p.Sales).Editable(false); 
         }) 
        ) 
        ) 
          .Editable(editable => editable.TemplateName("TestLVEditor")) 
      ) 
<script type="text/x-kendo-tmpl" id="templateTestLV"> 
    <div> 
     <dl> 
      <dd>#=Name</dd> 
      <dd>#=Country</dd> 
      <dd>#=Production</dd> 
      <dd>#=Sales</dd> 
     </dl> 
     <div class="edit-buttons"> 
      <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a> 
     </div> 
    </div> 
</script> 

Answer 1

突出顯示單元是將類分配給它（在客戶端模板）一樣簡單：那

<script type="text/x-kendo-tmpl" id="templateTestLV"> 
    <div> 
     <dl> 
      <dd>#=Name</dd> 
      <dd>#=Country</dd> 
      <dd class="highlighted">#=Production</dd> 
      <dd>#=Sales</dd> 
     </dl> 
     <div class="edit-buttons"> 
      <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a> 
     </div> 
    </div> 
</script> 

，你可以在你的CSS文件應用於任何你想要的造型到類.highlighted 。但是，我假設你想根據一個標準突出顯示該單元格。在這種情況下，您可以爲視圖模型添加一個新的布爾標誌，如果生產需要根據標準突出顯示，請在控制器中將該標誌設置爲true，並且只有在標誌設置爲true時才添加.highlighted類。如下所示：

<script type="text/x-kendo-tmpl" id="templateTestLV"> 
    <div> 
     <dl> 
      <dd>#=Name</dd> 
      <dd>#=Country</dd> 
      <dd class="#=(IsHighlighted == true ? \"highlighted\" : \"\")#">#=Production</dd> 
      <dd>#=Sales</dd> 
     </dl> 
     <div class="edit-buttons"> 
      <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a> 
     </div> 
    </div> 
</script>