Enable disable toolbar item in EJ2 TypeScript File manager control
26 Apr 20233 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.
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 component
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 FileManager
filemanagerInstance.appendTo('#filemanager');
// Click event for enable button
document.getElementById("enable").onclick = function(args) {
// Enable new folder toolbar item
filemanagerInstance.enableToolbarItems(["newfolder"]);
}
// Click event for enable button
document.getElementById("disable").onclick = function(args) {
// Disable 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 Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/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="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>
</body>
</html>