Kendo模板条件格式
Kendo模板条件格式
提问于 2012-06-15 01:53:59
免责声明：这最初是KendoUI论坛的posted，但没有收到任何答复。
我正尝试在ListView的模板中使用元素的条件格式。这个局部视图使用共享的DataSource来允许通过寻呼机、双卡ListView和前面提到的模板进行导航。相关模板代码如下：
<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>
我已经尝试了几种不同的方法来生成这段代码，包括简单的if和反向检查，比如if (Salutation != null && Salutation != '')，但都没有用。我想我遗漏了一些关于如何在#if部分中引用数据源的数据的内容？我尝试了像if (#=Salutation# != null && #=Salutation# != '')这样的东西，但是抛出了一个严重的模板错误。
下面是输出：
注意:忽略可怕的格式。这是预定义样式。
下面是整个文件，供参考：
@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;
//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() < 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"));
}
}
});
});
</script>Kendo TL；DR：如何获取模板以基于数据源成员的值构建其内容？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-15 03:39:57
尝试用单引号将null括起来：
...
#if (Title != 'null' && Title != '') { #
<p>#=Title# </p>
# } #
...这种表示法可以作为另一种选择，尽管标签被留在了后面。它可以根据你想要实现的格式来工作。
<p>${ Title != 'null' && Title != '' ? Title : ''} </p>Stack Overflow用户
发布于 2014-08-08 00:00:44
我知道这是旧的，但我使用的另一个解决方案是：
@(Html.Kendo().Grid<Object>()
.Name("dataGrid")
.DataSource(ds =>
ds.Ajax()
.Read(r => r.Action("Action", "Controller", new { area = "area" }))
.ServerOperation(true)
.PageSize(50)
)
.Columns(cols =>
{
cols.Bound(t => t.Property);
})
.Resizable(resizeable => resizeable.Columns(true))
.Scrollable(t => t.Virtual(true))
.Sortable()
.Filterable()
.ColumnMenu()
.HtmlAttributes(new { style = "height:98%;width:100%;", @class="cssClass" })
.Events(e => e.DataBound("onDataBound"))
.Deferred()
.ClientRowTemplate("<tr>" +
"#=checkNull(Property)#" +
"</tr>")
)然后，您可以添加一个JavaScript函数来检查属性。
function checkNull(item) {
return item === null ? "" : item;
}这非常令人沮丧，所以它可能会对其他人有所帮助。显然，您可以更改该函数以检查您喜欢的任何内容。
Stack Overflow用户
发布于 2015-04-28 20:47:31
对于快捷方式，您只需使用：
# if(property){ #
#: property #
# } #如果要根据值(非空字符串或null)显示/隐藏
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11038651
复制相关文章
相似问题