如何根据数据在特定行上显示 Kendo UI 网格中的编辑按钮

Question

我在 asp.net 应用程序中使用 KendoUI 来显示网格。

我希望用户能够根据每行的状态编辑行。

网格看起来像这样：

@(Html.Kendo().Grid<UIMuModel>()
.Name("Grid")
.Columns(columns =>
{
        columns.Select().Width("50px");
        columns.Bound(c => c.Name).Width("120px");
        columns.Bound(c => c.State).Width("120px");
        if (Model.AllowEdit)
        {
            columns.Command(command => { command.Edit(); });
        }
})            
.Editable(editable => editable.Mode(GridEditMode.InLine))

我可以启用或禁用整个网格的编辑命令，但我不知道如何在每行的基础上执行此操作：如果 State 是 "open"

Answer 1

您需要在数据绑定后在客户端执行此操作。首先，创建一个 dataBound 处理程序：

<script>        
      function dataBound(e) {
           var grid = this;

           grid.tbody.find("tr[role='row']").each(function () {
               var model = grid.dataItem(this);

               if (!model.AllowEdit) {
                   $(this).find(".k-grid-edit").addClass("k-state-disabled");
               }
           });
       }
</script>

...然后将此事件处理程序添加到您的小部件：

    @(Html.Kendo().Grid<UIMuModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Select().Width("50px");
        columns.Bound(c => c.Name).Width("120px");
        columns.Bound(c => c.State).Width("120px");
        if (Model.AllowEdit)
        {
            columns.Command(command => { command.Edit(); });
        }
    })            
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Events(e => e.DataBound("dataBound"))

Answer 2

我找到了解决方案：

我有一个 javascript 函数，模型作为参数，returns 一个布尔值，用于定义该行是否可以编辑：

function isLineEditable(model) {
    return model.State === "open";
}

并且在命令定义上，我们可以设置一个javascript函数来调用，设置按钮是否可见：

columns.Command(command => { command.Edit().Visible("isLineEditable"); });

如何根据数据在特定行上显示 Kendo UI 网格中的编辑按钮

How to display edit button in KendoUI grid on specific lines depending on data

kendo-ui

kendo-grid

kendo-asp.net-mvc