This is a migrated thread and some comments may be shown as answers.
Extending Navigatable and AllowCopy
3 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 26 Jul 2018, 10:21 AM

Hi,

I want to edit some functionality in Kendo grid. For instance Navigatable should behave different to its original implementation and AllowCopy should catch different key press and behave accordingly.

If possible can anyone provide samples to extend such functions. Note: Both function will take only boolean types.

 

Thanks in Advance,

Sam Azpan. D

 

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 30 Jul 2018, 10:11 AM
Hi Sam,

Generally speaking you can extend the default navigation by adding a keydown event handler to the grid, check whether the expected key is pressed and in case it is execute the custom logic.

e.g.

$('#grid').on('keydown', function(e){
   if(e.keyCode === 15) {// set the required key code
      //execute custom navigation logic
   }
})

Regarding the AllowCopy requirement. I assume that the requirement is to copy the selection within a custom key press event handler. A possible solution is to create a custom copySelection function and execute it when the required keys are pressed

e.g.

function copySelection(e) {
  if (!this.areaClipBoard) {
    this.areaClipBoard = $('<textarea />').css({
      position: 'fixed',
      top: '50%',
      left: '50%',
      opacity: 0,
      width: 0,
      height: 0
    }).appendTo(this.wrapper);
  }
  this.areaClipBoard.val(this.getTSV()).focus().select();
  navigator.clipboard.writeText( this.areaClipBoard.val());
}

For your convenience I am attaching a small sample which demonstrates how to copy the current selection within the enter key press.


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sam
Top achievements
Rank 1
answered on 13 Aug 2018, 07:50 AM

Hi Georgi,

Thanks for the speedy response and I'm able to have copy and navigation functionality.

But now I'm facing difficulty when i have any navigation based on TAB.TAB press has its own navigation behavior for browser and I'm not able to control it. For instance, when i press TAB it navigates to address bar then to search and then comes to the page.

When Navigatable is enabled this browser behavior can  be restricted. How we are handling this behavior?

Thanks,

Sam Azpan. D

0
Georgi
Telerik team
answered on 15 Aug 2018, 06:39 AM
Hi Sam,

When navigation is enabled simply a keydown event is attached to the table of the grid.

e.g.

tables              
    .on("keydown" + NS, proxy(that._tableKeyDown, that))
    ...

Therefore a possible solution is to add a keydown event handler to the grid table and check for the key code of the pressed button.

Please refer to the following article which demonstrates how to handle the TAB key press:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Sam
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Sam
Top achievements
Rank 1
Share this question
or