Hide custom button when two o more files are selected

[Daniel]

Hi,

I have a custom button in the toolbar and I would like to add two behavior:

1. The custom button must only appear if a file is selected.

2. When more then one file is selected the custom button must hide.

Thanks

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Daniel, 

 

Greetings from Syncfusion support. 

 

We have looked into your expected requirement with FileManager’s toolbar. We can achieve your expected requirement by using disableToolbarItems method of FileManager, which can be used to disable any toolbar item in FileManager. Similarly, to enable the disabled toolbar item, we can use enableToolbarItems method. 

 

Please, check out the following code sample to achieve your expected requirement. 

 

@{ 

    string[] items = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details", "Custom" }; 

} 

<div class="control-section"> 

    <div class="sample-container"> 

        <!--  Filemanager element declaration --> 

        @Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings() 

        { 

            Url = "/Home/FileOperations", 

            GetImageUrl = "/Home/GetImage", 

            UploadUrl = "/Home/Upload", 

            DownloadUrl = "/Home/Download" 

        }).ToolbarSettings(new Syncfusion.EJ2.FileManager.FileManagerToolbarSettings() 

        { 

            Items = items 

        }).ToolbarCreate("onToolbarCreate").FileSelect("FileSelect").Created("onCreate").Render() 

        <!-- end of filemanager element --> 

    </div> 

</div> 

<script> 

    // enabling and disabling the custom toolbar item based on selected file count 

    function FileSelect(args) { 

        if (this.getSelectedFiles().length == 1) { 

            this.enableToolbarItems(["Custom"]); 

        } else { 

            this.disableToolbarItems(["Custom"]); 

        } 

    } 

    function onToolbarCreate(args) { 

        for (var i = 0; i < args.items.length; i++) { 

            if (args.items[i].id === this.element.id + '_tb_custom') { 

                args.items[i].prefixIcon = 'e-icons e-fe-tick'; 

            } 

        } 

    } 

 

    function onCreate(args) { 

        //disabling the custom toolbar item on initial render 

        this.disableToolbarItems(["Custom"]); 

    } 

</script> 

<style> 

    .e-fe-tick::before { 

        content: '\e614'; 

    } 

 

    /*setting visibility hidden stop the disabled toolbar item*/ 

    #file .e-toolbar-item.e-overlay { 

        visibility: hidden; 

    } 

</style> 

 

 

In the above code sample, we have added visibility as hidden to the disabled toolbar item to meet your expected requirement of hiding the custom toolbar item. 

 

Check out the following links to know more about FileManager in ASP.NET MVC platform. 

 

Demos: https://ej2.syncfusion.com/aspnetmvc/FileManager/Overview#/material  

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/file-manager/how-to/adding-custom-item-to-toolbar/  

 

API Reference: 

https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.FileManager.FileManager.html  

 

https://ej2.syncfusion.com/documentation/api/file-manager/#disabletoolbaritems  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Daniel]

Hi,

Thanks for the help.

[Sowmiya Padmanaban]

Hi Daniel,  

  

Most Welcome. We are happy to hear that our provided solution meets your requirement. Please contact us, if you need any help from us. 

  

Regards, 

Sowmiya.P