1. Home
  2. Forum
  3. Blazor
  4. How to Hide Navigation Pane, Context Menu & Toolbar in File Manager

How to Hide Navigation Pane, Context Menu & Toolbar in File Manager

Hi All,

Just a quick question...

As per above, how can I hide the Navigation Pane, Context Menu & Toolbar of the File Manager?

Basically, all I need is a simple File Picker that opens a specific folder and returns the url to the selected file (which will all be stored locally on the server in my use case).

Thanks in advance

Simon

23 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team August 24, 2020 11:57 AM UTC

Hi Simon, 
 
Greetings from Syncfusion support. 
 
Query 1- As per above, how can I hide the Navigation Pane, Context Menu & Toolbar of the File Manager? 
 
You can disable the Navigation pane, Context Menu and Toolbar using the following properties of FileManager. 
 
By setting Visible property of ToolbarSettings as false, we can hide the toolbar from FileManager. 
 
By setting Visible property of NavigationPaneSettings as false, we can hide the Navigation pane from FileManager. 
 
By setting Visible property of ContextMenuSettings as false, we can hide the Context Menu from FileManager. 
 
Refer the below code snippet. 
 
  <SfFileManager  ID="filemanager" @ref="file" View="Syncfusion.Blazor.FileManager.ViewType.Details" Path="@path" SelectedItems="@SelectedItems"> 
                            <FileManagerNavigationPaneSettings Visible="false"></FileManagerNavigationPaneSettings> 
                            <FileManagerContextMenuSettings Visible="false"></FileManagerContextMenuSettings> 
                            <FileManagerToolbarSettings Visible="false"></FileManagerToolbarSettings> 
                            <FileManagerEvents OnFileOpen="fileOpen"></FileManagerEvents> 
                            <FileManagerAjaxSettings Url="/api/Default/FileOperations" 
                                                     UploadUrl="/api/Default/Upload" 
                                                     DownloadUrl="/api/Default/Download" 
                                                     GetImageUrl="/api/Default/GetImage"> 
                            </FileManagerAjaxSettings> 
                        </SfFileManager> 
 
Query2- Basically, all I need is a simple File Picker that opens a specific folder and returns the url to the selected file (which will all be stored locally on the server in my use case). 
 
For your reference, we have prepared a sample. To achieve your requirement, you can render the FileManager component inside the Dialog component and open the component on Button click. 
 
Refer the below code snippet. 
 
<div id='container' @ref="container" class="fileupload"> 
            <SfUploader @ref="upload" ID="UploadFiles" Files="@files">                
            </SfUploader> 
            <SfButton ID="openBtn" OnClick="click"  Content="File Browser"></SfButton> 
        </div> 
        <div id='target' class="control-section"> 
            <SfDialog @ref="dialog" ID="dialog" Height="75%" Width="850px" Target="#target" Visible="false" ShowCloseIcon="true" Header="Select a file"> 
                <DialogEvents Opened="open" ></DialogEvents> 
                <DialogTemplates> 
                    <Content> 
                        <SfFileManager  ID="filemanager" @ref="file" View="Syncfusion.Blazor.FileManager.ViewType.Details" Path="@path" SelectedItems="@SelectedItems"> 
                            <FileManagerNavigationPaneSettings Visible="false"></FileManagerNavigationPaneSettings> 
                            <FileManagerContextMenuSettings Visible="false"></FileManagerContextMenuSettings> 
                            <FileManagerToolbarSettings Visible="false"></FileManagerToolbarSettings> 
                            <FileManagerEvents OnFileOpen="fileOpen"></FileManagerEvents> 
                            <FileManagerAjaxSettings Url="/api/Default/FileOperations" 
                                                     UploadUrl="/api/Default/Upload" 
                                                     DownloadUrl="/api/Default/Download" 
                                                     GetImageUrl="/api/Default/GetImage"> 
                            </FileManagerAjaxSettings> 
                        </SfFileManager> 
                    </Content> 
                </DialogTemplates> 
            </SfDialog> 
        </div> 
  public void click() 
    { 
        this.dialog.Show(); 
        path = "/"; 
    } 
    public void open(Object args) 
    { 
        this.file.Refresh(); 
    } 
    public void fileOpen(Syncfusion.Blazor.FileManager.FileOpenEventArgs args) 
    { 
        string dataString = JsonConvert.SerializeObject(args.FileDetails); 
        Dictionary<string, dynamic> fileDetails = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(dataString); 
        if (fileDetails["isFile"]) 
        { 
            args.Cancel = true; 
            files = new List<UploaderUploadedFiles> { new UploaderUploadedFiles() { Name = fileDetails["name"], Type = fileDetails["type"], Size = fileDetails["size"] } }; 
            this.dialog.Hide(); 
        } 
    } 
 
Refer the below screenshot. 
 
 
When clicking the File Browser button. 
 
 
When double the corresponding files onFileOpen event is triggered and add the selected files to the Upload object. Refer the below screenshot. 
 
 
 
Refer the sample link below. 
 
You can get the Corresponding file path by using FileSelection event. Refer the below code snippet. 
 
<SfFileManager ID="filemanager" @ref="file" View="Syncfusion.Blazor.FileManager.ViewType.Details" Path="@path" SelectedItems="@SelectedItems"> 
                          <FileManagerEvents OnFileOpen="fileOpen" FileSelection="fileSelect"></FileManagerEvents> 
                            <FileManagerAjaxSettings Url="/api/Default/FileOperations" 
                                                     UploadUrl="/api/Default/Upload" 
                                                     DownloadUrl="/api/Default/Download" 
                                                     GetImageUrl="/api/Default/GetImage"> 
                            </FileManagerAjaxSettings> 
                        </SfFileManager>  
 public void fileSelect(Syncfusion.Blazor.FileManager.FileSelectionEventArgs args) 
    { 
        string dataString1 = JsonConvert.SerializeObject(args.FileDetails); 
        Dictionary<string, dynamic> fileDetails1 = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(dataString1); 
        if (fileDetails1["isFile"]) 
        { 
            string slectedFile = (this.file.AjaxSettings.Url + fileDetails1["filterPath"].Replace("\\", "/") + fileDetails1["name"]); 
        } 
    } 
 
Refer to the below links to know more about the FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
SI Simon August 28, 2020 03:16 AM UTC

Hi Sowmiya,

Thanks for the reply.

All works great!

Thanks again.

Simon

SP Sowmiya Padmanaban Syncfusion Team August 28, 2020 05:00 AM UTC

Hi Simon,  
  
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 


SI Simon August 29, 2020 04:33 AM UTC

Hi Sowmiya,

Sorry, one more question about the FileManager....

How can I then inject this functionality into a DataGrid?

For example, I have a Blazor WebAssembly app where I have a field, "system.picture", which contains the URL to the image on the Server. How can I get the user (when carrying out a CRUD operation on the DataGrid) to select a file from the Server, using the FileManager functionality, and have the URL of the selected file saved to the database, and the image that is displayed in the DataGrid updated?

Thanks in advance and sorry for all the questions!

Simon

RS Renjith Singh Rajendran Syncfusion Team August 31, 2020 11:55 AM UTC

Hi Simon, 

Query 1 : (when carrying out a CRUD operation on the DataGrid) to select a file from the Server, using the FileManager functionality, and have the URL of the selected file saved to the database, 
We suggest you to use the EditTemplate feature of Grid. With this feature you can render a SfFileManager in Grid’s edit form. Please refer the below documentations for more details, 

Now based on suggestion from previous update you can fetch the path of selected image(available in slectedFile variable) from FileManager.  

To save the fetched file path(slectedFile) to Grid, we suggest you to bind the OnActionBegin event to Grid. In this event handler, based on the RequestType as Save, update the corresponding “system.Picture” column value. In the below code, we have the image src path in “Imagesrc” column. So we have assigned the slectedFile to Args.Data.Imagesrc. Please refer the codes below, 

 
<GridEvents OnActionBegin="BeginHandler" TValue="Order"></GridEvents>
 
<GridColumn Field="Imagesrc" HeaderText="Customer Name" Width="200"> 
    ... 
    <EditTemplate> 
        <SfFileManager ID="filemanager" @ref="file" ...> 
            <FileManagerEvents OnFileOpen="fileOpen" FileSelection="fileSelect"></FileManagerEvents> 
            ... 
        </SfFileManager> 
    </EditTemplate> 
</GridColumn> 

public string slectedFile { get; set; }public void BeginHandler(ActionEventArgs<Order> Args){    if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save)    {        //based on the request type as save, assign the fetched path from file manager to Grids data.        Args.Data.Imagesrc = slectedFile;    }}public void fileSelect(Syncfusion.Blazor.FileManager.FileSelectionEventArgs args){    string dataString1 = JsonConvert.SerializeObject(args.FileDetails);    Dictionary<string, dynamic> fileDetails1 = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(dataString1);    if (fileDetails1["isFile"])    {        //fecth the selected image path, as like suggested in previosu update.        slectedFile = (this.file.AjaxSettings.Url + fileDetails1["filterPath"].Replace("\\", "/") + fileDetails1["name"]);    }}

Query 2 : and the image that is displayed in the DataGrid updated? 
You can display an image in Grid column by using the Column Template feature of Grid. Please refer the below online demo and documentations for more details. 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


SI Simon September 1, 2020 01:35 AM UTC

Hi Renjith,

Thanks for the reply, that part is working fine now :)

I do have another query regarding the FileManager and that how to show the currently selected file (from the database) when the file list opens on Edit?

I know that I can easily do it with "MultiSelect", but how can I do it if "MultiSelect" is false (i.e. single select), as the "SelectedItems" option only seems to work if "MultiSelect" is true?

Thanks again for all your help so far.

Regards

Simon

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 1, 2020 02:33 PM UTC

Hi Simon, 
 
We have validated your reported problem that SelectedItems property is not working, when using AllowMultiSelection property as true in File Manager. But, we were unable to replicate your reported problem with our FileManager. 
 
We would like to let you know that AllowMultiSelection is set as true by default in FileManager to allow select multiple files/folders. We need to pass string array of file/folders names as value for SelectedItems property to add select them by default on File Manager. When AllowMultiSelection is set as false, then last value of SelectedItems array will get selected. This is the default behavior of the component. 
 
We have modified our previously updated sample in this forum, for your convenience. You can check the behavior of this properties with that sample. 
 
 
If we misunderstood your reported problem, then please share us more details regarding like screenshot or video footage of your reported problem. Also, if possible, replicate your reported problem in the above attached sample and share it to us. 
 
This information would help us to check your problem and to provide you the prompt solution. 
 
Regards 
Shameer Ali Baig S. 


SI Simon September 1, 2020 09:25 PM UTC

Hi Shameer,

The "SelectedItems" works fine when 'AllowMultiSelection="true"', however, I cannot seem to get the "SelectedItems" to work when 'AllowMultiSelection="false"'?

I have a string array with ONE element, which is my file - au.png - which is on the Server in a Blazor webassembly app, in a folder called 'countries'. I have tried passing various strings in the string array:

https://localhost:5001/countries/au.png
countries/au.png
au.png
au

All have failed to select an image.

Thanks in advance

Simon


SP Sowmiya Padmanaban Syncfusion Team September 2, 2020 11:33 AM UTC

Hi Simon, 
 
Based on your shared details, we suspect that your requirement is  to select the image file inside the countries folder on initial loading. In that case, you need to navigate to the countries folder by using Path property and select the items using SelectedItems property. 
 
By default, SelectedItems property searches that defined name is available in the corresponding path of the FileManager component. SelectedItems only accepts the file/folder name. 
 
Refer the below code snippet. In the below code, we have navigate inside the Food folder using path property and select the Nuggets.png image using SelectedItems property.  
 
@using Syncfusion.Blazor.FileManager; 
 
<SfFileManager @ref="file" SelectedItems="@SelectedItems" Path="@path"> 
                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload" 
                             DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download" 
                             GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage"> 
    </FileManagerAjaxSettings> 
</SfFileManager> 
@code{ 
    SfFileManager file; 
    public string path { get; set; } = "/Pictures/Food"; 
    public string[] SelectedItems { get; set; } = new string[] { "Nuggets.png" }; 
} 
 
Refer the sample link. 
 
Please let us know, if have any further assistance. 
 
Regards,  
Sowmiya.P 


SI Simon September 5, 2020 01:04 AM UTC

Hi Sowmiya,

Thanks for the reply. That bit is now working fine!

One last (hopefully!) question for the File Manager....

Is there a way to remove the 'BreadCrumb' (highlighted in the attached image), whilst keeping the 'Search Bar' & also change the text in the 'Search Bar'?

Thanks in advance

Attachment: filemanager_1_113214e.7z

SP Sowmiya Padmanaban Syncfusion Team September 7, 2020 11:15 AM UTC

 
Hi Simon,  
 
Query1-  You can hide the 'BreadCrumb' by using CSS styles. 
 
Refer the below CSS styles to hide the only the file path elements within in BreadCrumbBar of FileManager component. So, BreadcrumbBar will display only the searchBar. 
 
<style> 
    #filemanager_breadcrumbbar .e-addressbar-ul { 
        display: none; 
    } 
</style> 
 
 
Query2 – Change the text in Search TextBox. 
 
You can change the search placeholder of file manager component using Localization property. Refer the below code snippet. 
 
Refer the below link for how to change the Localization for Blazor application. 
 
You need to change the Localization text inside the Resources folder. 
 
 
 
Refer the below link for default localization value in FileManager component. 
 
 
Refer the below screenshot. 
 
 
 
Refer the below sample for your reference. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


SI Simon September 8, 2020 12:36 AM UTC

Hi Sowmiya,

Thanks again for your help.

Is there any way to increase the row height in the file list (when displaying icons)? Currently, the bottom part of the name of the Image is not displayed.

Thanks in advance

Simon

SP Sowmiya Padmanaban Syncfusion Team September 8, 2020 09:44 AM UTC

Hi Simon,  
 
Based on your shared details, we suspect that your requirement is to increase the image and row size in LargeIcons view of FileManager component. If you want to customize the file manager elements, we have add specific class for each elements of FileManager. Using that element’s class selectors, you can apply CSS styles based on your requirement.  
 
<style> 
   /* Change the file manager image size*/ 
    .e-filemanager .e-large-icons .e-list-img { 
        height: 140px; 
        max-height: inherit; 
    } 
    /* Change the icon size of FileManager component*/ 
    .e-filemanager .e-large-icons .e-list-icon { 
        height: 140px; 
        width: 135px; 
        margin: 0 10px !important; 
    } 
    /* change the image list item size */ 
    .e-filemanager .e-large-icons .e-list-item { 
        height: 174px; 
        width: 164px; 
    } 
</style> 
 
 
If we misunderstood your requirement. Could you please share us more details regarding your requirement. It will help us to provide you a prompt solution to meet your requirement. 
 
 Please let us know, if you have need any further assistance.  
  
Regards,   
Sowmiya.P  


SI Simon September 8, 2020 10:48 PM UTC

Hi Sowmiya,

Thanks for the reply.

All good now :)

Regards

Simon

SP Sowmiya Padmanaban Syncfusion Team September 9, 2020 04:43 AM UTC

Hi Simon,  
  
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 


SK Sam Konstas Smith October 27, 2025 05:38 PM UTC

Interesting!

That setup sounds similar to how I handle interface customization for certain applications. In my case, I had to simplify the layout for a restaurant project that displayed the white limozeen menu on a local system without extra navigation panels or toolbars. The goal was to create a clean, focused window that only showed essential content, much like your idea of a file picker with minimal distractions.


LD LeoLavanya Dhanaraj Syncfusion Team October 28, 2025 08:17 AM UTC

Hi Sam,

With the shared details, we understand that you want to remove the navigation pane and toolbars in the Blazor FileManager component. To meet your need, we suggest setting the Visible property NavigationPaneSettings and ToolbarSettings in the Syncfusion FileManager component. Here, we have included the sample and screenshots for your reference.


Sample : Attached as a zip file.


Provider : https://github.com/SyncfusionExamples/ej2-aspcore-file-provider


Output screenshot:


Please refer to the details shared on your end. If we have misunderstood your needs or if you have any concerns regarding the information provided, please give us a clear and description of your requirements, along with a visual representation of your expectations. This will help us assist you more effectively in finding a solution.


Your input is invaluable in helping us understand your issue and in providing a timely resolution.


Regards,

Leo Lavanya Dhanaraj


Attachment: FileManager_dedcb56a.zip

MA Malik November 3, 2025 09:51 AM UTC

Thanks for sharing this! I was actually searching for something similar while working on a local file picker project. By the way, this reminded me of how I organized a small app for listing local files, kind of like how I was listing Dutch Bros menu prices for a small internal tool — keeping it clean and without extra navigation panes made a big difference. Great info here!


LD LeoLavanya Dhanaraj Syncfusion Team November 4, 2025 05:18 AM UTC

Malik, thanks for the feedback—glad it helped! A clean, pane-free layout is a great choice for both file pickers and list tools.


Please get back to us if you need any further assistance in future,



JB jan bill November 30, 2025 07:22 AM UTC


Thanks for sharing this! I was actually searching for something similar while working on a local file picker project. By the way, this reminded me of how I organized a small app for listing local files, kind of like how I was listing the Bob Evans menu for a small internal tool — keeping it clean and without extra navigation panes made a big difference. Great info here!




LD LeoLavanya Dhanaraj Syncfusion Team December 1, 2025 02:41 PM UTC

Thanks for the update. Please get back to us if you need any further assistance in future.


SS seo servicestech December 14, 2025 01:29 AM UTC

Thanks for sharing this! I was looking for something similar while working on a local file picker project. It reminded me of how I organized a small app to list local files—much like when I structured the texas roadhouse steak menu for an internal tool. Keeping everything simple and free of extra navigation panels really made a big difference. Great information overall!


PS Praveen Sellappan Syncfusion Team December 15, 2025 06:37 AM UTC

Thank you for your feedback! We're glad you found the information helpful for your local file picker project. If you have any issues or need assistance, feel free to reach out anytime!


Regards,

Praveen Sellappan,



Loader.
Up arrow icon