981760: Added UG Documentation for the FileManager component template support.

blazor-toc.html

@@ -3014,6 +3014,7 @@
 					<li> <a href="/blazor/file-manager/how-to/restrict-drag-and-drop-upload">Restrict drag and drop upload</a></li>
 					<li> <a href="/blazor/file-manager/how-to/upload-large-files">Upload large files</a></li>
 					<li> <a href="/blazor/file-manager/how-to/nested-items">Nested File Manager</a></li>
+					<li> <a href="/blazor/file-manager/how-to/customize-navigation-items">Customize Navigation Items</a></li>
 				</ul>
 			</li>
 			<li>

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.

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;
+
+<SfFileManager TValue="FileManagerDirectoryContent">
+    <ChildContent>
+        <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
+                                 UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
+                                 DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
+                                 GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
+        </FileManagerAjaxSettings>
+    </ChildContent>
+    <NavigationPaneTemplate>
+        <div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">
+            @if (context is FileManagerDirectoryContent item)
+            {
+                <span class="folder-name" style="margin-left:8px;">@item.Name</span>
+            }
+        </div>
+    </NavigationPaneTemplate>
+</SfFileManager>
+
+```

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;
+
+<SfFileManager TValue="FileManagerDirectoryContent" CssClass="fmtemplate">
+    <ChildContent>
+        <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
+                                    UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
+                                    DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
+                                    GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
+        </FileManagerAjaxSettings>
+    </ChildContent>
+    <LargeIconsTemplate Context="item">
+        @if (item is not null)
+        {
+            <div style="display: flex; flex-direction: column; gap: 2px;">
+                <span><strong>@item.Name</strong></span>
+                <span><strong>Type:</strong> @(item.IsFile ? "File" : "Folder")</span>
+                <span><strong>Modified:</strong> @(item.DateModified.ToString("MM/dd/yyyy HH:mm"))</span>
+            </div>
+        }
+    </LargeIconsTemplate>
+</SfFileManager>
+
+<style>
+    .fmtemplate .e-large-icons .e-list-item {
+        width: 185px;
+    }
+</style>
+
+```
+
 ## 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
 
 ```
 
+