diff --git a/blazor-toc.html b/blazor-toc.html index 86ff1b350b..4229c30d68 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2958,6 +2958,7 @@
  • Multiple File Selection
  • Drag and Drop
  • Virtualization
    • +
  • Template
  • Pagination
  • Accessibility
  • Upload
    • diff --git a/blazor/file-manager/images/blazor-filemanager-template-details-view.png b/blazor/file-manager/images/blazor-filemanager-template-details-view.png new file mode 100644 index 0000000000..19df90abe9 Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-template-details-view.png differ diff --git a/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png b/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png new file mode 100644 index 0000000000..551be8605a Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png differ diff --git a/blazor/file-manager/template.md b/blazor/file-manager/template.md new file mode 100644 index 0000000000..f37189a00b --- /dev/null +++ b/blazor/file-manager/template.md @@ -0,0 +1,486 @@ +--- +layout: post +title: Template Support in Blazor File Manager Component | Syncfusion +description: Learn how to use template support in Syncfusion Blazor File Manager to customize the navigation pane, large icon view, and details view with dropdown actions. +platform: Blazor +control: File Manager +documentation: ug +--- + +# Template Support in Blazor File Manager Component + +The File Manager component provides extensive template support for customizing the appearance of the **Navigation pane**, **Large icons view**, and **Details view**. This allows you to create a personalized file management experience by defining custom layouts for file and folder displays. + +File operations such as Open, Delete, Download, and Refresh can be handled through a dropdown menu displayed in each item. The `ItemSelected` event initiates each action by calling the corresponding File Manager methods: + +* [OpenFileAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_OpenFileAsync_System_String_) - Opens the selected folder. +* [DeleteFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_DeleteFilesAsync_System_String___) - Deletes the selected files or folders. +* [DownloadFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_DownloadFilesAsync_System_String___) - Downloads the selected files. +* [RefreshFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_RefreshFilesAsync) - Refreshes the current directory. + +This article demonstrates how to: + +- Customize folder icons using [`NavigationPaneTemplate`](#navigation-template) +- Show visual tiles using [`LargeIconsTemplate`](#large-icons-template) +- Format grid rows in [`DetailsView Template`](#details-view-template) +- Add dropdown actions like Open, Delete, Refresh and Download + +## Navigation Template + +The navigation pane supports templates through the `NavigationPaneTemplate`, enabling you to show folder icons based on folder-specific names. + +```cshtml + + +
    + @if (context is FileManagerDirectoryContent item) + { + + @item.Name + } +
    +     + +``` + +## Large Icons Template + +The `LargeIconsTemplate` allows full customization of how folders and files are displayed in the large tiles/grid view. You can add background images, file-type icons, and dropdown menu actions. + +```cshtml + + + @if (item is not null) + { +
    +
    +
    + @if (item.IsFile) + { +
    + } +
    @item.Name
    +
    + + + + @foreach (var (text, iconCss) in MenuItems) + { + + } + @if (!item.IsFile) + { + + } + + +
    +
    +
    Created on @item.DateCreated.ToString("MMMM d, yyyy")
    +
    + } +     + +``` + +## Details View Template + +Details view uses `FileManagerDetailsViewSettings` to customize the grid layout of file data. With templates, you can format file names, sizes, and even render action menus per row. + +```cshtml + + + + + + + + + + + + + + + + +``` + +The following code demonstrates a complete working example. + +```cshtml + +@using Syncfusion.Blazor.FileManager; +@using Syncfusion.Blazor.Navigations; +@using Syncfusion.Blazor.SplitButtons; +@inject NavigationManager UriHelper; +
    + + + + + + + + + + + + + + + + + + + + + + @if (item is not null) + { +
    +
    +
    + @if (item.IsFile) + { +
    + } +
    @item.Name
    +
    + + + + @foreach (var (text, iconCss) in MenuItems) + { + + } + @if (!item.IsFile) + { + + } + + +
    +
    +
    Created on @item.DateCreated.ToString("MMMM d, yyyy")
    +
    + } +     + +
    + @if (context is FileManagerDirectoryContent item) + { + + @item.Name + } +
    +     +     +
    +@code { + SfFileManager FileManager; + private static readonly (string Text, string IconCss)[] MenuItems = + { + ("Delete", "e-icons e-trash"), + ("Download", "e-icons e-download"), + ("Refresh", "e-icons e-refresh") + }; + private static readonly string[] SizeSuffixes = { "B", "KB", "MB", "GB", "TB" }; + private static readonly Dictionary FolderIcons = new Dictionary(StringComparer.OrdinalIgnoreCase) + { + { "Files", "e-folder" }, { "Documents", "e-file-document" }, { "Downloads", "e-download" }, + { "Pictures", "e-thumbnail" }, { "Music", "e-file-format" }, { "Videos", "e-video" }, + { "Employees", "e-export-png" }, { "Food", "e-export-png" }, { "Nature", "e-export-png" } + }; + private static readonly Dictionary ExtensionIconClassMap = new Dictionary(StringComparer.OrdinalIgnoreCase) + { + { "jpg", "image" }, { "jpeg", "image" }, { "png", "image" }, { "gif", "image" }, + { "mp3", "music" }, { "wav", "music" }, { "mp4", "video" }, { "avi", "video" }, + { "xlsx", "xlsx" }, { "xls", "xlsx" }, { "pptx", "pptx" }, { "ppt", "pptx" }, + { "rar", "rar" }, { "zip", "zip" }, { "txt", "txt" }, { "js", "js" }, + { "css", "css" }, { "html", "html" }, { "exe", "exe" }, { "msi", "msi" }, + { "php", "php" }, { "doc", "doc" }, { "docx", "docx" }, { "xml", "xml" }, + { "pdf", "pdf" } + }; + private static readonly Dictionary NamedFileBackgrounds = new Dictionary(StringComparer.OrdinalIgnoreCase) + { + { "Adam.png", "background-Adam" }, { "Andrew.png", "background-Andrew" }, { "Ellie.png", "background-Ellie" }, + { "Jameson.png", "background-Jameson" }, { "John.png", "background-John" }, { "Josie.png", "background-Josie" }, + { "Apple pie.png", "background-Applepie" }, { "Bread.png", "background-Bread" }, { "Doughnut.png", "background-Doughnut" }, + { "Nuggets.png", "background-Nuggets" }, { "Sugar cookie.png", "background-Sugarcookie" }, + { "bird.jpg", "background-bird" }, { "sea.jpg", "background-sea" }, { "seaview.jpg", "background-seaview" }, + { "snow.jpg", "background-snow" }, { "snowfall.jpg", "background-snowfall" } + }; + private static readonly Dictionary ExtensionBackgrounds = new Dictionary(StringComparer.OrdinalIgnoreCase) + { + { "jpg", "background-jpg" }, { "jpeg", "background-jpg" }, { "png", "background-png" }, + { "pptx", "background-pptx" }, { "pdf", "background-pdf" }, { "mp4", "background-video" }, + { "mp3", "background-audio" }, { "docx", "background-doc" }, { "txt", "background-txt" }, + { "xlsx", "background-xlsx" } + }; + private Task OnDropDownItemSelected(MenuEventArgs args, FileManagerDirectoryContent item) + { + switch (args.Item.Text) + { + case "Open": + return FileManager.OpenFileAsync(item.Name); + case "Delete": + return FileManager.DeleteFilesAsync(new[] { item.Name }); + case "Download": + return FileManager.DownloadFilesAsync(new[] { item.Name }); + case "Refresh": + return FileManager.RefreshFilesAsync(); + default: + return Task.CompletedTask; + } + } + private void MenuOpened(MenuOpenEventArgs args) + { + args.Cancel = true; + } + private string FormatSize(long bytes) + { + double len = bytes; + var index = 0; + while (len >= 1024 && index < SizeSuffixes.Length - 1) + { + len /= 1024; + index++; + } + return $"{len:0.##} {SizeSuffixes[index]}"; + } + private string GetFileTypeCssClass(FileManagerDirectoryContent item) + { + if (!item.IsFile) + { + return string.Empty; + } + var ext = Path.GetExtension(item.Name)?.TrimStart('.') ?? string.Empty; + var type = ExtensionIconClassMap.GetValueOrDefault(ext, "unknown"); + return $"e-list-icon e-fe-{type}"; + } + private static string GetIconsForFolders(FileManagerDirectoryContent item) + { + return FolderIcons.GetValueOrDefault(item.Name, "e-folder"); + } + private string GetBackgroundCss(FileManagerDirectoryContent item) + { + if (!item.IsFile) + { + return "file-icon background-folder"; + } + if (NamedFileBackgrounds.TryGetValue(item.Name, out var namedBackground)) + { + return $"file-icon {namedBackground}"; + } + var ext = Path.GetExtension(item.Name)?.TrimStart('.') ?? string.Empty; + var background = ExtensionBackgrounds.GetValueOrDefault(ext, "background-default"); + return $"file-icon {background}"; + } + private string Asset(string file) + { + return UriHelper.ToAbsoluteUri($"https://sfblazor.azurewebsites.net/development/net10/demos/_content/blazor_server_common_net10/images/filemanager/icons/{file}").ToString(); + } +} + + +``` + +![Blazor FileManager Large Icon View Template Output](./images/blazor-filemanager-template-large-icons-view.png) + +![Blazor FileManager Details View Template Output](./images/blazor-filemanager-template-details-view.png)