Override Keyboard short cuts on File Manager ?

[Milan M Conhye]

Hi Team,

How do I override short cuts on the file maager? more specifically CTRL + V?

Thanks,

Milan

[Indhumathy Loganathan]

Hi Milan, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in Syncfusion Vue File Manager component. We haven’t provided the in-built support for overwriting the shortcut keys. However, we can achieve your requirement by binding the keydown event for file manager component element. We have prepared a sample application to meet your requirement, in this sample we have overwrite the shortcut key Ctrl+V to createFolder method, N key for renameFile and S key for selectAll method. Please refer to the below code block. 

 

mounted: function (args) { 

  this.$refs.file.$el.addEventListener("keydown", function (args) { 

    let keyCode = args.which || args.keyCode; 

    let isCtrlKey = 

      args.ctrlKey || args.metaKey ? true : keyCode === 17 ? true : false; 

    let fileRef = this.ej2_instances[0]; 

    // 86 is the character code for 'V' 

    if (isCtrlKey && keyCode === 86) { 

      fileRef.createFolder(); 

    } else if (keyCode === 78) { 

      // 78 is the character code for 'N' 

      fileRef.renameFile(); 

    } else if (keyCode === 83) { 

      // 83 is the character code for 'S' 

      fileRef.selectAll(); 

    } 

    args.preventDefault(); 

  }); 

}, 

 

Please find the sample demonstrating the solution from below link. 

 

https://codesandbox.io/s/vue-file-manager-overwrite-j3geu 

 

Please refer the following links to know more about the Vue FileManager component. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/file-manager/getting-started/ 

 

Demos: https://ej2.syncfusion.com/vue/demos/#/material/file-manager/overview.html 

 

API Reference: https://ej2.syncfusion.com/vue/documentation/api/file-manager/#filemanagercomponent 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L