KendoGrid Correct way to disable delete for specific rows?

1 Answer 1257 Views
Button Grid
Will
Top achievements
Rank 1
Will asked on 11 May 2021, 09:31 PM

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


1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 14 May 2021, 02:55 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Gabriel
Top achievements
Rank 1
Iron
Iron
Iron
commented on 08 Mar 2022, 07:13 PM

Silly question: do you have a solution if user press escape or close the popup by pressing the x button? 
Alexander
Telerik team
commented on 11 Mar 2022, 10:29 AM

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.

 

Tags
Button Grid
Asked by
Will
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or