Enable/Disable toolbar item in Vue File Manager component

21 Feb 20257 minutes to read

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

The following example demonstrates how to enable and disable 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://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"
};

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-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>

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://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"
            },
            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-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>