Block editing and deletion of rows in KendoUI grid programatically

Question

Using Kendo in an MVC application. I have a grid that shows a few rows. Some are editable, some are not. Some are deletable, some are not.

So, I defined events for this in the MVC Razor layout:

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

Then I defined JavaScript to handle this. My first issue is that the deletion event fires after delete. I need to fire beforehand and prevent it. I also want to prevent the confirmation popup.

The edit event behaves as expected. But it still does not work. Here's what I did:

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

The result is that the cell being edited is locked, and the user never sees it opened. The alert fires as expected. The problem is that the entire original row gets rendered inside this column rather than this single column getting updated. Here's a screenshot:

Can anyone help with this? I don't want to cancel all row changes; just the row the user is trying to mess with.

EDIT:

Based on the answer below, here's the updated JavaScript code. The styles and databound events below I used as indicated.

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

Hide the remove button bases on grid data on databound event

**********************Grid*******************************

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

*************************script****************************

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

****************************Styles CSS**********************

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