Onchange Method Capture Keyboard Input

9 posts, 0 answers
  1. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 13 Mar 2017 Link to this post

    When the user changes the spreadsheet, I use the onchange method to run certain validations. Is there any way to determine which key(s) the user has pressed? I'm interested in keys such as delete and backspace.

    Thanks!

  2. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 15 Mar 2017 Link to this post

    Hello Marc,

    I am afraid that the change event would not be applicable for your scenario. The reason is that the event is not triggered at each keypress, but when the value is changed and the cell is blurred. This is why, I can suggest you to handle the keydown event with jQuery on the cell editor in the following manner:

          $(document).ready(function(){
            $('#spreadsheet .k-spreadsheet-cell-editor').on('keydown', function (e) {
      
        alert(e.which);
    })
          })


    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 16 Mar 2017 in reply to Nencho Link to this post

    Hi, 

    Your solution doesn't seem to work for me. Could you provide a small DOJO example?

    Thanks

    Marc

  4. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 17 Mar 2017 Link to this post

    Hello Marc,

    Please find the dojo example and the video below:

    http://dojo.telerik.com/IFOjA

    https://www.screencast.com/t/qe7JXliNG


    In the video above, you can observe the console logging of the keyCodes.

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 20 Mar 2017 in reply to Nencho Link to this post

    Hi Nencho,

    Thanks for the demo & the screencast!

    I have checked your solution and yes, it works great when the user clicks into the cell and starts editing. However, I am interested in also collecting the user keypress information when the user just clicks once on the cell (ie, not in "editing" mode). I guess it could be done with $('#spreadsheet .SOME_SPREADSHEET_CELL_SELECTED_CLASS'), but I do not know the class to use? Can you help?

    Thanks

    Marc

  6. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 21 Mar 2017 Link to this post

    Hello Marc,

    You can use the k-spreadsheet-clipboard class, in order to handle such keydown event:

    $(document).ready(function(){
         $(".k-spreadsheet-clipboard").on("keydown", function(e){
       alert(e.which)
        
     })               
    })

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 22 Mar 2017 in reply to Nencho Link to this post

    Thank you!

    Is there any easy way to stop the user pressing the delete key? I can do e.preventDefault() inside your example above, but the onchange method of my spreadsheet is still fired when the user presses the delete key.

    Thanks

    Marc

  8. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 24 Mar 2017 Link to this post

    Hello Marc,

    Indeed, the keydown event should be handler in a slightly different manner, in order this functionality to be applicable. Please refer to the following dojo, demonstrating such implementation:

    http://dojo.telerik.com/@nenchef/oJaYOK/2


    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 24 Mar 2017 in reply to Nencho Link to this post

    Hi Nencho!

    This is awesome, thank you!

    Marc

Back to Top