以编程方式阻止编辑和删除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;
        }