Enable disable toolbar item in Vue File manager component

16 Mar 20234 minutes to read

The toolbar items can be enabled/disabled by specifying the items in enableToolbarItems or disableToolbarItems methods respectively.

The following example shows enabling and disabling toolbar items on button click.

<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 Vue from "vue";
import { FileManagerPlugin, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";

Vue.use(FileManagerPlugin);
Vue.use(ButtonPlugin);

export default {
    data () {
        return {
           ajaxSettings:
            {
                url: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",
                getImageUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",
                uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",
                downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
            },
            view: "Details",
            height: "330px"
        };
    },
    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-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-icons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";

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

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

</style>