剣道UI ListViewの特定の項目をどのように強調表示できますか？

Question

以下のように私は、表形式の表示で実装剣道UIのリストビューを持っている：私はuser2のための生産データである6000のセルを強調したいと思い

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

。以下のコードを使用して列全体をハイライト表示できますが、1つの項目（セル）のみを強調表示したいと思います。私はasp.net MVC用の剣道UIを使用しています。 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に設定し、条件に基づいてプロダクションを強調表示する必要がある場合は.highlightedクラスを追加して、フラグがtrueに設定されている場合のみ追加できます。以下のように：

<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>