Enable/Disable toolbar item in Vue File Manager component

18 Nov 20186 minutes to read

Toolbar items can be enabled or disabled programmatically using the enableToolbarItems and disableToolbarItems methods.

The example below demonstrates enabling and disabling toolbar items on a button click.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-button id="enable" cssClass="e-success">Enable New Folder toolbar item</ejs-button>
        <ejs-button id="disable" cssClass="e-danger">Disable New Folder toolbar item</ejs-button>
        <ejs-filemanager :created="onCreated" id="file-manager" ref="fileManagerinstance" :height="height" :ajaxSettings="ajaxSettings">
        </ejs-filemanager>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { FileManagerComponent as EjsFilemanager, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { ButtonComponent as EjsButton} from "@syncfusion/ej2-vue-buttons";

const fileManagerinstance = ref(null);
const ajaxSettings =
{
    url: "https://physical-service.syncfusion.com/api/FileManager/FileOperations",
    getImageUrl: "https://physical-service.syncfusion.com/api/FileManager/GetImage",
    uploadUrl: "https://physical-service.syncfusion.com/api/FileManager/Upload",
    downloadUrl: "https://physical-service.syncfusion.com/api/FileManager/Download"
};

const height = "330px";
provide('filemanager',  [DetailsView, NavigationPane, Toolbar]);
const onCreated = function(){
    // Click event for enable button
    document.getElementById("enable").addEventListener('click', () => {
        // Enable new folder toolbar item
        fileManagerinstance.value.enableToolbarItems(["newfolder"]);
    });
    // Click event for disable button
    document.getElementById("disable").addEventListener('click', () => {
        // Disable new folder toolbar item
        fileManagerinstance.value.disableToolbarItems(["newfolder"]);
    });
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";

#enable {
    position: relative;
    left: 20%;
    top: -10px;
}

#disable {
    position: relative;
    left: 30%;
    top: -10px;
}

</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-button id="enable" cssClass="e-success">Enable New Folder toolbar item</ejs-button>
        <ejs-button id="disable" cssClass="e-danger">Disable New Folder toolbar item</ejs-button>
        <ejs-filemanager :created="onCreated" id="file-manager" ref="fileManagerinstance" :height="height" :ajaxSettings="ajaxSettings">
        </ejs-filemanager>
    </div>
</template>
<script>

import { FileManagerComponent, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";


export default {
    name: "App",
    components: {
        "ejs-button":ButtonComponent,
        "ejs-filemanager":FileManagerComponent
    },
    data () {
        return {
           ajaxSettings:
            {
                url: "https://physical-service.syncfusion.com/api/FileManager/FileOperations",
                getImageUrl: "https://physical-service.syncfusion.com/api/FileManager/GetImage",
                uploadUrl: "https://physical-service.syncfusion.com/api/FileManager/Upload",
                downloadUrl: "https://physical-service.syncfusion.com/api/FileManager/Download"
            },
            height: "375px"
        };
    },
    provide: {
            filemanager: [DetailsView, NavigationPane, Toolbar]
    },
    methods: {
        onCreated: function(args){
            // Click event for enable button
            document.getElementById("enable").addEventListener('click', (event) => {
                // Enable new folder toolbar item
                this.$refs.fileManagerinstance.enableToolbarItems(["newfolder"]);
            });
            // Click event for disable button
            document.getElementById("disable").addEventListener('click', (event) => {
                // Disable new folder toolbar item
                this.$refs.fileManagerinstance.disableToolbarItems(["newfolder"]);
            });
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";

#enable {
    position: relative;
    left: 20%;
    top: -10px;
}

#disable {
    position: relative;
    left: 30%;
    top: -10px;
}

</style>