Question

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

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

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

谢谢！

Answer 1

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

在您的数据模型中传递一个字段。在这种情况下，它是“RemoveDelete”，因为它被明确地用于根据预定条件移除Delete按钮，所以它被设置为隐藏在网格中。如果网格中显示的数据已包含您要检查的条件，则不必执行此操作。

在网格中......

.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”-event添加了一个函数，它将包含Edit按钮的单元格的innerText设置为空。

将该功能添加到事件中：

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

功能：

function hideEdit(e) {

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

Answer 3

@ AZee当前接受的答案很好，但是自从Telerik从＆＃34; MVC扩展转换后，它将不再有效。到KendoUI包装器。见Telerik Grid Migration page。靠近底部的是使用DataBound网格事件代替onRowDataBound事件的说明。 Note also前一个链接中的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函数来隐藏Edit按钮，看起来就像那样。

创建样式：

.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");
}

希望，这有帮助。

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

4 个答案: