diff --git a/blazor-toc.html b/blazor-toc.html index 4498cf4f18..3a2150e5e2 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3023,6 +3023,7 @@
  • Restrict drag and drop upload
  • Upload large files
  • Nested File Manager
    • +
  • Customize Navigation Items
  • diff --git a/blazor/file-manager/end-user-capabilities.md b/blazor/file-manager/end-user-capabilities.md index e6a0148b7c..4bc36e6fad 100644 --- a/blazor/file-manager/end-user-capabilities.md +++ b/blazor/file-manager/end-user-capabilities.md @@ -62,6 +62,10 @@ The navigation pane displays the folder hierarchy of the file system and provide ![Blazor File Manager with Navigation Pane](./images/blazor-filemanager-navigationpane.png) +You can customize the appearance of the navigation pane by using the `NavigationPaneTemplate` property. This enables you to modify icons, display text, and include additional elements to suit your application's requirements. + +![Blazor File Manager with Navigation Pane Template Output](./images/blazor-filemanager-navigationpane-template.png) + ### BreadCrumb The File Manager provides breadcrumb for navigating to the parent folders. The breadcrumb in the File Manager is responsible for resizing. Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root. @@ -76,6 +80,10 @@ In the large icons view, the thumbnail icons will be shown in a larger size, whi ![Blazor File Manager with LargeIconView](./images/blazor-filemanager-largeiconsview.png) +The `LargeIconsTemplate` property enables complete customization of how folders and files are rendered in the `Large Icons View`. It allows you to enhance the layout by adding background images, custom file-type icons, and actions such as dropdown menus. + +![Blazor FileManager Large Icon View Template Output](./images/blazor-filemanager-template-large-icons-view.png) + ## Details View In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type. Additional columns can be added using [DetailsViewSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerDetailsViewSettings.html) API. The details view allows you to perform sorting using column header. diff --git a/blazor/file-manager/how-to/customize-navigation-items.md b/blazor/file-manager/how-to/customize-navigation-items.md new file mode 100644 index 0000000000..4d7b7a24f2 --- /dev/null +++ b/blazor/file-manager/how-to/customize-navigation-items.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Customize the Navigation Pane in Blazor File Manager | Syncfusion +description: Learn how to customize the Navigation Pane in the Syncfusion Blazor File Manager component and more. +platform: Blazor +control: File Manager +documentation: ug +--- + +# Customize Navigation Pane in Blazor File Manager Component + +The navigation pane in the Blazor File Manager component displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node in the navigation pane using the `NavigationPaneTemplate` property. This allows you to modify the appearance of folders based on your application's requirements. + +You may use this template to show additional metadata, custom icons, or other UI elements alongside the folder name. + +```cshtml + +@using Syncfusion.Blazor.FileManager; + + + + + + + +
    + @if (context is FileManagerDirectoryContent item) + { + @item.Name + } +
    +     +     + +``` \ No newline at end of file diff --git a/blazor/file-manager/images/blazor-filemanager-navigationpane-template.png b/blazor/file-manager/images/blazor-filemanager-navigationpane-template.png new file mode 100644 index 0000000000..e3bc25e8bc Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-navigationpane-template.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..784bf8bed4 Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png differ diff --git a/blazor/file-manager/views.md b/blazor/file-manager/views.md index 45f6050412..929dd8d44b 100644 --- a/blazor/file-manager/views.md +++ b/blazor/file-manager/views.md @@ -17,6 +17,101 @@ The `Large Icons View` is the default starting view in the FileManager. The view In the large icons view, the thumbnail icons will be shown in a larger size, which displays the data in a form that best suits their content. For image type files, a **preview** will be displayed. Extension thumbnails will be displayed for other type files. +### Customize existing Large Icons View + +The large icons view layout can be customized using the `LargeIconsTemplate` property, which allows you to display file or folder information, apply custom formatting, and use conditional rendering based on item type. You can customize it further based on your application requirements. + +```cshtml + +@using Syncfusion.Blazor.FileManager; + + + + + + + @if (item is not null) + { +
    +
    +
    @item.Name
    +
    +
    +
    Created on @item.DateCreated.ToString("MMMM d, yyyy")
    +
    + } +     +     + +@code { + private string GetFileTypeCssClass(FileManagerDirectoryContent item) + { + if (!item.IsFile) + { + return $"e-list-icon e-fe-folder"; + } + var ext = System.IO.Path.GetExtension(item.Name)?.TrimStart('.') ?? string.Empty; + var type = ExtensionIconClassMap.GetValueOrDefault(ext, "unknown"); + return $"e-list-icon e-fe-{type}"; + } + 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" } + }; +} + + +``` + ## Details View In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type. Additional columns can be added using [DetailsViewSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerDetailsViewSettings.html) API. The details view allows you to perform sorting using column header. @@ -90,3 +185,5 @@ The details view settings like, column [Width](https://help.syncfusion.com/cr/bl ``` + +