diff --git a/blazor-toc.html b/blazor-toc.html index 1294cdabc0..413d0a9dfb 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3014,6 +3014,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..bb5615be2c 100644 --- a/blazor/file-manager/views.md +++ b/blazor/file-manager/views.md @@ -17,6 +17,42 @@ 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 + Type: @(item.IsFile ? "File" : "Folder") + Modified: @(item.DateModified.ToString("MM/dd/yyyy HH:mm")) +
    + } +     +     + + + +``` + ## 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 +126,4 @@ The details view settings like, column [Width](https://help.syncfusion.com/cr/bl ``` +