Hiding custom toolbar items depending on selected file/folder

[Sean Hamilton]

Is there a way to set whether a toolbar item is displayed if a file or folder is selected? For example, the built in delete button is only visible if a file is selected, and not a folder. From inspecting the HTML:

<div class="e-toolbar-item e-hidden" aria-disabled="false" title="Delete"><button

    class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="overview_tb_delete" tabindex="-1"

    style="width: auto;"><span class="e-btn-icon e-icons e-fe-delete e-icon-left"></span><span

      class="e-tbar-btn-text">Delete</span></button></div>

<div class="e-toolbar-item" aria-disabled="false" title="Delete"><button

    class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="overview_tb_delete" tabindex="-1"

    style="width: auto;"><span class="e-btn-icon e-icons e-fe-delete e-icon-left"></span><span

      class="e-tbar-btn-text">Delete</span></button></div>

The only difference seems to be the addition of the 'e-hidden' class. Is there a way I can inform the FileManager to only show my custom toolbar item when only folders are selected?

[Christopher Issac Sunder K]

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, 

Sample: https://stackblitz.com/edit/angular-9xo4xg-gjel3c 

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