How to Hide Navigation Pane, Context Menu & Toolbar in File Manager
33 Replies
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.
API reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.FileManager.IFileManager_members.html
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
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
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.
Leo Lavanya Dhanaraj
Attachment: FileManager_dedcb56a.zip
SIGN IN To post a reply.
