Disable keyboard navigartion

[Tomasz Tomczykiewicz]

Hi,

Is there an option to disable keyboard navigation?

Best regards,

Tomasz Tomczykiewicz

[Pooja Priya Krishna Moorthy]

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> 

Sample - https://codesandbox.io/s/vue-template-q6ydg 

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]

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]

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.  

Feedback link – https://www.syncfusion.com/feedback/10197/issue-on-disabling-the-key-navigation 

This issue will be fixed and it will be available in our upcoming weekly patch release on 27^th 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 

Link: https://codesandbox.io/s/vue-template-gvdkc 

 

Regards, 

Punniyamoorthi 

[Pooja Priya Krishna Moorthy]

Hi Tomasz, 

Thanks for your patience. 

We have fixed Keyboard navigation disabled issue in cell selection. Please find the release notes from below link. 

https://ej2.syncfusion.com/vue/documentation/release-notes/17.3.29/#gantt 

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. 

https://codesandbox.io/s/vue-template-4wle3 

Regards, 

Pooja K.

[Tomasz Tomczykiewicz]

Hi,

Can I disable only 'tab' button?

Best regards,

Tomasz Tomczykiewicz

[Pooja Priya Krishna Moorthy]

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> 

Sample - https://codesandbox.io/s/vue-template-b1vxs 

Please get back to us if you require further assistance on this. 

 

Regards, 

Pooja K. 

[Tomasz Tomczykiewicz]

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]

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 = ""      }  }

  

Sample - https://codesandbox.io/s/vue-template-vf9m9 

 

Please get back to us if you require further assistance on this. 

Regards, 

Pooja K.