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:
I've tried several different ways of generating this code, including a simple if with inverted checks like
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
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:
<
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
>
if (Salutation != null && Salutation != '')
if (#=Salutation# != null && #=Salutation# != '')
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
>