Hi Sean,
Greetings from Syncfusion support.
We checked your query –
“To show custom toolbar items only on folder selection”. You can achieve this requirement by adding or removing the
‘e-hidden’ class to the custom toolbar item in the File Manager’s
fileSelect event based on whether the selected item is file or folder.
Initially in the File Manager’s
created event, get the
custom toolbar’s element and store it in a private variable and add
‘e-hidden’ class to it. So, on initial render, the custom toolbar item will be hidden.
|
// File Manager’s created event function
onCreated(args) {
var i = 0;
// Get all the toolbar items span element which contains the text
var toolbarItems = this.fileManagerInstance.toolbarModule.toolbarObj.element.querySelectorAll('.e-tbar-btn-text');
while (i < toolbarItems.length) {
// If it is the custom toolbar item, then store its item element in private variable
this.customToolElement = (toolbarItems[i].innerHTML === "Custom") ? toolbarItems[i].closest('.e-toolbar-item') : ''
i++;
}
// Add e-hidden class to the custom toolbar item’s element
this.customToolElement.classList.add('e-hidden');
} |
Then, in the
fileSelect event check condition for file and folder and add the
‘e-hidden’ class accordingly as given in below code snippet,
|
// File Manager’s fileSelect event function
onFileSelect(args) {
if (args.action as any === "select") {
// Checks if selected item is folder and contains e-hidden class
if (!args.fileDetails.isFile && this.customToolElement.classList.contains('e-hidden'))
// Remove the class from custom toolbar item
this.customToolElement.classList.remove('e-hidden');
// Checks if selected item is file and does not contain e-hidden class
else if (args.fileDetails.isFile && !this.customToolElement.classList.contains('e-hidden'))
// Add the class to custom toolbar item
this.customToolElement.classList.add('e-hidden');
}
// Add class to custom toolbar item on unselect action when selected items is 0
else if (args.action as any === "unselect" && this.fileManagerInstance.selectedItems.length === 0)
}
} |
Please find the sample for your reference below,
Here we have hidden and displayed a single custom toolbar item based on whether it is file or folder. Similarly, using above steps you can do it for multiple custom toolbar items and add cases for what to do when both file and folder are selected.
Let us know if you have any concerns.
Thanks,
Christo
