在剑道网格的列模板上添加按钮

Question

我正在使用 MVC 构建一个应用程序，使用 Jquery(KendoGrid) 来显示数据，一切都按要求正常工作，后来我们计划在网格的每一行上添加带有按钮的额外列，听起来很简单，但尝试了数字添加到应用程序中的方法，收到错误消息“未定义的'节点'.....”，所以我没有其他选择，只能在这里发布，如果有人能帮助我，我将不胜感激，我在 jquery kendo 网格上使用了列模板谢谢

场景

onclick 指定行中的该按钮应带有“ID（如下所示）”并重定向到“ActionResult”控制器，我可以在其中进一步编码我的要求

代码（部分代码）

columns: [
                { field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },

                { field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },

                { field: "BillNumber", Title: "BillNumber", filterable: false, sortable: false,hidden:true },

                { field: "ServiceName", Title: "ServiceName",width:600 },

                { field: "ServiceStatus", Title: "ServiceStatus", width: 150 }
// Creating template column

               , {
                   field: "Action", title: "Is Action", template: "<input type=\"checkbox\"    #= Action ? checked='checked' : '' #  class=\"check_row\"/> ", editable: false,

                  // field: "Action",title: "Preview ", template: '<input type="button" class="info" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" />',                       

    headerTemplate: '<label>  <input type="checkbox" id="checkAll"/>Print All</label>', filterable: false, sortable: false, width: 100,                     
               }

目前我能够在列中生成复选框，我需要的是多一列带有按钮（与每一行中的复选框相同）

Manjuboyz

Answer 1

在单元格中定义一个按钮非常简单......基本上你做对了。

示例：将列定义为：

columns: [
    ...
    {
        title: "Preview ", 
        template: '<input type="button" class="k-button info" name="info" value="Info" />',                       
        headerTemplate: '<label>  <input type="checkbox" id="checkAll"/>Print All</label>', 
        filterable: false, 
        sortable: false, 
        width: 100                     
    }
]

将template 定义为input 类型的button。如果你想让它看起来像一个 Kendo UI 按钮，请将 k-button 类添加到它。

然后，您可以绑定 click 处理程序：

$(".info").on("click", function() {
    var row = $(this).closest("tr");
    var item = grid.dataItem(row);
    ...
});

其中item 包含与您单击按钮的行对应的所有数据。

在这里运行示例：http://jsfiddle.net/m8fsv/1/

编辑：如果您需要控制/决定显示其中一个，您应该将模板更改为：

<script id="template" type="text/kendo-template">
    # if (showButton) { #
    <input type="checkbox" #= data.Action ? checked="checked" : "" #  class=\"check_row\"/>
    # } else { #
    <input type="button" class="k-button info" name="info" value="Info" />
    # } #
</script>

您可以在这里查看：http://jsfiddle.net/OnaBai/m8fsv/12/