How to show a toolbar custom item when there's at least one file selected

Hello,

I actually want to be able to show a custom toolbar item on the file manager only when there's at least one file selected.

Thanks

1 Reply 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team March 23, 2021 11:02 AM UTC

Hi Omar,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query with FileManager component. You can add the custom toolbar items in ToolbarSettings of FileManager component. You can get the selected files details in getSelectedFiles method of FileManager component. 
 
You can enable and disable the toolbar items using enableToolbarItems and disableToolbarItems  method. 
 
Please, refer to the below code snippet. 

<template> 
  <div id="app"> 
    <ejs-filemanager 
      id="file-manager" 
      ref="file_instance" 
      :toolbarSettings="toolbarSettings" 
      :ajaxSettings="ajaxSettings" 
      :created="created" 
      :fileSelect="fileSelect" 
    > 
    </ejs-filemanager> 
  </div> 
</template> 
  methods: { 
    created: function (args) { 
      this.$refs.file_instance.disableToolbarItems(["Custom"]); 
    }, 
    fileSelect: function (args) { 
      if (this.$refs.file_instance.getSelectedFiles().length > 0) { 
        this.$refs.file_instance.enableToolbarItems(["Custom"]); 
      } else { 
        this.$refs.file_instance.disableToolbarItems(["Custom"]); 
      } 
    }, 
  }, 
 
Please, refer to the sample link. 
 
 
Please, refer to the below link for FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon