Extending Navigatable and AllowCopy

4 posts, 0 answers
  1. Sam
    Sam avatar
    4 posts
    Member since:
    Aug 2015

    Posted 26 Jul Link to this post

    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

     

  2. Georgi
    Admin
    Georgi avatar
    368 posts

    Posted 30 Jul Link to this post

    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.
  3. Sam
    Sam avatar
    4 posts
    Member since:
    Aug 2015

    Posted 13 Aug in reply to Georgi Link to this post

    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

  4. Georgi
    Admin
    Georgi avatar
    368 posts

    Posted 15 Aug Link to this post

    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.
Back to Top