This is a migrated thread and some comments may be shown as answers.

Onchange Method Capture Keyboard Input

8 Answers 270 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 13 Mar 2017, 07:17 PM

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!

8 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 15 Mar 2017, 01:12 PM
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.
0
Marc
Top achievements
Rank 1
answered on 16 Mar 2017, 07:40 AM

Hi, 

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

Thanks

Marc

0
Nencho
Telerik team
answered on 17 Mar 2017, 03:05 PM
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.
0
Marc
Top achievements
Rank 1
answered on 20 Mar 2017, 07:18 AM

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

0
Nencho
Telerik team
answered on 21 Mar 2017, 02:00 PM
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.
0
Marc
Top achievements
Rank 1
answered on 22 Mar 2017, 09:21 AM

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

0
Nencho
Telerik team
answered on 24 Mar 2017, 07:52 AM
Hello Marc,

Indeed, the event should be 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 (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 24 Mar 2017, 08:32 AM

Hi Nencho!

This is awesome, thank you!

Marc

Tags
Spreadsheet
Asked by
Marc
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Marc
Top achievements
Rank 1
Share this question
or