自定义 Kendo UI 的网格答案

【问题标题】：Customizing Grid of Kendo UI自定义 Kendo UI 的网格
【发布时间】：2014-09-12 12:30:09
【问题描述】：

默认情况下，剑道网格显示列的值，但我想自定义它。例如，我想为一列的每个值显示一个图标。我的网格中有一个显示激活或停用状态的列。我不想显示“真”或“假”，而是想显示一个适合它的图标。我在网格中使用了“.Template()”，但“.Template”中的代码没有触发！我该如何解决这个问题？

<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());
        }

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-grid extension-methods kendo-asp.net-mvc

【解决方案1】：

您可以使用ClientTemplate 执行此操作，如下所示：

columns.Bound(p => p.IsActive)
 .ClientTemplate("<img src='/Content/#= IsActive ? 'tick.png' : 'cross.png' #''>");

上面只是检查IsActive 属性并显示一个刻度或十字图像。

【讨论】：

谢谢。这是正确的，但是如果我想将 IsActive 值传递给函数并返回一个值，我该怎么办？我的目的是重用能力。也许我想将它用于另一个网格。如果我想将我的策略更改为如何显示我的图标，只需更改一处而不是所有代码。
@Jahan 我为此使用了一个 javascript 库，并在评估客户端时将 IsActive 值简单地传递给它。这样您就可以重复使用它，并且它位于中心位置。祝你好运。
.ClientTemplate("<a href='javascript: void(0);' onclick=\"return openMSDynamicsWindow('#= ModelProp #');\">#= ModelProp #</a>")...这不会返回值，但它会给你一个开始
这看起来像你想要的stackoverflow.com/questions/19819127/…

【解决方案2】：

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;
}

【讨论】：