Skip to content

Commit d134f28

Browse files
PrasanthMadhaiyanPrasanthMadhaiyan
committed
981760: Added UG Documentation for the FileManager component template support.
1 parent bf273b9 commit d134f28

File tree

4 files changed

+374
-0
lines changed

4 files changed

+374
-0
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3001,6 +3001,7 @@
30013001
<li> <a href="/blazor/file-manager/multiple-file-selection">Multiple File Selection</a></li>
30023002
<li> <a href="/blazor/file-manager/drag-and-drop">Drag and Drop</a></li>
30033003
<li> <a href="/blazor/file-manager/virtualization">Virtualization</a></li>
3004+
<li> <a href="/blazor/file-manager/template">Template</a></li>
30043005
<li> <a href="/blazor/file-manager/pagination">Pagination</a></li>
30053006
<li> <a href="/blazor/file-manager/accessibility">Accessibility</a></li>
30063007
<li> <a href="/blazor/file-manager/upload">Upload</a></li>

‎blazor/file-manager/images/blazor-filemanager-template-details-view.png‎

49.5 KB
Loading

‎blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png‎

68.3 KB
Loading

‎blazor/file-manager/template.md‎

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
---
2+
layout: post
3+
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.
5+
platform: Blazor
6+
control: File Manager
7+
documentation: ug
8+
---
9+
10+
# Template Support in Blazor File Manager Component
11+
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.
19+
20+
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:
21+
22+
* [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.
23+
* [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.
24+
* [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.
25+
* [RefreshFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_RefreshFilesAsync) - Refreshes the current directory.
26+
27+
```cshtml
28+
29+
@using Syncfusion.Blazor.FileManager;
30+
@using Syncfusion.Blazor.Navigations;
31+
@using Syncfusion.Blazor.SplitButtons;
32+
@inject NavigationManager UriHelper;
33+
<div class="control-section">
34+
<SfFileManager CssClass="e-fm-template-sample" @ref="FileManager" Height="600px" TValue="FileManagerDirectoryContent" ID="fileManager">
35+
<ChildContent>
36+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
37+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
38+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
39+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
40+
</FileManagerAjaxSettings>
41+
<FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="MenuOpened" />
42+
<FileManagerDetailsViewSettings>
43+
<FileManagerColumns>
44+
<FileManagerColumn Field="Name" HeaderText="Name">
45+
<Template Context="context">
46+
@if (context is FileManagerDirectoryContent item)
47+
{
48+
<div class="details-name-template-vertical" title="@item.Name">
49+
<div>@item.Name</div>
50+
</div>
51+
}
52+
</Template>
53+
</FileManagerColumn>
54+
<FileManagerColumn Field="Size" HeaderText="Size">
55+
<Template Context="context">
56+
@if (context is FileManagerDirectoryContent item)
57+
{
58+
<div>@(item.IsFile ? FormatSize(item.Size) : "-")</div>
59+
}
60+
</Template>
61+
</FileManagerColumn>
62+
<FileManagerColumn Field="DateModified" HeaderText="Date Modified" />
63+
<FileManagerColumn HeaderText="Actions">
64+
<Template Context="context">
65+
@if (context is FileManagerDirectoryContent item)
66+
{
67+
<SfDropDownButton CssClass="e-caret-hide filemanager-dropdown-button" IconCss="e-icons e-more-vertical-1">
68+
<DropDownButtonEvents ItemSelected="args => OnDropDownItemSelected(args, item)" />
69+
<DropDownMenuItems>
70+
@foreach (var (text, iconCss) in MenuItems)
71+
{
72+
<DropDownMenuItem Text="@text" IconCss="@iconCss" />
73+
}
74+
@if (!item.IsFile)
75+
{
76+
<DropDownMenuItem Text="Open" IconCss="e-icons e-folder-open" />
77+
}
78+
</DropDownMenuItems>
79+
</SfDropDownButton>
80+
}
81+
</Template>
82+
</FileManagerColumn>
83+
</FileManagerColumns>
84+
</FileManagerDetailsViewSettings>
85+
</ChildContent>
86+
<LargeIconsTemplate Context="item">
87+
@if (item is not null)
88+
{
89+
<div class="custom-icon-card">
90+
<div class="file-header">
91+
<div class="left-info">
92+
@if (item.IsFile)
93+
{
94+
<div class="@GetFileTypeCssClass(item)"></div>
95+
}
96+
<div class="file-name" title="@item.Name">@item.Name</div>
97+
</div>
98+
<SfDropDownButton CssClass="e-caret-hide filemanager-dropdown-button" IconCss="e-icons e-more-vertical-1">
99+
<DropDownButtonEvents ItemSelected="args => OnDropDownItemSelected(args, item)" />
100+
<DropDownMenuItems>
101+
@foreach (var (text, iconCss) in MenuItems)
102+
{
103+
<DropDownMenuItem Text="@text" IconCss="@iconCss" />
104+
}
105+
@if (!item.IsFile)
106+
{
107+
<DropDownMenuItem Text="Open" IconCss="e-icons e-folder-open" />
108+
}
109+
</DropDownMenuItems>
110+
</SfDropDownButton>
111+
</div>
112+
<div class="@GetBackgroundCss(item)" title="@item.Name"></div>
113+
<div class="file-formattedDate">Created on @item.DateCreated.ToString("MMMM d, yyyy")</div>
114+
</div>
115+
}
116+
</LargeIconsTemplate>
117+
<NavigationPaneTemplate>
118+
<div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">
119+
@if (context is FileManagerDirectoryContent item)
120+
{
121+
<span class="e-icons @GetIconsForFolders(item)"></span>
122+
<span class="folder-name" style="margin-left:8px;">@item.Name</span>
123+
}
124+
</div>
125+
</NavigationPaneTemplate>
126+
</SfFileManager>
127+
</div>
128+
@code {
129+
SfFileManager<FileManagerDirectoryContent> FileManager;
130+
private static readonly (string Text, string IconCss)[] MenuItems =
131+
{
132+
("Delete", "e-icons e-trash"),
133+
("Download", "e-icons e-download"),
134+
("Refresh", "e-icons e-refresh")
135+
};
136+
private static readonly string[] SizeSuffixes = { "B", "KB", "MB", "GB", "TB" };
137+
private static readonly Dictionary<string, string> FolderIcons = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
138+
{
139+
{ "Files", "e-folder" }, { "Documents", "e-file-document" }, { "Downloads", "e-download" },
140+
{ "Pictures", "e-thumbnail" }, { "Music", "e-file-format" }, { "Videos", "e-video" },
141+
{ "Employees", "e-export-png" }, { "Food", "e-export-png" }, { "Nature", "e-export-png" }
142+
};
143+
private static readonly Dictionary<string, string> ExtensionIconClassMap = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
144+
{
145+
{ "jpg", "image" }, { "jpeg", "image" }, { "png", "image" }, { "gif", "image" },
146+
{ "mp3", "music" }, { "wav", "music" }, { "mp4", "video" }, { "avi", "video" },
147+
{ "xlsx", "xlsx" }, { "xls", "xlsx" }, { "pptx", "pptx" }, { "ppt", "pptx" },
148+
{ "rar", "rar" }, { "zip", "zip" }, { "txt", "txt" }, { "js", "js" },
149+
{ "css", "css" }, { "html", "html" }, { "exe", "exe" }, { "msi", "msi" },
150+
{ "php", "php" }, { "doc", "doc" }, { "docx", "docx" }, { "xml", "xml" },
151+
{ "pdf", "pdf" }
152+
};
153+
private static readonly Dictionary<string, string> NamedFileBackgrounds = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
154+
{
155+
{ "Adam.png", "background-Adam" }, { "Andrew.png", "background-Andrew" }, { "Ellie.png", "background-Ellie" },
156+
{ "Jameson.png", "background-Jameson" }, { "John.png", "background-John" }, { "Josie.png", "background-Josie" },
157+
{ "Apple pie.png", "background-Applepie" }, { "Bread.png", "background-Bread" }, { "Doughnut.png", "background-Doughnut" },
158+
{ "Nuggets.png", "background-Nuggets" }, { "Sugar cookie.png", "background-Sugarcookie" },
159+
{ "bird.jpg", "background-bird" }, { "sea.jpg", "background-sea" }, { "seaview.jpg", "background-seaview" },
160+
{ "snow.jpg", "background-snow" }, { "snowfall.jpg", "background-snowfall" }
161+
};
162+
private static readonly Dictionary<string, string> ExtensionBackgrounds = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
163+
{
164+
{ "jpg", "background-jpg" }, { "jpeg", "background-jpg" }, { "png", "background-png" },
165+
{ "pptx", "background-pptx" }, { "pdf", "background-pdf" }, { "mp4", "background-video" },
166+
{ "mp3", "background-audio" }, { "docx", "background-doc" }, { "txt", "background-txt" },
167+
{ "xlsx", "background-xlsx" }
168+
};
169+
private Task OnDropDownItemSelected(MenuEventArgs args, FileManagerDirectoryContent item)
170+
{
171+
switch (args.Item.Text)
172+
{
173+
case "Open":
174+
return FileManager.OpenFileAsync(item.Name);
175+
case "Delete":
176+
return FileManager.DeleteFilesAsync(new[] { item.Name });
177+
case "Download":
178+
return FileManager.DownloadFilesAsync(new[] { item.Name });
179+
case "Refresh":
180+
return FileManager.RefreshFilesAsync();
181+
default:
182+
return Task.CompletedTask;
183+
}
184+
}
185+
private void MenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
186+
{
187+
args.Cancel = true;
188+
}
189+
private string FormatSize(long bytes)
190+
{
191+
double len = bytes;
192+
var index = 0;
193+
while (len >= 1024 && index < SizeSuffixes.Length - 1)
194+
{
195+
len /= 1024;
196+
index++;
197+
}
198+
return $"{len:0.##} {SizeSuffixes[index]}";
199+
}
200+
private string GetFileTypeCssClass(FileManagerDirectoryContent item)
201+
{
202+
if (!item.IsFile)
203+
{
204+
return string.Empty;
205+
}
206+
var ext = Path.GetExtension(item.Name)?.TrimStart('.') ?? string.Empty;
207+
var type = ExtensionIconClassMap.GetValueOrDefault(ext, "unknown");
208+
return $"e-list-icon e-fe-{type}";
209+
}
210+
private static string GetIconsForFolders(FileManagerDirectoryContent item)
211+
{
212+
return FolderIcons.GetValueOrDefault(item.Name, "e-folder");
213+
}
214+
private string GetBackgroundCss(FileManagerDirectoryContent item)
215+
{
216+
if (!item.IsFile)
217+
{
218+
return "file-icon background-folder";
219+
}
220+
if (NamedFileBackgrounds.TryGetValue(item.Name, out var namedBackground))
221+
{
222+
return $"file-icon {namedBackground}";
223+
}
224+
var ext = Path.GetExtension(item.Name)?.TrimStart('.') ?? string.Empty;
225+
var background = ExtensionBackgrounds.GetValueOrDefault(ext, "background-default");
226+
return $"file-icon {background}";
227+
}
228+
private string Asset(string file)
229+
{
230+
return UriHelper.ToAbsoluteUri($"https://sfblazor.azurewebsites.net/development/net10/demos/_content/blazor_server_common_net10/images/filemanager/icons/{file}").ToString();
231+
}
232+
}
233+
<style>
234+
.e-filemanager.e-fm-template-sample .e-list-icon {
235+
height: 20px !important;
236+
margin: 0 !important;
237+
width: 20px !important;
238+
}
239+
.e-dropdown-btn.filemanager-dropdown-button {
240+
border: none;
241+
margin-right: -6px;
242+
box-shadow: none;
243+
background: transparent;
244+
}
245+
.e-dropdown-btn.filemanager-dropdown-button:hover, .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover {
246+
background: #d4d4d4;
247+
}
248+
.fluent2-dark .e-dropdown-btn.filemanager-dropdown-button:hover, .fluent2-dark .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover,
249+
.fluent-dark .e-dropdown-btn.filemanager-dropdown-button:hover, .fluent-dark .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover,
250+
.material3-dark .e-dropdown-btn.filemanager-dropdown-button:hover, .material3-dark .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover,
251+
.tailwind3-dark .e-dropdown-btn.filemanager-dropdown-button:hover, .tailwind3-dark .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover,
252+
.fluent2-highcontrast .e-dropdown-btn.filemanager-dropdown-button:hover, .fluent2-highcontrast .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover,
253+
.highcontrast .e-dropdown-btn.filemanager-dropdown-button:hover, .highcontrast .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover,
254+
.bootstrap5\.3-dark .e-dropdown-btn.filemanager-dropdown-button:hover, .bootstrap5\.3-dark .e-dropdown-btn.filemanager-dropdown-button.e-btn:hover {
255+
background: #3d3d3d;
256+
}
257+
.bootstrap5\.3 .e-dropdown-btn.filemanager-dropdown-button {
258+
color: #242424;
259+
}
260+
.e-dropdown-btn.filemanager-dropdown-button .e-btn-icon, .e-dropdown-btn.e-btn.filemanager-dropdown-button .e-btn-icon {
261+
margin-right: -20px;
262+
margin-left: -20px;
263+
}
264+
.e-filemanager.e-fm-template-sample .e-grid .e-gridheader .e-fe-grid-icon + .e-rowcell, .e-filemanager .e-grid .e-gridheader .e-fe-grid-icon + .e-headercell, .e-filemanager .e-grid .e-gridcontent .e-fe-grid-icon + .e-rowcell, .e-filemanager .e-grid .e-gridcontent .e-fe-grid-icon + .e-headercell {
265+
padding-left: 6px;
266+
}
267+
.e-fm-template-sample .details-name-template-vertical .details-line {
268+
font-size: 13px;
269+
line-height: 1.4;
270+
white-space: nowrap;
271+
overflow: hidden;
272+
text-overflow: ellipsis;
273+
}
274+
.e-fm-template-sample .e-nav-pane-node .e-icons {
275+
font-size: larger;
276+
}
277+
.e-fm-template-sample .custom-icon-card {
278+
padding: 8px;
279+
border: 1px solid #ccc;
280+
border-radius: 10px;
281+
height: 100%;
282+
box-sizing: border-box;
283+
display: flex;
284+
flex-direction: column;
285+
justify-content: flex-start;
286+
align-items: center;
287+
}
288+
.e-fm-template-sample .file-header {
289+
display: flex;
290+
justify-content: space-between;
291+
align-items: center;
292+
width: 100%;
293+
margin-bottom: 10px;
294+
}
295+
.e-fm-template-sample .left-info {
296+
display: flex;
297+
align-items: center;
298+
gap: 8px;
299+
overflow: hidden;
300+
flex-shrink: 1;
301+
flex-grow: 1;
302+
}
303+
.e-fm-template-sample .file-name {
304+
font-size: 14px;
305+
font-weight: 600;
306+
white-space: nowrap;
307+
overflow: hidden;
308+
text-overflow: ellipsis;
309+
max-width: 160px;
310+
}
311+
.e-fm-template-sample .file-formattedDate {
312+
font-size: 12px;
313+
margin-top: 8px;
314+
text-align: center;
315+
font-weight: 600;
316+
}
317+
.e-filemanager.e-fm-template-sample.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
318+
height: 185px;
319+
width: 100px;
320+
margin: 8px 4px;
321+
}
322+
.e-filemanager.e-fm-template-sample.e-fe-mobile .e-large-icons .e-list-parent .e-list-item .file-icon {
323+
width: 150px;
324+
height: 90px;
325+
}
326+
.e-filemanager.e-fm-template-sample.e-fe-mobile .e-large-icons .e-list-parent .e-list-item .file-name {
327+
max-width: 100px;
328+
}
329+
.e-filemanager.e-fm-template-sample .e-large-icons .e-list-item {
330+
height: 240px;
331+
width: 210px;
332+
}
333+
.e-filemanager.e-fm-template-sample .e-large-icons .e-list-parent .e-list-item .file-icon {
334+
width: 190px;
335+
height: 150px;
336+
background-repeat: no-repeat;
337+
background-position: center center;
338+
background-size: contain;
339+
margin-bottom: 10px;
340+
}
341+
.background-folder { background-image: url('@Asset("folders.svg")'); }
342+
.background-png { background-image: url('@Asset("image-png.svg")'); }
343+
.background-pptx { background-image: url('@Asset("pptx.png")'); }
344+
.background-jpg { background-image: url('@Asset("image-jpg.svg")'); }
345+
.background-doc { background-image: url('@Asset("docx.png")'); }
346+
.background-pdf { background-image: url('@Asset("pdfphoto.png")'); }
347+
.background-txt { background-image: url('@Asset("text.png")'); }
348+
.background-video { background-image: url('@Asset("video.png")'); }
349+
.background-audio { background-image: url('@Asset("music.png")'); }
350+
.background-xlsx { background-image: url('@Asset("xlsx.png")'); }
351+
.background-Adam { background-image: url('@Asset("adam.png")'); }
352+
.background-Andrew { background-image: url('@Asset("andrew.png")'); }
353+
.background-Ellie { background-image: url('@Asset("ellie.png")'); }
354+
.background-Jameson { background-image: url('@Asset("jameson.png")'); }
355+
.background-John { background-image: url('@Asset("john.png")'); }
356+
.background-Josie { background-image: url('@Asset("josie.png")'); }
357+
.background-Applepie { background-image: url('@Asset("apple-pie.png")'); }
358+
.background-Bread { background-image: url('@Asset("bread.png")'); }
359+
.background-Doughnut { background-image: url('@Asset("doughnut.png")'); }
360+
.background-Nuggets { background-image: url('@Asset("nuggets.png")'); }
361+
.background-Sugarcookie { background-image: url('@Asset("sugar-cookie.png")'); }
362+
.background-bird { background-image: url('@Asset("bird.png")'); }
363+
.background-sea { background-image: url('@Asset("sea.png")'); }
364+
.background-seaview { background-image: url('@Asset("seaview.png")'); }
365+
.background-snow { background-image: url('@Asset("snow.png")'); }
366+
.background-snowfall { background-image: url('@Asset("snowfall.png")'); }
367+
</style>
368+
369+
```
370+
371+
![Blazor FileManager Template with Large Icon View](./images/blazor-filemanager-template-large-icons-view.png)
372+
373+
![Blazor FileManager Template with Details View](./images/blazor-filemanager-template-details-view.png)

0 commit comments

Comments
 (0)