如何隐藏 Ajax 绑定 Telerik Grid for MVC 上的“编辑”按钮？

Question

我使用 Telerik Extensions for MVC。在一页上，我使用网格来显示状态消息。我想显示所有具有正 status_id 的状态消息的编辑按钮。

我之前已经使用服务器绑定网格和 CellAction 完成了此操作。不过，我试图将其更改为 Ajax 绑定网格，但我无法弄清楚如何隐藏特定行的按钮。

也许有一种方法可以从 JavaScript 引用特定单元格，并以这种方式隐藏它？

谢谢！

Answer 1

我意识到这个问题是不久前发布的，但我希望我的答案对其他人有用。

在您的数据模型中传递一个字段。在本例中，它是“RemoveDelete”，并且由于它明确用于根据预定条件删除“删除”按钮，因此它被设置为隐藏在网格中。如果网格中显示的数据已包含您要检查的条件，则无需执行此操作。

在网格中...

.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.Columns(columns => {
  columns.Bound(c => c.ColumnName).Attributes().Etc();
  columns.Bound(c => c.ColumnName).Attributes().Etc();
  columns.Command(commands => {
    commands.Edit().ButtonType(ButtonType);
    commands.Delete().ButtonType(ButtonType);
  });
  columns.Bound(c => c.RemoveDelete).Hidden(true);
})

脚本...

<script type="text/javascript">
  function onRowDataBound(e) {
    if (e.dataItem.RemoveDelete > 0) {
      $(e.row).find('a.t-grid-delete').remove(); //remove Delete button
    }
  }
</script>

删除编辑按钮...

$(e.row).find('a.t-grid-edit').remove();

隐藏最后一列使用

$(e.row).find('td.t-last a.t-grid-action').hide();

综上所述，这允许您预先确定要逐行显示的按钮。

Answer 2

我设法以一种有点古怪的方式解决了这个问题：

我为“OnRowBound”事件添加了一个函数，它将包含“编辑”按钮的单元格的内部文本设置为空。

将函数添加到事件：

.ClientEvents(events => events.OnRowDataBound("hideEdit"))

函数：

function hideEdit(e) {

    if (e.dataItem["status_id"] < 0) {
        e.row.cells[5].innerText = "";
    }
}

Answer 3

@AZee 目前接受的答案很好，但自从 Telerik 从“MVC 扩展”过渡到 KendoUI 包装器后将不再有效。请参阅 Telerik 网格迁移页面 。靠近底部的是使用 DataBound 网格事件代替 onRowDataBound 事件的说明。 另请注意中的 view()以前的链接不可用，因此您需要使用_data。最后，类前缀从 t- 更改为 k-。

这些更改的影响： 设置事件处理程序：

@(Html.Kendo().Grid<type>()
    .Name("grid")
    .Events(e => e.DataBound("onDataBound"))
    ...

以及事件处理程序本身：

function onDataBound() {
    var data = this._data;

    for (var i = 0; i < data.length; i++) {
        // the relevant row-data
        var dataItem = data[i]; 
        // selector for the table-row in the DOM
        var $tr = $("#grid").find("[data-uid='" + dataItem.uid + "']");

        if (<dataItem not deleteable>) $tr.find("a.k-grid-delete").remove();
        if (<dataItem not editable>) $tr.find("a.k-grid-edit").remove();
    }
}

Answer 4

就我而言，我使用了不同的 jQuery 函数来隐藏“编辑”按钮，看起来像这样。

创建样式：

.hide
 {
   display:none !important;
 }

在 onRowDataBound javascript 函数中：

if (e.dataItem.SomeValueA!= 4 || e.dataItem.SomeValueB != 16) {
   $(e.row).find('a.t-grid-edit').removeClass("t-button"); 
   $(e.row).find('a.t-grid-edit').addClass("hide");
}

希望，这有帮助。