Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Template conditional formatting problem

1 Answer 2013 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Jesse asked on 13 Jun 2012, 04:56 PM
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:
<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>
I've tried several different ways of generating this code, including a simple if with inverted checks like
if (Salutation != null && Salutation != '')
 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
if (#=Salutation# != null && #=Salutation# != '')
but that threw a bad template error.

Here's the output
Note: disregard the horrible formatting. This is pre-styling.

Here's the whole file, for reference:
@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;
     
    function pageLeftOne() {
        currentPage = (currentPage - 1) % pages;
        if (currentPage === 0) {
            currentPage = pages;
        }
        contactDataSource.page(currentPage);
    };
 
    function pageRightOne() {
        currentPage = (currentPage + 1) % pages;
        if (currentPage === 0) {
            currentPage = pages;
        }
        contactDataSource.page(currentPage);
    };   
     
    $(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) {
                    var pager = document.getElementById("pager");
                    pager.parentNode.removeChild(pager);
                    var left = document.getElementById("pageLeft");
                    left.parentNode.removeChild(left);
                    var right = document.getElementById("pageRight");
                    right.parentNode.removeChild(right);
                    var pagerTotal = document.getElementById("pagerTotal");
                    pagerTotal.parentNode.removeChild(pagerTotal);
 
                    var createDiv = document.createElement('div');
                    createDiv.appendChild(
                        document.createTextNode("@Resources.Contact.Contact.NoneFound"));
 
                    var list = document.getElementById("contactList");
                    list.parentNode.replaceChild(createDiv, list);
 
                } else {
                    $("#pager").kendoPager({
                        dataSource: contactDataSource,
                        //selectTemplate: '<li><span class="k-state-active">Contacts: ' + contactDataSource.total() + '   Page #=text# of ' + this.totalPages() + '</span></li>',
                        //linkTemplate: '',
                        buttonCount: 5  //1
                    });
 
                    $("#pagerTotal").text('Contacts: ' + contactDataSource.total());
 
                    pages = $("#pager").data("kendoPager").dataSource.totalPages();
 
                    $("#contactList").kendoListView({
                        dataSource: contactDataSource,
                        pageable: true,
                        template: kendo.template($("#contact-template").html())
                    });
                    kendo.init($("#contactList"));
                }
            }
        });
    });
 
</script>

1 Answer, 1 is accepted

Sort by
0
Jesse
Top achievements
Rank 1
answered on 14 Jun 2012, 09:22 PM
So I never got an answer, but I reposted to StackOverflow and a kind person helped out! The solution
Tags
Templates
Asked by
Jesse
Top achievements
Rank 1
Answers by
Jesse
Top achievements
Rank 1
Share this question
or