Capture a tab keydown event in a Grid inplace edit cell

[Tim]

Hi

I have a grid that has inplace editing enabled.  I would like to capture the tab event on one specific cell's input.  I've added this to my view:

 

    $(document).ready(function () {
        var grid = $("#ItemsGrid");
        $(document).on("keydown", "input#UnitPrice", function (e) {
            console.log("keydown on input UnitPrice");
            var code = e.keyCode || e.which;

            if (code === 9) {
                console.log("Tab");
            }
        });
    });

 

however, I find that "Tab" is never logged to the console.  It seems that it's getting suppressed by kendo.js (at least, thats what I can figure out by poking around in the debugger...)

 

Is there a better way to capture keydown events in a specific edit cell?

[Stefan]

Hello, Tim,

Thank you for the provided code.

In this scenario, I can suggest adding the event handler on the edit event of the Grid and then remove it on the cellClose event to ensure that it will not attach multiple event handlers(another logic for detaching can be used):

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-cellClose

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

I made an example demonstrating this:

http://dojo.telerik.com/OyaLuN

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Tim]

Looks great!  However, when I handle the tab event, I am creating a new row in the grid.  When I do this, the value in the cell is lost.

How do I force this value to be saved?  I have tried calling blur(), focusOut() on the cell to no avail.

Thanks again for your help.

[Konstantin Dikov]

Hi Tim,

You need to ensure that the addRow method is called after the value is updated in the model, which could be achieved by wrapping the call within a setTimeout function:

• http://dojo.telerik.com/OyaLuN/2

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik