定制Kendo UI的网格
问题描述:
默认Kendo网格显示列的值,但我想定制它。例如,我想为一列的每个值显示一个图标。 我的网格中有一列显示激活或失活的状态。我不想显示“true”或“false”,而是显示适合它的图标。 我在网格中使用了“.Template()”,但“.Template”中的代码没有触发! 我该如何解决这个问题?定制Kendo UI的网格
<div style="width: 100%;">
@(Html.Kendo().Grid<Jahan.Blog.Model.Article>()
.Name("ArticleAdmin").Navigatable()
.Resizable(c => c.Columns(true))
.HtmlAttributes(new { @class = "cursorLink", @style = "width: 1000px;height:auto;overflow: scroll;" })
.Columns(columns =>
{
columns.Bound(p => p.UserId).Width(100);
columns.Bound(p => p.Title).Width(200);
//columns.Bound(p => p.Summary).Width(140);
//columns.Bound(p => p.Description).Width(100);
columns.Bound(p => p.LikeCounter).Width(100);
columns.Bound(p => p.RateCounter).Width(100);
// Please attention to this
columns.Bound(p => p.IsActive).Template(p => @Html.ShowIcon(p.IsActive)).Width(80);
columns.Bound(p => p.IsActiveNewComment).Width(170);
columns.Bound(p => p.CreatedDate).Width(160).Format("{0:G}");
columns.Bound(p => p.ModifiedDate).Width(160).Format("{0:G}");
columns.Command(command => command.Destroy()).Width(170);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create("Editing_Create", "ArticleAdmin")
.Read("Editing_Read", "ArticleAdmin")
.Update("Editing_Update", "ArticleAdmin")
.Destroy("Editing_Destroy", "ArticleAdmin")
))
</div>
请注意我的这部分代码:
columns.Bound(p => p.IsActive).Template(p => @Html.ShowIcon(p.IsActive)).Width(80);
和
public static MvcHtmlString ShowIcon(this HtmlHelper html, bool isActive, string text = "", string activeCssClass = "glyphicon glyphicon-ok", string inactiveCssClass = "glyphicon glyphicon-remove")
{
StringBuilder result = new StringBuilder();
TagBuilder span = new TagBuilder("span");
span.SetInnerText(text);
if (isActive)
{
span.AddCssClass(activeCssClass);
}
else
{
span.AddCssClass(inactiveCssClass);
}
result.Append(span);
return MvcHtmlString.Create(result.ToString());
}
答
您可以用ClientTemplate
做法如下:
columns.Bound(p => p.IsActive)
.ClientTemplate("<img src='/Content/#= IsActive ? 'tick.png' : 'cross.png' #''>");
以上只是检查IsActive
属性并显示刻度线或十字图像。
答
columns.Bound(p => p.IsActive).ClientTemplate("#= showIcon(IsActive) #").Width(80);
JavaScript函数:
function showIcon(isActive) {
var result = "";
if (isActive == true) {
result = "<img src='/Content/tick.png'/>";
} else {
result = "<img src='/Content/cross.png'/>";
}
return result;
}
更多信息,请点击How do I use a JavaScript function in a column client template?
Thanks.It的正确的,但如果我想IsActive值传递给函数,并返回一个值,我该怎么办?我的目的是复用能力。也许我想用它到另一个网格。 如果我想改变我的政策,以显示我的图标,只是改变一个地方不是所有的代码。 – Jahan 2014-09-12 13:39:22
@Jahan我为此使用了一个JavaScript库,并简单地将IsActive值传递给它,因为它是评估客户端。这样您可以重复使用它,并且它位于中心位置。祝好运与其余。 – hutchonoid 2014-09-12 13:56:07
'.ClientTemplate(“#= ModelProp #”)'...这不会返回一个值,但它会给你一个开始 – CSharper 2014-09-12 18:14:49