Telerik grid 如何在绑定Ajax的Telerik网格上隐藏编辑按钮？

我为MVC使用Telerik扩展。在一个页面上，我使用网格显示状态消息。我想为所有具有肯定状态id的状态消息显示编辑按钮

我以前使用服务器绑定的网格和CellAction完成了这项工作。然而，我试图将其更改为一个Ajax绑定的网格，但是我不知道如何隐藏特定行的按钮

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

---

谢谢

我设法用一种有点老套的方式解决了这个问题：

我为OnRowBound事件添加了一个函数，该函数将包含Edit按钮的单元格的innerText设置为nothing

将函数添加到事件中：

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

职能：

function hideEdit(e) {

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

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

---

我设法用一种有点老套的方式解决了这个问题：

我为OnRowBound事件添加了一个函数，该函数将包含Edit按钮的单元格的innerText设置为nothing

将函数添加到事件中：

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

职能：

function hideEdit(e) {

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

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

---

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

在数据模型中传递一个字段。在这种情况下，它是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('td.t-last a.t-grid-action').hide();

---

话虽这么说，这让你可以预先确定你想在一行一行的基础上显示什么按钮。

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

在数据模型中传递一个字段。在这种情况下，它是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('td.t-last a.t-grid-action').hide();

---

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

在我的例子中，我使用了不同的jQuery函数来隐藏编辑按钮，看起来是这样的

创建样式：

.hide
 {
   display:none !important;
 }

在onRowDataBound javascript函数中：

function hideEdit(e) {

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

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

---

希望有帮助。

在我的例子中，我使用了不同的jQuery函数来隐藏编辑按钮，看起来是这样的

创建样式：

.hide
 {
   display:none !important;
 }

在onRowDataBound javascript函数中：

function hideEdit(e) {

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

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

---

希望有帮助。

@AZee目前接受的答案是好的，但自从Telerik从MVC扩展转换到KendoUI包装后，它就不再有效了。看见底部附近是使用数据绑定网格事件代替onRowDataBound事件的说明。前一个链接中的视图不可用，因此需要使用_数据。最后，类前缀从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();
    }
}

---

@AZee目前接受的答案是好的，但自从Telerik从MVC扩展转换到KendoUI包装后，它就不再有效了。看见底部附近是使用数据绑定网格事件代替onRowDataBound事件的说明。前一个链接中的视图不可用，因此需要使用_数据。最后，类前缀从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();
    }
}

---

谢谢因为这是一个比我在我的特定型号上使用的更通用的答案，所以我将其标记为已接受的答案。谢谢！因为这是一个比我在我的特定模型中使用的答案更通用的答案，所以我将其标记为可接受的答案。