将按钮动态添加到 Kendo UI Grid MVC答案

【问题标题】：Dynamically add button to Kendo UI Grid MVC将按钮动态添加到 Kendo UI Grid MVC
【发布时间】：2017-04-12 13:49:56
【问题描述】：

我在 .net MVC 中创建了一个简单的 Web 应用程序，其中包含一个简单的输入文本框和一个网格（显示一些 DB 数据）。

@(Html.Kendo().Grid<Z.ViewModels.ZViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Number);
        columns.Bound(c => c.AddedDate);
        columns.Bound(c => c.ProcessingMessageText);
        columns.Bound(c => c.ProcessedDate).

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Home"))
        .PageSize(20)
    )
        )

现在我需要向此页面添加另一个功能...如果 ProcessedDate 中没有值（“”），则显示具有 som 自定义功能的按钮（使用 Number 列中的参数从控制器调用操作），否则显示价值。
这可能吗？

我尝试了类似这样的ClientTemplate("# if (ProcessingMessageText =='') {# <button>do stuff</button> #} else if (ProcessingMessageText !='') {# ProcessedDate <#}# "); }).Events(e => e.DataBound("onDataBound"))，但没有成功。

我有一个更改行颜色的功能...但我不知道如何访问列值...

 function onDataBound(e) {


        var grid = this;
        var currentRecords = grid.dataSource.view();

        for (var i = 0; i < currentRecords.length; i++) {
            //currentRecords[i] is the current dataItem
            if (currentRecords[i].ProcessingMessageText == "Finished") {
                grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowSucess");
          }

             if (currentRecords[i].ProcessingMessageText == "Sent") {
                var row= grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowSent");


            }

            else if (currentRecords[i].ProcessingMessageText == "Error") {
                grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowError");


            }


        }
    }

感谢您的帮助

【问题讨论】：

标签： button model-view-controller kendo-ui grid runtime

【解决方案1】：

使用调用 MVC 操作并传递参数（数字）的模板列非常简单。此示例创建一个引导按钮来调用我的控制器并使用 kendo 哈希标记语法将名为“number”的参数传递给它。小心使用单引号和双引号。：

columns.Template(t => { }).Title(string.Empty).Width(40)
    .ClientTemplate(@"<a href='" + Url.Action("MyAction","MyController") + "?number=#= Number#' class='btn btn-info btn-xs' title='Modify this item'>Edit</a>");

如果字段不为空，则需要添加 if 语句以显示日期，否则显示按钮。

【讨论】：