title: Kendo template conditional formatting
body: <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>