1. Feedback
  2. JavaScript
  3. 50324

Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Custom toolbar button visible only when there are selected files

Greetings,

I am trying to create a FileManager component (with EJ2 23.2.4) with a button that shows up when there are one or more files selected (and hides when no files are selected), like the Cut, Copy... buttons do by default.

So I did this setup:

var browser = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
    },
    toolbarItems: [
        { name: 'NewFolder' },
        { name: 'SortBy' },
        { name: 'Refresh' },
        { name: 'View' },
        { name: 'Details' },
        { name: 'Cut' },
        { name: 'Copy' },
        { name: 'Paste' },
        { name: 'Delete' },
        { name: 'Rename' },
        {
            text: 'Permissions',
            name: 'Permissions',
            prefixIcon: 'e-table-of-content',
            tooltipText: 'Set permissions for this file/folder',
            visible: false,
            id: 'permissionsBtn',
        },
    ],
    view: "Details",
    allowMultiSelection: true,
    fileSelect: onFileSelect,
  });

  browser.appendTo('#browser');

This renders this toolbar:

Screenshot_20240128_110119.png


There's no default option (as far as I could find) to make this custom button that shows up only when there are selected files, so I clinged in the fileSelect hook with the onFileSelect() function.

function onFileSelect(args) {
    const menuItems = environment_browser.toolbarItems;
    const selectedItems = environment_browser.selectedItems.length;
    const permissionsBtn = menuItems.filter( e => e.id === 'permissionsBtn' )[0];
    permissionsBtn.visible = (selectedItems > 0);
}

This works just fine, except that when there's only one file or folder selected, the toolbar will flash for an instant and show the default 'New', 'Sort', 'Refresh'... buttons, as if there were no files/folders selected, plus the custom button:

Screenshot_20240128_110237.png

But if one selects more files or folders, those buttons will hide and the 'Cut', 'Copy'... buttons will show up (plus the custom button):

Screenshot_20240128_110329.png

It will be great to make it to show like in this last screenshot when there's only one file or folder selected, or even better, if you could provide an option when creating a custom toolbar button that makes it show or hide depending of the files or folders selected, like the default Cut/Copy/Delete buttons do.