Disable keyboard navigartion

Tomasz Tomczykiewicz

Asked On November 13, 2019 10:59 AM UTC

Hi,

Is there an option to disable keyboard navigation?

Best regards,

Tomasz Tomczykiewicz

Reply | Reply with quote

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>

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

Tomasz Tomczykiewicz

Replied On December 10, 2019 10:39 AM UTC

Hi,

Can I disable only 'tab' button?

Best regards,

Tomasz Tomczykiewicz

Reply | Reply with quote

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.

<ejs-gantt

//...

:created= "created"></ejs-gantt>

</template>

//...

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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

<ejs-gantt

//...

:created= "created"></ejs-gantt>

</template>

//...

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149070	Nov 13,2019 10:59 AM UTC	Dec 12,2019 06:51 AM UTC	Vue	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US