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

Subscribe to this post

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?

Reply | Reply with quote

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,

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

Reply | Reply with quote

Hiding custom toolbar items depending on selected file/folder

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US