We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hiding custom toolbar items depending on selected file/folder

Thread ID:

Created:

Updated:

Platform:

Replies:

145078 Jun 5,2019 01:49 PM UTC Jun 6,2019 11:44 AM UTC Angular - EJ 2 1
loading
Tags: FileManager
Sean Hamilton
Asked On June 5, 2019 01:49 PM UTC

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 [Syncfusion]
Replied On June 6, 2019 11:44 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon