1. Home
  2. Forum
  3. Blazor
  4. How to add custom item on context menu in File Manager

How to add custom item on context menu in File Manager

In the app from this link here I added a custom item following the steps from here but now I am stuck trying to figure out the args parameter for both events. 
It gives the following erros:
1. "Using the generic type MenuOpenEventArgs requires 1 types argument"
2. "Using the generic type MenuClickEventArgs requires 1 types argument"

This is my code:

      
                             GetImageUrl="/api/SampleData/GetImage"
                             UploadUrl="/api/SampleData/Upload"
                             DownloadUrl="/api/SampleData/Download">
   

   
    MenuOpened" OnMenuClick="OnMenuClick">

@code {
    public string[] Items = new string[] { "Open", "|", "Delete", "Download", "Rename", "|", "Details", "Custom" };


    //// Icon added to custom menu item
    void MenuOpened(MenuOpenEventArgs args)
    {
        // THIS CODE WAS COPIED FOR THE MVC EXAMPLE. HOPE IT IS THE SAME FOR BLAZOR
        for (var i = 0; i < args.items.length; i++)
        {
            if (args.items[i].id == this.element.id + "_cm_custom")
            {
                args.items[i].iconCss = "e-icons e-fe-tick";
            }
        }
    }


    //// event for custom menu item
    void OnMenuClick(MenuClickEventArgs args)
    {
        if (args.item.text == "Custom")
        {
            // What code should be placed here to access the controler ???? I only need the name of the selected file / picture
        }
    }
}

5 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team May 13, 2021 04:07 PM UTC

Hi Ben, 
 
Greetings from Syncfusion support. 
 
We have validated your reported query in File Manager component. We have standardized our Blazor File Manager component in 18.4.30 version and bound all the property based on FileManagerDirectoryContent model class. 
 
Please, refer the below release notes to understand about TValue in FileManager component. 
 
 
Please refer to the below code to resolve your issue. 
 
@using Syncfusion.Blazor.FileManager; 
 
<div class="control-section"> 
    <SfFileManager TValue="FileManagerDirectoryContent" @ref="FileManager"> 
        <FileManagerAjaxSettings Url="/api/FileManager/FileOperations" 
                                 UploadUrl="/api/FileManager/Upload" 
                                 DownloadUrl="/api/FileManager/Download" 
                                 GetImageUrl="/api/FileManager/GetImage"> 
        </FileManagerAjaxSettings> 
        <FileManagerContextMenuSettings File="@Items" Folder="@Items"></FileManagerContextMenuSettings> 
        <FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="MenuOpened" OnMenuClick="OnMenuClick"></FileManagerEvents> 
    </SfFileManager> 
</div> 
 
@code { 
    SfFileManager<FileManagerDirectoryContent> FileManager; 
    public string[] Items = new string[] { "Open", "|", "Delete", "Download", "Rename", "|", "Details", "Custom" }; 
 
    //// Icon added to custom menu item 
    void MenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args) 
    { 
        ... 
    } 
 
    //// event for custom menu item 
    void OnMenuClick(MenuClickEventArgs<FileManagerDirectoryContent> args) 
    { 
        ... 
    } 
} 
Based on the code, we understood that you want to add an icon for custom context menu item. But currently it is not possible in MenuOpened event and we considered this as bug from our side. We will include this fix in our second weekly patch release of June, 2021. You can track the status of the reported problem through the below portal link, 
 
 
We appreciate your patience. 
 
Regards, 
Indhumathy L 


BJ Ben Junior May 14, 2021 03:22 AM UTC

Hi Indhumathy L  ,

Thanks for your reply. I understand that the menu icon issue is a bug but for now it doesn't matter to me. At this moment my big problem is to find how to get the name of the file selected in the FileManager control using the  "OnMenuClick" (or any new method) from the  "Custom" menu item added as per the example and pass it to the SampleDataController  

 
      // Processing the File Manager operations
        [Route("FileOperations")]
      public object FileOperations([FromBody] FileManagerDirectoryContent args)
        {
            switch (args.Action)
            {
                // Add your custom action here
                case "custom":
                    // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted
                    return I NEED THE FILENAME SELECTED HERE WHEN USER CLICKS THE "CUSTOM" ITEM IN THE CONTEXT MENU



                case "read":
                    // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items
                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
                case "delete":
                    // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted
                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
                case "copy":
                    //  Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
                case "move":
                    // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
                case "details":
                    // Path - Current path where details of file/folder is requested; Name - Names of the requested folders
                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
                case "create":
                    // Path - Current path where the folder is to be created; Name - Name of the new folder
                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
                case "search":
                    // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
                case "rename":
                    // Path - Current path of the renamed file; Name - Old file name; NewName - New file name
                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));

            }
            return null;
        }


IL Indhumathy Loganathan Syncfusion Team May 14, 2021 11:26 AM UTC

Hi Ben, 
 
We have validated your requirement in File Manager component. We understood that you want to get the currently selected file name while clicking custom item in context menu. You can get the file name using the MenuClickEventArgs of File Manager.  
 
Please check the below code snippet. 
 
void OnMenuClick(MenuClickEventArgs<FileManagerDirectoryContent> args) 
{ 
    if (args.Item.Text == "Custom") 
    { 
        //Get the currently selected file name 
        selectedItem = args.FileDetails[0].Name; 
    } 
} 
 
Please check the sample in the below link and the output screenshot. 
 
 
 
 
In the sample, we have printed the currently selected item on the screen for you reference. If the shared details doesn’t meet your requirement, please share some clear details regarding your use case scenario. Whether you want to return the file name only by using the controller code for any specific reason.  
 
These details would help us to serve you better. 
 
Regards, 
Indhumathy L 


Marked as answer
BJ Ben Junior May 17, 2021 02:46 PM UTC

Perfect. Thanks


KR Keerthana Rajendran Syncfusion Team May 18, 2021 05:57 AM UTC

Hi Ben, 
 
Most welcome. We are glad to hear that the provided suggestion helped you. Please get back to us if you need further assistance. 
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon