Databases
StackOverflow2013
Postsdbo
POKendo template conditional formatting
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKendo template conditional formatting
    text
    copied!<p><strong>Disclaimer:</strong> This was originally <a href="http://www.kendoui.com/forums/framework/templates/template-conditional-formatting-problem.aspx#2145567" rel="noreferrer" title="posted">posted</a> to the KendoUI forums, but has received no answers.</p> <p>I'm trying to use conditional formatting of elements in my ListView's template. This partial view uses a shared DataSource to allow navigation via Pager, a two-card ListView, and the aforementioned template. Here's the relevant template code:</p> <pre><code>&lt;script id="contact-template" type="text/x-kendo-template"&gt; &lt;div id="ContactCard" class="IsActive${IsActive}"&gt; #if (Salutation === null || Salutation === '') {#&lt;h4&gt;#}else{#&lt;h4&gt;#=Salutation# #}##=FirstName# #=LastName#&lt;/h4&gt; #if (Title === null || Title === '') {##}else{#&lt;p&gt;#=Title#&lt;/p&gt;#}# &lt;br /&gt; #if (Email == 0 || Email === '') {##}else{#&lt;p&gt;&lt;a href='mailto:#=LastName#,%20#=FirstName#%20&lt;#=Email#&gt;'&gt;#=Email#&lt;/a&gt;&lt;/p&gt;#}# #if (Phone === null || Phone === '') {##}else{#&lt;p&gt;#=Phone##if (Extension === null || Extension === '') {#&lt;/p&gt;#}else{# ext. #=Extension#&lt;/p&gt;#}##}# &lt;/div&gt; </code></pre> <p></p> <p>I've tried several different ways of generating this code, including a simple if with inverted checks like <code>if (Salutation != null &amp;&amp; Salutation != '')</code> but to no avail. I think I'm missing something about how to reference a DataSource's data from within the #if section? I tried something like <code>if (#=Salutation# != null &amp;&amp; #=Salutation# != '')</code> but that threw a bad template error.</p> <p>Here's the output:</p> <p><img src="https://i.stack.imgur.com/cdTSU.png" alt="output"></p> <p>Note: disregard the horrible formatting. This is pre-styling.</p> <p>Here's the whole file, for reference:</p> <pre><code>@model int @* accountId *@ &lt;article id="contactArticle"&gt; &lt;div id="contactList"&gt;&lt;/div&gt; &lt;footer&gt;&lt;span id="pagerTotal"&gt;&lt;/span&gt;&lt;a href="#" class="k-link" id="pageLeft" onclick="pageLeftOne()"&gt;&lt;&lt;/a&gt;&lt;div id="pager"&gt;&lt;/div&gt;&lt;a href="#" class="k-link" id="pageRight" onclick="pageRightOne()"&gt;&gt;&lt;/a&gt;&lt;/footer&gt; &lt;/article&gt; &lt;script id="contact-template" type="text/x-kendo-template"&gt; &lt;div id="ContactCard" class="IsActive${IsActive}"&gt; #if (Salutation === null || Salutation === '') {#&lt;h4&gt;#}else{#&lt;h4&gt;#=Salutation# #}##=FirstName# #=LastName#&lt;/h4&gt; #if (Title === null || Title === '') {##}else{#&lt;p&gt;#=Title#&lt;/p&gt;#}# &lt;br /&gt; #if (Email == 0 || Email === '') {##}else{#&lt;p&gt;&lt;a href='mailto:#=LastName#,%20#=FirstName#%20&lt;#=Email#&gt;'&gt;#=Email#&lt;/a&gt;&lt;/p&gt;#}# #if (Phone === null || Phone === '') {##}else{#&lt;p&gt;#=Phone##if (Extension === null || Extension === '') {#&lt;/p&gt;#}else{# ext. #=Extension#&lt;/p&gt;#}##}# &lt;/div&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; 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() &lt; 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")); } } }); }); &lt;/script&gt; </code></pre> <p><strong>TL;DR:</strong> How do I get a Kendo template to build it's content based on the value of the datasource members? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload