Capture a tab keydown event in a Grid inplace edit cell

4 posts, 1 answers
  1. Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2017

    Posted 07 Nov 2017 Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 09 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2017

    Posted 09 Nov 2017 in reply to Stefan Link to this post

    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.

  4. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 13 Nov 2017 Link to this post

    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:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top