Question

我在尝试在我的Kendo Grid中实现自定义删除按钮时遇到了麻烦。这是我的代码：

查看：

<div id="gridAdditionalLines">

使用Javascript：

var dataSourceGrid = new kendo.data.DataSource({
            data: MyData,   --> It's a type of Kendo.Observable
            schema: {
                model: {
                    Id: "Id",
                    fields: {
                        Id: { editable: false, nullable: true },
                        Column1: { editable: false, nullable: true },
                        Description: { validation: { required: true} },
                        Value: { validation: { required: true} }
                    }
                }
            }
        });

        $("#MyGrid").kendoGrid({
            dataSource: dataSourceGrid,
            editable: true,
            navigatable: true,
            toolbar: ["create"],
            columns: [
                        { field: "Description" },
                        { field: "Value" },
                        { command: [{name: "destroy", template: kendo.template($("#DeleteTemplate").html())}], width: 60}
            ]
        });

这是我用于每行删除按钮的模板：

<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
    <span class="glyphicon glyphicon-remove"></span> 
</button>

使用上面的代码，Kendro Grid可以正确显示数据。但是，在尝试删除任何行时，此时单击“删除”按钮，没有任何反应。

我错过了什么吗？

Answer 1

我使用Kendo已经有一段时间了，但是如果我没记错的话，因为网格本身不是MVVM绑定的，所以它的子元素（包括呈现的模板）都不会被检查MVVM数据绑定属性

如果使用data-role="grid"使用MVVM初始化网格，那么我认为模板也会绑定。

我忘记了如何做到这一点，但我相信当网格触发其dataBound事件时，您可以在网格的子元素上手动调用kendo.bind(...)以使它们进入MVVM绑定

Answer 2

此处缺少您点击按钮的功能。添加此脚本后，会在网格中添加一个按钮，但未指定单击按钮时会发生什么

<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
    <span class="glyphicon glyphicon-remove"></span> 
</button>

然后你必须为按钮添加一个onclick功能：

$('.btn.btn-default').on('click', function() {
  var grid = $("#grid").data("kendoGrid");
   var dataItem = grid.dataItem($(this).closest("tr"));


  if(confirm('Are you sure you want to delete : ' + dataItem.name)) {

    grid.dataSource.remove(dataItem);
    grid.dataSource.sync();
    grid.refresh();
  }  
});

Check jsbin here

数据绑定在kendo.template中不起作用

2 个答案: