Настройка сетки пользовательского интерфейса Kendo

По умолчанию сетка Kendo показывает значения столбцов, но я бы хотел ее настроить. Например, я хочу показать значок для каждого значения одного столбца. У меня есть столбец в моей сетке, который показывает статус активации или инактивации. Вместо показа "true" или "false", я хочу показать значок, который подходит для него. Я использовал ".Template()" в сетке, но мой код в ".Template" не срабатывал! Как я могу решить эту проблему?

<div>
 @(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")
 ))
</jahan.blog.model.article></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());
 }

2 ответа

Вы можете сделать это с помощью ClientTemplate следующим образом:

columns.Bound(p => p.IsActive)
 .ClientTemplate("");

Вышеприведенное просто проверяет свойство IsActive и отображает тик или крест.


columns.Bound(p => p.IsActive).ClientTemplate("#= showIcon(IsActive) #").Width(80);

Функция JavaScript:

function showIcon(isActive) {
 var result = "";
 if (isActive == true) {
 result = "";
 } else {
 result = "";
 }
 return result;
}

для получения дополнительной информации нажмите " Как использовать функцию JavaScript в шаблоне клиента столбца"?

licensed under cc by-sa 3.0 with attribution.