1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Hide custom button when two o more files are selected

Hide custom button when two o more files are selected

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

3 Replies 1 reply marked as answer
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team July 20, 2020 08:14 AM UTC

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. 
 
 
 
API Reference: 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


Marked as answer
DA Daniel July 21, 2020 01:01 AM UTC

Hi,
Thanks for the help.

SP Sowmiya Padmanaban Syncfusion Team July 21, 2020 04:15 AM UTC

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 


Loader.
Up arrow icon