1

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

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

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

谢谢！

4

4 回答 4

7

我意识到这个问题是前一段时间发布的，但我希望我的回答对其他人有用。

在您的数据模型中传递一个字段。在这种情况下，它是“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();

话虽如此，这使您可以预先确定要逐行显示的按钮。

于 2011-08-27T20:41:16.463 回答
2

我设法以一种有点老套的方式解决了它：

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

将函数添加到事件中：

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

功能：

function hideEdit(e) {

    if (e.dataItem["status_id"] < 0) {
        e.row.cells[5].innerText = "";
    }
}
于 2011-02-21T23:44:30.923 回答
2

@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();
    }
}
于 2016-09-30T18:45:56.197 回答
1

在我的例子中，我使用了一个不同的 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");
}

希望，这有帮助。

于 2012-11-02T18:28:33.773 回答