1. Home
  2. Forum
  3. Blazor
  4. How to add custom icon and item to Toolbar in Blazor FileManager

How to add custom icon and item to Toolbar in Blazor FileManager

Query: How to add custom icon and item to Toolbar in Blazor FileManager

Answer:
We can add the custom icon in toolbar of FileManager component by using its ToolbarCreated event.  
 
Refer the below code snippet. We have added  “_tb_cutom” class in particular toolbar item value by default. 
 
_tb = denotes the toolbar. 
_custom = item value in toolbar 
<SfFileManager @ref="file" ID="file"> 
    <FileManagerEvents  ToolbarCreated="toolbarCreate"></FileManagerEvents> 
    <FileManagerToolbarSettings Items="@Items"></FileManagerToolbarSettings> 
</SfFileManager>  
 
public string[] Items = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details", "Custom" }; 
 
public void toolbarCreate( ToolbarCreateEventArgs args) { 
        for(int i = 0;i<args.Items.Count;i++) { 
            if(args.Items[i].Id == file.ID + "_tb_custom") { 
                args.Items[i].PrefixIcon= "e-icons e-fe-tick"; 
            } 
        } 
    } 
<style> 
    .e-fe-tick::before { 
  content: '\e614'; 
} 
</style> 
Refer the below sample link here. 
 


5 Replies 1 reply marked as answer
IG Ian Gaskill March 11, 2021 02:45 PM UTC

This doesn't appear to work in 18.4.0.46, is there a different method to accomplish this in more recent versions?

IL Indhumathy Loganathan Syncfusion Team March 12, 2021 04:12 PM UTC

Hi Ian, 
 
We have validated your reported query in FileManager component. We have bound all the property of FileManager component based on FileManagerDirectoryContent model class as we have handled the ajax request based on this class. 
 
Please, refer the below release notes to understand about TValue in FileManager component. 
 
 
Please refer to the below code. 
 
<SfFileManager TValue="FileManagerDirectoryContent" @ref="file" ID="file"> 
    <FileManagerEvents TValue="FileManagerDirectoryContent" ToolbarCreated="toolbarCreate"></FileManagerEvents> 
    <FileManagerAjaxSettings Url="https://localhost:44384/api/Default/FileOperations" 
                             UploadUrl="https://localhost:44384/api/Default/Upload" 
                             DownloadUrl="https://localhost:44384/api/Default/Download" 
                             GetImageUrl="https://localhost:44384/api/Default/GetImage"> 
    </FileManagerAjaxSettings> 
    <FileManagerToolbarSettings Items="@Items"></FileManagerToolbarSettings> 
</SfFileManager> 
 
But the custom icon is not added for the Toolbar item through toolbar create event. We have considered this as bug from our side. We will include this fix in our Volume 1, 2021 SP release. You can track the status of your reported problem through the below portal link, 
 
 
We appreciate your patience until then. 
 
Regards, 
Indhumathy L

IG Ian Gaskill April 5, 2021 03:54 PM UTC

I'm sorry the feedback wasn't directed at me, so I'm unable to check the status, has this been resolved

KR Keerthana Rajendran Syncfusion Team April 6, 2021 10:53 AM UTC

Hi Ian, 
 
Sorry for the inconvenience.  
 
The reported issue is scheduled for Volume 1 SP release which is expected to be rolled out by the month of May, 2021 and you can track the status of this issue through the below feedback portal link now. 
 
 
Please let us know if you need further assistance.  
 
Regards, 
Keerthana.  


Marked as answer
KR Keerthana Rajendran Syncfusion Team August 25, 2021 07:39 AM UTC

Hi Lan, 
 
In 2021 Volume 1 service pack release v19.1.0.63, we have included a fix for the issue “Unable to add custom icon for Toolbar in Blazor File Manager”. To access this fix, we suggest you update the package to the 19.1.0.63 or latest version. 
 
Refer to the sample link below. 
 
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards, 
Keerthana R.  


Loader.
Up arrow icon