केंडो टेम्पलेट सशर्त स्वरूपण

Question

अस्वीकरण: यह मूल रूप से posted केंडोयूआई मंचों पर था, लेकिन इसका कोई जवाब नहीं मिला है।

मैं अपने ListView के टेम्पलेट में तत्वों के सशर्त स्वरूपण का उपयोग करने का प्रयास कर रहा हूं। यह आंशिक दृश्य एक साझा डेटा स्रोत का उपयोग करता है ताकि पैगर, दो-कार्ड सूची दृश्य, और उपर्युक्त टेम्पलेट के माध्यम से नेविगेशन को अनुमति दी जा सके। यहाँ प्रासंगिक टेम्पलेट कोड है:

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

मैं इस कोड जनरेट, if (Salutation != null && Salutation != '') की तरह लेकिन कोई लाभ नहीं हुआ उल्टे चेकों के साथ एक सरल है, तो शामिल है, के कई अलग अलग तरीकों की कोशिश की है। मुझे लगता है कि #if सेक्शन में डेटासोर्स के डेटा को संदर्भित करने के बारे में मुझे कुछ याद आ रहा है? मैंने if (#=Salutation# != null && #=Salutation# != '') की तरह कुछ करने की कोशिश की लेकिन इससे एक खराब टेम्पलेट त्रुटि आई।

नोट::

यहाँ उत्पादन है भयानक स्वरूपण ध्यान न दें। यह पूर्व स्टाइल है। मैं यह डेटा स्रोत के सदस्यों के मूल्य के आधार पर ऐसी सामग्री बनाने के लिए एक केंडो टेम्पलेट कैसे मिलता है:;:

यहाँ संदर्भ के लिए पूरी फ़ाइल है, डॉ

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

टी एल?

Answer 1

एकल उद्धरण में अशक्त लपेटकर का प्रयास करें:

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

इस टिप्पणी एक विकल्प के रूप में इस्तेमाल किया जा सकता है, हालांकि टैग के पीछे छोड़ दिया जाता है। यह इस बात पर निर्भर करता है कि आप किस प्रकार का प्रारूप प्राप्त करने की कोशिश कर रहे हैं।

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

Answer 2

मैं जानता हूँ कि यह पुराना है, लेकिन एक और समाधान मैं का इस्तेमाल किया है निम्नलिखित है:

@(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>") 
) 

उसके बाद, आप संपत्ति की जांच करने के लिए एक जावास्क्रिप्ट समारोह जोड़ सकते हैं।

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

यह काफी निराशाजनक था, इसलिए यह किसी और की मदद कर सकता है। जाहिर है, आप जो भी चाहें उसकी जांच करने के लिए फ़ंक्शन को बदल सकते हैं।

Answer 3

शॉर्टकट के लिए आप बस का उपयोग कर सकते हैं:

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

आप मूल्य (खाली नहीं स्ट्रिंग या नल)

Answer 4

पर निर्भर करता है/छिपाने दिखाना चाहते हैं तो मुझे लगता है यह तथापि एक पुराने धागा है मेरी उत्तर किसी के लिए उपयोगी हो सकता है।

आप इनलाइन की तरह अपने सशर्त, श्रृंखला कर सकते हैं:

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