Skip to content

Commit ec6ad14

Browse files
PrasanthMadhaiyanPrasanthMadhaiyan
committed
981760: Added UG Documentation for the FileManager component template support.
Updated the description and improved the content structure for better clarity and detail on template support in the Blazor File Manager component.
1 parent d134f28 commit ec6ad14

File tree

1 file changed

+123
-10
lines changed

1 file changed

+123
-10
lines changed

‎blazor/file-manager/template.md‎

Lines changed: 123 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
---
22
layout: post
33
title: Template Support in Blazor File Manager Component | Syncfusion
4-
description: Checkout and learn here all about template support in Syncfusion Blazor File Manager component and more.
4+
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.
55
platform: Blazor
66
control: File Manager
77
documentation: ug
88
---
99

1010
# Template Support in Blazor File Manager Component
1111

12-
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.
13-
14-
This File Manager sample demonstrates the following templates:
15-
16-
* **NavigationPaneTemplate** - Customizes the appearance of nodes in the navigation tree with icons based on folder names.
17-
* **LargeIconsTemplate** - Displays files and folders with styled backgrounds and action menus in the large icons view.
18-
* **FileManagerDetailsViewSettings Template** - Customizes column content such as file name, size, and modified date in the details view.
12+
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.
1913

2014
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:
2115

@@ -24,6 +18,125 @@ File operations such as Open, Delete, Download, and Refresh can be handled throu
2418
* [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.
2519
* [RefreshFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_RefreshFilesAsync) - Refreshes the current directory.
2620

21+
This article demonstrates how to:
22+
23+
- Customize folder icons using [`NavigationPaneTemplate`](#navigation-template)
24+
- Show visual tiles using [`LargeIconsTemplate`](#large-icons-template)
25+
- Format grid rows in [`DetailsView Template`](#details-view-template)
26+
- Add dropdown actions like Open, Delete, Refresh and Download
27+
28+
## Navigation Template
29+
30+
The navigation pane supports templates through the `NavigationPaneTemplate`, enabling you to show folder icons based on folder-specific names.
31+
32+
```cshtml
33+
34+
<NavigationPaneTemplate>
35+
<div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">
36+
@if (context is FileManagerDirectoryContent item)
37+
{
38+
<span class="e-icons @GetIconsForFolders(item)"></span>
39+
<span class="folder-name" style="margin-left:8px;">@item.Name</span>
40+
}
41+
</div>
42+
</NavigationPaneTemplate>
43+
44+
```
45+
46+
## Large Icons Template
47+
48+
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.
49+
50+
```cshtml
51+
52+
<LargeIconsTemplate Context="item">
53+
@if (item is not null)
54+
{
55+
<div class="custom-icon-card">
56+
<div class="file-header">
57+
<div class="left-info">
58+
@if (item.IsFile)
59+
{
60+
<div class="@GetFileTypeCssClass(item)"></div>
61+
}
62+
<div class="file-name" title="@item.Name">@item.Name</div>
63+
</div>
64+
<SfDropDownButton CssClass="e-caret-hide filemanager-dropdown-button" IconCss="e-icons e-more-vertical-1">
65+
<DropDownButtonEvents ItemSelected="args => OnDropDownItemSelected(args, item)" />
66+
<DropDownMenuItems>
67+
@foreach (var (text, iconCss) in MenuItems)
68+
{
69+
<DropDownMenuItem Text="@text" IconCss="@iconCss" />
70+
}
71+
@if (!item.IsFile)
72+
{
73+
<DropDownMenuItem Text="Open" IconCss="e-icons e-folder-open" />
74+
}
75+
</DropDownMenuItems>
76+
</SfDropDownButton>
77+
</div>
78+
<div class="@GetBackgroundCss(item)" title="@item.Name"></div>
79+
<div class="file-formattedDate">Created on @item.DateCreated.ToString("MMMM d, yyyy")</div>
80+
</div>
81+
}
82+
</LargeIconsTemplate>
83+
84+
```
85+
86+
## Details View Template
87+
88+
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.
89+
90+
```cshtml
91+
92+
<FileManagerDetailsViewSettings>
93+
<FileManagerColumns>
94+
<FileManagerColumn Field="Name" HeaderText="Name">
95+
<Template Context="context">
96+
@if (context is FileManagerDirectoryContent item)
97+
{
98+
<div class="details-name-template-vertical" title="@item.Name">
99+
<div>@item.Name</div>
100+
</div>
101+
}
102+
</Template>
103+
</FileManagerColumn>
104+
<FileManagerColumn Field="Size" HeaderText="Size">
105+
<Template Context="context">
106+
@if (context is FileManagerDirectoryContent item)
107+
{
108+
<div>@(item.IsFile ? FormatSize(item.Size) : "-")</div>
109+
}
110+
</Template>
111+
</FileManagerColumn>
112+
<FileManagerColumn Field="DateModified" HeaderText="Date Modified" />
113+
<FileManagerColumn HeaderText="Actions">
114+
<Template Context="context">
115+
@if (context is FileManagerDirectoryContent item)
116+
{
117+
<SfDropDownButton CssClass="e-caret-hide filemanager-dropdown-button" IconCss="e-icons e-more-vertical-1">
118+
<DropDownButtonEvents ItemSelected="args => OnDropDownItemSelected(args, item)" />
119+
<DropDownMenuItems>
120+
@foreach (var (text, iconCss) in MenuItems)
121+
{
122+
<DropDownMenuItem Text="@text" IconCss="@iconCss" />
123+
}
124+
@if (!item.IsFile)
125+
{
126+
<DropDownMenuItem Text="Open" IconCss="e-icons e-folder-open" />
127+
}
128+
</DropDownMenuItems>
129+
</SfDropDownButton>
130+
}
131+
</Template>
132+
</FileManagerColumn>
133+
</FileManagerColumns>
134+
</FileManagerDetailsViewSettings>
135+
136+
```
137+
138+
The following code demonstrates a complete working example.
139+
27140
```cshtml
28141
29142
@using Syncfusion.Blazor.FileManager;
@@ -368,6 +481,6 @@ File operations such as Open, Delete, Download, and Refresh can be handled throu
368481
369482
```
370483

371-
![Blazor FileManager Template with Large Icon View](./images/blazor-filemanager-template-large-icons-view.png)
484+
![Blazor FileManager Large Icon View Template Output](./images/blazor-filemanager-template-large-icons-view.png)
372485

373-
![Blazor FileManager Template with Details View](./images/blazor-filemanager-template-details-view.png)
486+
![Blazor FileManager Details View Template Output](./images/blazor-filemanager-template-details-view.png)

0 commit comments

Comments
 (0)