Having trouble getting help?
Contact Support
Contact Support
Enable or disable a toolbar item in EJ2 TypeScript File Manager control
3 Mar 20255 minutes to read
The toolbar items can be enabled or disabled by specifying the items in the enableToolbarItems
or disableToolbarItems
methods, respectively.
The following example demonstrates how to enable and disable toolbar items on button click.
import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView)
let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager control
let filemanagerInstance: FileManager = new FileManager({
ajaxSettings: {
url: hostUrl + 'api/FileManager/FileOperations',
getImageUrl: hostUrl + 'api/FileManager/GetImage',
uploadUrl: hostUrl + 'api/FileManager/Upload',
downloadUrl: hostUrl + 'api/FileManager/Download'
},
height: "330px"
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
let enableEle: HTMLElement = document.getElementById('enable');
if(enableEle) {
// Click event for enable button
enableEle.addEventListener('click', function () {
// Enable new folder toolbar item
filemanagerInstance.enableToolbarItems(["newfolder"]);
});
}
let disableEle: HTMLElement = document.getElementById('disable');
if(disableEle) {
// Click event for disable button
disableEle.addEventListener('click', function () {
// Enable new folder toolbar item
filemanagerInstance.disableToolbarItems(["newfolder"]);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 File Manager</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 File Manager Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="filemanager"></div>
<button id="enable" class="e-btn e-success">Enable New Folder toolbar item</button>
<button id="disable" class="e-btn e-danger">Disable New Folder toolbar item</button>
</div>
<style>
#enable {
position: relative;
left: 20%;
top: 10px;
}
#disable {
position: relative;
left: 30%;
top: 10px;
}
</style>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}