Template conditional formatting problem

2 posts, 0 answers
  1. Jesse
    Jesse avatar
    4 posts
    Member since:
    Apr 2012

    Posted 13 Jun 2012 Link to this post

    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>
  2. Jesse
    Jesse avatar
    4 posts
    Member since:
    Apr 2012

    Posted 14 Jun 2012 Link to this post

    So I never got an answer, but I reposted to StackOverflow and a kind person helped out! The solution
  3. Kendo UI is VS 2017 Ready
Back to Top