Display ContextMenu Items based on FileType

[Ian Gaskill]

Is it possible to display different context menu options, or even toolbar item items based on the type of File selected? I know these can be changed based on whether a file or a folder is selected, but I'm specifically looking to have different options when a pdf is selected versus say a txt file. I also know that I can just display the same context menu option for both and make the distinction when the item is clicked, however I really need the label of the options to be different.

[Sowmiya Padmanaban]

Hi Ian Gaskill,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component. Yes, you can differentiate the file based on Type attribute in MenuOpened event argument. 

 

Please refer to the below code snippet. 

 

<SfFileManager @ref="filemanager" TValue="FileManagerDirectoryContent"> 

    <FileManagerEvents TValue="FileManagerDirectoryContent"  MenuOpened="menuOpen"></FileManagerEvents> 

    <FileManagerAjaxSettings Url="/api/Home/FileOperations" 

                             UploadUrl="/api/Home/Upload" 

                             DownloadUrl="/api/Home/Download" 

                             GetImageUrl="/api/Home/GetImage"> 

    </FileManagerAjaxSettings> 

    <FileManagerToolbarSettings Items="@ToolbarItems"></FileManagerToolbarSettings> 

    <FileManagerContextMenuSettings File="@Items"></FileManagerContextMenuSettings> 

</SfFileManager> 

@code{ 

    private string menuTargetData { get; set; } 

    SfFileManager<FileManagerDirectoryContent> filemanager; 

    public string[] Items = new string[] { "Open", "|", "Delete", "Download", "Rename", "|", "Details", "TextFile" ,"PDF" }; 

    public string[] ToolbarItems = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details", "TextFile", "PDF" }; 

    public void menuOpen(Syncfusion.Blazor.FileManager.MenuOpenEventArgs<FileManagerDirectoryContent> args) 

    { 

        menuTargetData = JsonConvert.SerializeObject(args.FileDetails); 

        Dictionary<string, dynamic>[] fileDetails = JsonConvert.DeserializeObject<Dictionary<string, dynamic>[]>(menuTargetData); 

        if (fileDetails[0]["Type"] == ".txt") 

        { 

            // Remove the items from context menu if it is not a DRT folder. 

            args.Items.RemoveRange(8, 1); 

            this.filemanager.EnableToolbarItems(new string[] { "TextFile" }); 

            this.filemanager.DisableToolbarItems(new string[] { "PDF" }); 

        } 

        else if(fileDetails[0]["Type"] == ".pdf") 

        { 

            args.Items.RemoveRange(7, 1); 

            this.filemanager.EnableToolbarItems(new string[] { "PDF" }); 

            this.filemanager.DisableToolbarItems(new string[] { "TextFile" }); 

        } 

    } 

} 

 

 

Please, refer to the sample link. 

 

https://www.syncfusion.com/downloads/support/forum/163310/ze/FileManager-703065267.zip 

 

Please, refer to the below links for FileManager component. 

 

UG Documentation- https://blazor.syncfusion.com/documentation/file-manager/getting-started/ 

 

Demo link- https://blazor.syncfusion.com/demos/file-manager/overview 

 

API Reference- https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P