Wie kann ich das bestimmte Element in einer Kendo UI ListView hervorheben?

Question

Ich habe einen UI Listview Kendo in einer tabellarischen Anzeige implementiert, wie unten:

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

Ich mag würde die 6000 Zelle markieren, die die Produktionsdaten für user2 ist. Ich kann die ganze Spalte markieren, indem ich den folgenden Code benutze, aber ich möchte nur ein einzelnes Element (Zelle) hervorheben. Ich benutze Kendo UI für asp.net MVC. Wie kann ich das mit JavaScript/jquery tun?

<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

die Zelle Hervorhebungen ist so einfach wie eine Klasse, um es (in der Client-Vorlage) zuweisen:

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

Dann können Sie sich bewerben, was Styling Sie .highlighted in Ihrem CSS-Datei der Klasse wollen . Aber ich nehme an, Sie möchten diese Zelle anhand eines Kriteriums hervorheben. In diesem Fall können Sie Ihrem Ansichtsmodell ein neues boolesches Flag hinzufügen, das Flag in Ihrem Controller auf true setzen, wenn die Produktion basierend auf den Kriterien hervorgehoben werden muss, und die Klasse .highlighted nur hinzufügen, wenn das Flag auf true gesetzt ist . Wie unten:

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