Context Menu in Blazor FileManager Component
10 Jun 202412 minutes to read
The context menu items can be added for the files, folders, and layout in the Blazor FileManager component using the properties of the ContextMenuSettings below.
- File - Specifies the array of string that is used to configure file items.
- Folder - Specifies the array of string that is used to configure folder items.
- Layout - Specifies the array of string that is used to configure layout items.
The following table provides the default context menu item and the corresponding target areas.
| Menu Name | Menu Items | Target |
| Layout | * SortBy * View * Refresh * NewFolder * Upload * Details * Select all | * Empty space in the view section (details view and large icon view area). * Empty folder content. |
| Folders | * Open * Delete * Rename * Downloads * Details | * Folders in treeview, details view, and large icon view. |
| Files | * Open * Delete * Rename * Downloads * Details | * Files in details view and large icon view. |
Adding Custom Items
In the Blazor FileManager component, the context menu can be customized by utilizing the ContextMenuSettings and the MenuOpened event.
The following example demonstrates how to add a custom item to the context menu. The ContextMenuSettings is used to add the new menu item, while the MenuOpened event is utilized to add an icon to the newly created menu item.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent" @ref="FileManager">
<FileManagerEvents TValue="FileManagerDirectoryContent"></FileManagerEvents>
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
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>
<FileManagerContextMenuSettings File="@Items" Folder="@Items" Layout="@Items"></FileManagerContextMenuSettings>
<FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="MenuOpened"></FileManagerEvents>
</SfFileManager>
@code {
SfFileManager<FileManagerDirectoryContent>? FileManager;
public string[] Items = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details", "Custom" };
public void MenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
{
for(int i=0; i < args.Items.Count(); i++)
{
if (args.Items[i].Id == FileManager?.ID + "_cm_custom")
{
args.Items[i].IconCss = "e-icons e-fe-tick";
}
}
}
}
<style>
.e-fe-tick::before {
content: '\e614';
}
</style>Showing Different Context Menu for Files and Folders
In the Blazor FileManager component, you can customize the context menu items for files and folders using the FileManager ContextMenuSettings File and Folder properties.
The following example demonstrates how to achieve this by showing different context menu items for files and folders.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent" @ref="FileManager">
<FileManagerEvents TValue="FileManagerDirectoryContent"></FileManagerEvents>
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
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>
<FileManagerContextMenuSettings File="@FileItems" Folder="@FolderItems"></FileManagerContextMenuSettings>
</SfFileManager>
@code {
SfFileManager<FileManagerDirectoryContent>? FileManager;
public string[] FileItems = new string[] { "Delete", "Download", "Rename", "|", "Details" };
public string[] FolderItems = new string[] { "Open", "|", "Cut", "Copy", "Paste"};
}Enabling or Disabling Items
In the Blazor FileManager component, you can enable or disable context menu items by setting the Disabled value of the MenuOpened event arguments to either true or false.
In the following example, the Cut context menu item is disabled for the folders.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerEvents TValue="FileManagerDirectoryContent"></FileManagerEvents>
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
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>
<FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="MenuOpened"></FileManagerEvents>
</SfFileManager>
@code {
public void MenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
{
for (int i = 0; i < args.FileDetails.Count(); i++)
{
if (!args.FileDetails[i].IsFile)
{
for (int j = 0; j < args.Items.Count(); j++)
{
if (args.Items[j].Text == "Cut")
{
args.Items[j].Disabled = true;
}
}
}
else
{
for (int j = 0; j < args.Items.Count(); j++)
{
if (args.Items[j].Disabled == true;)
{
args.Items[j].Disabled = false;
}
}
}
}
}
}Showing or Hiding Items
In the Blazor FileManager component, you can control the visibility of context menu items by setting the Hidden value of the MenuOpened event arguments to true or false.
In the following example, the Cut context menu item is shown for the files.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent" >
<FileManagerEvents TValue="FileManagerDirectoryContent"></FileManagerEvents>
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
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>
<FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="MenuOpened"></FileManagerEvents>
</SfFileManager>
@code {
public void MenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
{
for (int i = 0; i < args.FileDetails.Count(); i++)
{
if (!args.FileDetails[i].IsFile)
{
for (int j = 0; j < args.Items.Count(); j++)
{
if (args.Items[j].Text == "Cut")
{
args.Items[j].Hidden = true;
}
}
}
else
{
for (int j = 0; j < args.Items.Count(); j++)
{
if (args.Items[j].Hidden == true)
{
args.Items[j].Hidden = false;
}
}
}
}
}
}Events
The Blazor FileManager Context Menu component has a MenuOpened and OnMenuClick events that can be triggered for certain actions. These events can be bound to the FileManager using the FileManagerEvents, which requires the TValue to be provided.
NOTE
All the events should be provided in a single FileManagerEvents component.
MenuOpened
The MenuOpened event of the Blazor FileManager component is triggered before the context menu is opened.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
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>
<FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="MenuOpened"></FileManagerEvents>
</SfFileManager>
@code {
public void MenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
{
// Here, you can customize your code.
}
}OnMenuClick
The OnMenuClick event of the Blazor FileManager component is triggered when the context menu item is clicked.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
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>
<FileManagerEvents TValue="FileManagerDirectoryContent" OnMenuClick="OnMenuClick"></FileManagerEvents>
</SfFileManager>
@code {
public void OnMenuClick(MenuClickEventArgs<FileManagerDirectoryContent> args)
{
// Here, you can customize your code.
}
}