以编程方式阻止编辑和删除 Kendo UI 网格中的行

Question

在 MVC 应用程序中使用 Kendo。我有一个显示几行的网格。有些是可编辑的，有些则不是。有些是可删除的，有些则不是。

所以，我在 MVC Razor 布局中为此定义了事件：

.Events(o => { 
   o.Edit("onGridEdit"); 
   o.Remove("onGridRemove"); 
})

然后我定义了 JavaScript 来处理这个问题。我的第一个问题是删除事件在删除后触发。我需要提前开火并防止它发生。我还想阻止确认弹出窗口。

编辑事件按预期运行。但它仍然不起作用。这是我所做的：

function onGridEdit(e) {
   var grid = $("#grid").data("kendoGrid");
   var canEditLine = @(someObj.SomeProperty ? "true" : "false");

   if (!canEditLine) {
      grid.cancelRow();
      alert("You do not have rights to modify this line.");
   }
}

结果是正在编辑的单元格被锁定，用户永远看不到它被打开。警报按预期触发。问题是整个原始行都在此列中呈现，而不是这一列得到更新。这是一个屏幕截图：

有人可以帮忙吗？我不想取消所有行更改；只是用户试图弄乱的行。

编辑：

根据下面的答案，这里是更新的 JavaScript 代码。我使用的样式和数据绑定事件如下所示。

function onUserAssignGridDataBound(e) {
   var grid = this;
   var canDelete = @(userRights.CanDeleteLockedLines ? "true" : "false");
   var canEdit = @(userRights.CanEditLockedLines ? "true" : "false");

   grid.tbody.find(">tr").each(function () {

      var dataItem = grid.dataItem(this);

      if (dataItem) {
         if ((dataItem.IsReceived) && (!canDelete)) {
            $(this).find(".k-grid-delete").css("visibility", "hidden");
         }

         if ((dataItem.IsLocked) && (!canEdit)) {
            dataItem.fields["Description"].editable = false;
            dataItem.fields["Quantity"].editable = false;
            dataItem.fields["Price"].editable = false;
         }
      }
   });
} 

Answer 1

根据数据绑定事件的网格数据隐藏删除按钮

**********************网格********************* **********

.Events(e => e.DataBound("onUserAssignGridDataBound"))

******************************脚本****************** **********

        function onUserAssignGridDataBound(e) {

            var grid = this;
            grid.tbody.find('>tr').each(function () {                
                var dataItem = grid.dataItem(this);
                if (dataItem != null) {
                    if (dataItem.Role.RoleId != 2) {
                        $(this).find('.k-plus').addClass('hideCell');
                    }
                }
            });
        } 

****************************样式 CSS****************** ********

 .hideCell {
            visibility:hidden;
        }
        .showCell {
            visibility:visible;
        }