Preventing Enter button from expanding detail rows on Kendo UI Grid

Preventing Enter button from expanding detail rows on Kendo UI Grid

Admittedly this is a pretty custom/specific use of the Kendo UI Grid, but just in case someone else needs to do this type of thing, you never know…

Scenario:

I have an application that makes use of the Kendo UI grid. Specifically the hierarchacal version of the grid with expanding detail rows.

The grid uses inline batch editing, and there is a requirement that some rows will have expanding detail items, and some will not. (There was some custom javascript put into play, to hide the expanding/collapsing arrow on these rows)

For those rows that do not have expanding items, we want to be able to edit those rows normally, and have the “Enter” key close the editing process. However, when you are editing a row in a grid with hierarchal data, the default behavior of the “Enter” key, is to expand the row, not close the edit process.


function allowMasterRowEnterEditing() {

 //this allows master rows to not expand upon the enter key being pressed, but instead just do a blur(), saving the cell as normal

 $("#MainGrid table").on("keydown", function(e) {
 var code = (e.keyCode ? e.keyCode : e.which);
 if (code == 13) { //Enter keycode
 //if this is an expandable row, do nothing
 var canExpand = $("#MainGrid_active_cell").closest("tr.k-master-row").find("td.k-hierarchy-cell a.k-icon:visible").length > 0;
 //this was my criteria for determing if a row can expand or not(hiding that collapisble arrow link)
 if (canExpand === false) {
 $("#MainGrid_active_cell").find('input').blur();
 e.stopImmediatePropagation();
 return false;
 }
 }
 });
}

The trick is to add a keydown function on the main grid, and check for the event’s key code. If it’s 13, we know it’s an “Enter” push, and we can stop immediate propogation if our criteria are matched. In this case, that means the expand arrow is not visible.

Just run the allowMasterRowEnterEditing() function (above) on document ready, and you should be set.

Now, when making inline edits on these specific rows, the “Enter” key will close our edits, like usual, rather than expanding a detail row that should not be visible.

Let me know if you have any questions.

By | 2016-01-20T09:47:29+00:00 January 20th, 2016|Categories: ASP.NET, MVC, Telerik|0 Comments

About the Author:

Leave A Comment