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时在此行上显示编辑按钮是“开放”

Answer 1

我找到了解决方法：

我有一个以模型为参数的javascript函数，并返回一个布尔值，以定义行是否可以编辑：

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

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

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

Answer 2

您需要在绑定数据后在客户端上执行此操作。首先，创建一个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"))

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

2 个答案: