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. Image for the cookie policy date

Disable keyboard navigartion

Hi,

Is there an option to disable keyboard navigation?

Best regards,
Tomasz Tomczykiewicz

8 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team November 14, 2019 02:36 AM

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 
 



TT Tomasz Tomczykiewicz November 14, 2019 04:13 AM

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


PE Punniyamoorthi Elangovan Syncfusion Team November 15, 2019 03:22 AM

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 



PP Pooja Priya Krishna Moorthy Syncfusion Team November 29, 2019 03:22 AM

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.


TT Tomasz Tomczykiewicz December 10, 2019 02:39 AM

Hi,

Can I disable only 'tab' button?

Best regards,
Tomasz Tomczykiewicz


PP Pooja Priya Krishna Moorthy Syncfusion Team December 10, 2019 10:47 PM

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. 



TT Tomasz Tomczykiewicz December 11, 2019 01:10 AM

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


PP Pooja Priya Krishna Moorthy Syncfusion Team December 11, 2019 10:51 PM

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. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon