Formattazione condizionale modello Kendo

Question

Declinazione di responsabilità: Originariamente era posted nei forum di KendoUI, ma non ha ricevuto risposta.

Sto cercando di utilizzare la formattazione condizionale degli elementi nel modello di ListView. Questa vista parziale utilizza un DataSource condiviso per consentire la navigazione tramite Pager, un ListView a due carte e il modello sopra menzionato. Ecco il codice del modello in questione:

<script id="contact-template" type="text/x-kendo-template"> 
<div id="ContactCard" class="IsActive${IsActive}"> 
    #if (Salutation === null || Salutation === '') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4> 
    #if (Title === null || Title === '') {##}else{#<p>#=Title#</p>#}# 
    <br /> 
    #if (Email == 0 || Email === '') {##}else{#<p><a href='mailto:#=LastName#,%20#=FirstName#%20<#=Email#>'>#=Email#</a></p>#}# 
    #if (Phone === null || Phone === '') {##}else{#<p>#=Phone##if (Extension === null || Extension === '') {#</p>#}else{# ext. #=Extension#</p>#}##}# 
</div> 

Ho provato diversi modi di generare questo codice, tra cui una semplice se con controlli invertiti come if (Salutation != null && Salutation != '') ma senza alcun risultato. Penso che mi manchi qualcosa su come fare riferimento a dati di DataSource dalla sezione #if? Ho provato qualcosa come if (#=Salutation# != null && #=Salutation# != '') ma questo ha generato un errore di modello errato.

ecco l'output:

Nota: ignorare la formattazione orribile. Questo è pre-styling.

Ecco l'intero file, per riferimento:

@model int @* accountId *@ 

<article id="contactArticle"> 
    <div id="contactList"></div> 
    <footer><span id="pagerTotal"></span><a href="#" class="k-link" id="pageLeft" onclick="pageLeftOne()"><</a><div id="pager"></div><a href="#" class="k-link" id="pageRight" onclick="pageRightOne()">></a></footer> 
</article> 
<script id="contact-template" type="text/x-kendo-template"> 
    <div id="ContactCard" class="IsActive${IsActive}"> 
     #if (Salutation === null || Salutation === '') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4> 
     #if (Title === null || Title === '') {##}else{#<p>#=Title#</p>#}# 
     <br /> 
     #if (Email == 0 || Email === '') {##}else{#<p><a href='mailto:#=LastName#,%20#=FirstName#%20<#=Email#>'>#=Email#</a></p>#}# 
     #if (Phone === null || Phone === '') {##}else{#<p>#=Phone##if (Extension === null || Extension === '') {#</p>#}else{# ext. #=Extension#</p>#}##}# 
    </div> 
</script> 
<script type="text/javascript"> 
    var currentPage = 1; 
    var pages; 
    var contactDataSource; 

    //SNIP// 

    $(document).ready(function() { 
     var init = 1; 
     contactDataSource = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: '@Url.Action("ContactPager", "Contact")', 
        dataType: "json", 
        type: "POST", 
        timeout: 2000, 
        data: { 
         accountId: @Model 
        } 
       } 
      }, 
      schema: { 
       data: "data", 
       total: "total", 
       type: "json", 
       model: { 
        fields: { 
         Id: { type: "string"}, 
         FirstName: { type: "string" }, 
         LastName: { type: "string"}, 
         Title: { type: "string", defaultValue: ''}, 
         Salutation: { type: "string", defaultValue: ''}, 
         Extension: { type: "string", defaultValue: ''}, 
         Phone: { type: "string", defaultValue: ''}, 
         Email: { type: "string", defaultValue: ''}, 
         IsActive: {type: "boolean"} //, 
         //ReceivesDistributionEmails: {type: "boolean"} 
        } 
       } 
      }, 
      pageSize: 2 
     }); 

     contactDataSource.read(); 

     contactDataSource.bind("change", function(e) { 
      if (init) { 
       init = 0; 
       if (contactDataSource.total() < 1) { 
        //SNIP 

       } else { 
        $("#pager").kendoPager({ 
         dataSource: contactDataSource, 
         buttonCount: 5 
        }); 
        //SNIP//  
        pages = $("#pager").data("kendoPager").dataSource.totalPages(); 

        $("#contactList").kendoListView({ 
         dataSource: contactDataSource, 
         pageable: true, 
         template: kendo.template($("#contact-template").html()) 
        }); 
        kendo.init($("#contactList")); 
       } 
      } 
     }); 
    }); 

</script> 

TL; DR: Come faccio ad avere un modello di Kendo a costruire è il contenuto sulla base del valore dei componenti di origine dati?

Answer 1

Prova avvolgendo il nulla tra apici:

... 
#if (Title != 'null' && Title != '') { # 
    <p>#=Title# </p> 
# } # 
... 

Questa notazione può essere utilizzato come alternativa, anche se i tag sono lasciati alle spalle. Potrebbe funzionare a seconda del tipo di formato che stai cercando di raggiungere.

<p>${ Title != 'null' && Title != '' ? Title : ''} </p> 

Answer 2

So che questo è vecchio, ma un'altra soluzione che ho utilizzato è il seguente:

@(Html.Kendo().Grid<Object>() 
    .Name("dataGrid") 
    .DataSource(ds => 
     ds.Ajax() 
      .Read(r => r.Action("Action", "Controller", new { area = "area" })) 
      .ServerOperation(true) 
      .PageSize(50) 
      ) 
    .Columns(cols => 
    { 
     cols.Bound(t => t.Property); 
    }) 
    .Resizable(resizeable => resizeable.Columns(true)) 
    .Scrollable(t => t.Virtual(true)) 
    .Sortable() 
    .Filterable() 
    .ColumnMenu() 
    .HtmlAttributes(new { style = "height:98%;width:100%;", @class="cssClass" }) 
    .Events(e => e.DataBound("onDataBound")) 
    .Deferred() 
    .ClientRowTemplate("<tr>" + 
      "#=checkNull(Property)#" + 
      "</tr>") 
) 

Quindi, è possibile aggiungere una funzione di JavaScriptper controllare la proprietà.

function checkNull(item) { 
     return item === null ? "" : item; 
    } 

E 'stato molto frustrante, quindi potrebbe aiutare qualcun altro. Ovviamente, puoi modificare la funzione per verificare quello che vuoi.

Answer 3

Per un collegamento si può semplicemente utilizzare:

# if(property){ # 
#: property # 
# } # 

Se desideri mostrare/nascondere a seconda del valore (stringa non vuota o null)

Answer 4

Mi rendo conto che questo è un vecchio filo comunque la mia la risposta può essere utile a qualcuno.

È possibile concatenare i tuoi condizionali in linea in questo modo:

groupHeaderTemplate: "${ value == 'D' ? 'Declined' : value == 'P' ? 'Pending' : value == 'A' ? 'Approved' : value }"