KendoGrid Correct way to disable delete for specific rows?

[Will]

ASP.NETCore KendoGrid Correct way to disable delete for specific rows?

I have a use case where I need to disable the deletion of rows that still have children to maintain referential integrity of the database.  Instead of having the user hit DELETE and catch the error, I need to prevent the user from attempting to perform an invalid action.  I can attempt to hide the DELETE button in the onDataBound() or the onDataBinding() events but the results are poor and inconsistent.  When it works, it only works when the page is first loaded.  If the user performs an in-line edit on any row, the delete button unhides.  Other interactions with the page also unhide the DELETE button.  I have found several posts claiming that the "k-grid-delete" class can't be hidden. 

Instead of hiding the button outright, ideally I'd like to be able to still have the button visible, but in a disabled state. 

Is there a solution?

     function onDataBound(e) {
          var grid = $("#grid").data("kendoGrid");
          var rows = grid.tbody.children();
          rows.each(function (e) {
               var dataItem = grid.dataItem(this);
               if (dataItem.ChildrenCount > 0) {
                    var row = $("[data-uid=" + dataItem.uid + "]");
                    var deleteButton = row.find("k-grid-delete");
                    deleteButton.hide();
               }
          });
     }

[Stoyan]

Hello Will,

In order to disable the delete button instead of hiding it, you could substitute the hide() method with the addClass("k-state-disabled") method. 

Additionally, if the grid is in edit mode and the user clicks the "Cancel" button, the DataBound is not triggered. Therefore, the Delete button would not be disabled. To overcome this, subscribe to the edit event and add the k-state-disabled class to the Delete button if the Cancel button is clicked:

.Events(ev => ev.Edit("onEdit"))

function onEdit(e){
              var uid = e.model.uid;
            	$(".k-grid-cancel").on("click", function(){
                setTimeout(function(){
                  $("[data-uid=" +uid + "]").find(".k-grid-delete").addClass("k-state-disabled")
                });
              });
            }

Please let me know if additional questions occur.

 

Regards,
Stoyan
Progress Telerik

[Gabriel]

Silly question: do you have a solution if user press escape or close the popup by pressing the x button? 

[Alexander]

Hi Gabriel,

Based on the provided details I am not entirely sure of the scenario you currently have. In this regard, is the popup edit mode utilized for the Grid? If this is the case, by design the popup window generates a close button upon the window's rendering.

Here is a Telerik REPL that illustrates the following:

Additionally, notice that when pressing the "escape" key on the keyboard the window is automatically closed.

If this is not the case, please consider sharing additional details about the current scenario you have at hand.