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.

Share Your Thoughts!

Testimonials

What My Clients Say

Karin - Hope and Future

Brent has always been very prompt and generally exceeds our expectations with his work. His maintenance fee is very reasonable. I strongly recommend him!  We get many compliments on our beautiful web site!

Dan

I contacted Krueger Web Design and Brent did everything.  He setup a test site with the changes so we could verify everything was correct before we transferred from my old hosting provider.  During the setup and conversion Brent was extremely professional and responsive. He responded to any issues the same day.

Dan Kaufman
Emily - GFCLT

We've had a great experience working with Krueger Web Design. Prompt responses, great ideas, effective work... all at a reasonable price! This was the perfect fit for our organization.

Mahmud - ACMC

I would love to recommend you to anyone! You have been very helpful when we needed you the most.

Brian - SEMNIC

Working with Krueger Web Design was effortless. Communicating what I wanted for the website and the results that I saw were identical. The customer service was always prompt and I am completely satisfied with the product.

Zach - Stadium Club

Exactly what I wanted! Fast turnaround time and very affordable. Answered all of our questions quickly and made adjustments promptly. Very easy to work with and puts everything into terminology that even I can understand!

Contact Krueger Web Design

Have a question for me? Need an estimate on some work? You can email me at brent@kruegerwebdesign.com or drop me a line using the button below:

Copyright © 2017 Krueger Web Design - All rights reserved
Web Design in Madison, WI