Extending Navigatable and AllowCopy

[Sam]

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

 

[Georgi]

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

[Sam]

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

[Georgi]

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:

• https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/skip-non-editable-cells-when-tabbing

Regards,
Georgi
Progress Telerik