We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disable keyboard navigartion

Thread ID:

Created:

Updated:

Platform:

Replies:

149070 Nov 13,2019 10:59 AM UTC Dec 12,2019 06:51 AM UTC Vue 8
loading
Tags: Gantt Chart
Tomasz Tomczykiewicz
Asked On November 13, 2019 10:59 AM UTC

Hi,

Is there an option to disable keyboard navigation?

Best regards,
Tomasz Tomczykiewicz

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On November 14, 2019 10:36 AM UTC

Hi Tomasz, 

In Gantt, we have a property called allowKeyboard, by using this property, we can enable/disable the keyboard interactions of Gantt. Please find the below code example. 
<ejs-gantt ref="gantt" 
  id="GanttContainer" 
  //... 
  :allowKeyboard=false> 
</ejs-gantt> 
Please get back to us if you require further assistance on this. 
Note: This support was included from the version v17.3.19. Please upgrade to the latest version of Gantt source to disable keyboard interactions. 
 
Thanks, 
Pooja Priya K 
 


Tomasz Tomczykiewicz
Replied On November 14, 2019 12:13 PM UTC

Hi,

The provided solution doesn't solve my problem. When I am editing a cell, I can switch columns using the 'Tab' button (see attached gif).

Best regards,
Tomasz Tomczykiewicz

Attachment: Kapture_20191114_at_13.11.04.gif_f8a53ae.zip

Punniyamoorthi Elangovan [Syncfusion]
Replied On November 15, 2019 11:22 AM UTC

Hi Tomasz, 
Sorry for the inconvenience caused. 
We checked your reported issue and we can reproduce the reported issue at our end also logged a bug report regarding this. You can track the status from below feedback link.  
This issue will be fixed and it will be available in our upcoming weekly patch release on 27th November, 2019. 
Meanwhile, we have provided the workaround solution to disable the “Tab” key navigation for Gantt component by using created event, you can find the sample from below link 
 
Regards, 
Punniyamoorthi 


Pooja Priya Krishna Moorthy [Syncfusion]
Replied On November 29, 2019 11:22 AM UTC

Hi Tomasz, 
Thanks for your patience. 
We have fixed Keyboard navigation disabled issue in cell selection. Please find the release notes from below link. 
Please upgrade your Gantt packages to the highest version v17.3.29. We have prepared a sample with latest source, please find the sample from below link. 

Regards, 
Pooja K.

Tomasz Tomczykiewicz
Replied On December 10, 2019 10:39 AM UTC

Hi,

Can I disable only 'tab' button?

Best regards,
Tomasz Tomczykiewicz

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On December 11, 2019 06:47 AM UTC

Hi Tomasz, 
Yes, it is possible to disable tab key by some work around. We can pass empty string to the keyconfigs.tab in the created event as like the below code example. 
 
<template> 
  <ejs-gantt 
    //... 
    :created= "created"></ejs-gantt> 
</template> 
<script> 
//... 
export default { 
  methods: { 
      created: function(args){ 
        this.$refs.gantt.ej2Instances.treeGrid.grid.keyConfigs.tab = "" 
      } 
  }, 
}; 
</script> 
Please get back to us if you require further assistance on this. 
 
Regards, 
Pooja K. 


Tomasz Tomczykiewicz
Replied On December 11, 2019 09:10 AM UTC

Hi,

Thanks for the answer but it has strange behaviour (the browser tab is selected, see attachment).
Additionally, how can I disable the 'insert' button?

Best regards,
Tomasz Tomczykiewicz

Attachment: Kapture_20191211_at_10.08.17.gif_1dc5b7bf.zip

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On December 12, 2019 06:51 AM UTC

Hi Tomasz, 
Please find the below response. 
S.No 
Query  
Syncfusion Comments 
  
1 
  
  
it has strange behaviour (the browser tab is selected, see attachment). 
  
 
This is the default behavior of browser. When tab key is disabled in control level the browser tab will be selected. We can prevent this by using preventDefault method. Please find the below code example. 
<template> 
    <ejs-gantt 
    //... 
    :created= "created"></ejs-gantt> 
</template> 
<script> 
    //... 
  export default { 
    methods: { 
      created: function (args) { 
                document.getElementById(this.$refs.gantt.$attrs.id).addEventListener('keydown', (event) => { 
       if (event.keyCode === 9) { 
           event.preventDefault(); 
        } 
      }); 
    } 
   }, 
}; 
</script> 
 
 
  
2 
  
  
how can I disable the 'insert' button? 
  
  
To disable ‘insert’ button, we can pass empty string to the keyconfigs.addRow in the created event as like the below code example. 
 
methods: { 
    created: function (args) { 
        this.$refs.gantt.ej2Instances.keyConfig.addRow = "" 
    } 
} 
 
 
  
  
 
Please get back to us if you require further assistance on this. 
Regards, 
Pooja K. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon