Skip to content

Commit 88a9934

Browse files
ntachevaxristianstefanov
ntacheva
and
xristianstefanov
authored
[3.3] FileManager documentation (#931)
* docs(filemanager):draft docs * chore(filemanager): structure improvements * chore(filemanager):sync structure * chore(filemanager):views, navigation, sort, search pages changes * docs(filemanager):flat and hierarchical * chore(filemanager):preview pane and navigation improvements * chore(filemanager):finishing views, preview pane, search articles * docs(filemanager):toolbar, data binding updates * docs(filemanager):upload * docs(filemanager):context menu * docs(filemanager):overview, updates * docs(filemanager):fix slug * docs(filemanager):fix slugs * chore(filemanager):events article and small improvements * chore(filemanager):fixes as per comments * chore(filemanager):last typo fixes and some improvements based on discussion Co-authored-by: Hristian Stefanov <[email protected]>
1 parent 10646f4 commit 88a9934

18 files changed

+3120
-0
lines changed

‎_config.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,9 @@ navigation:
211211
"*components/wizard/structure":
212212
title: "Structure"
213213
position: 3
214+
"*components/filemanager/data-binding":
215+
title: "Data Binding"
216+
position: 2
214217

215218
## List helpers directory names and order here, like this:
216219
"*appearance":
@@ -315,6 +318,8 @@ navigation:
315318
title: "DropDownTree"
316319
"*editor":
317320
title: "Editor"
321+
"*filemanager":
322+
title: "FileManager"
318323
"*fileselect":
319324
title: "FileSelect"
320325
"*filter":

‎components/filemanager/context-menu.md

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
---
2+
title: Context Menu
3+
page_title: FileManager Context Menu
4+
description: Context Menu of the FileManager for Blazor.
5+
slug: filemanager-context-menu
6+
tags: telerik,blazor,filemanager,contextmenu, menu, context
7+
published: True
8+
position: 3
9+
---
10+
11+
# FileManager Context Menu
12+
13+
The ContextMenu of the FileManager enables you to easily execute commands on the selected file or folder.
14+
15+
The component uses the Telerik UI for Blazor ContextMenu and provides the following commands:
16+
17+
* [Rename](#rename)
18+
* [Download](#download)
19+
* [Delete](#delete)
20+
21+
22+
## Rename
23+
24+
The `Rename` command of the FileManager ContextMenu allows renaming the selected file or folder. Users can rename one item at a time - the one they open the ContextMenu for.
25+
26+
Clicking the command will fire the [`OnEdit`]({%slug filemanager-events%}#onedit) event. An input with the file/folder name will be rendered, so the user can edit it. Pressing `Enter` or bluring the input will fire the [`OnUpdate`]({%slug filemanager-events%}#onupdate) event allowing you can handle the name update of the actual item in your data source.
27+
28+
When an item is renamed, make sure to also update its `Path`. Renaming a directory that has children will require updating their `Path` as well. If the actual file system is modified, then this will be handled out of the box.
29+
30+
## Download
31+
32+
The `Download` command of the FileManager ContextMenu allows downloading of the selected file.
33+
34+
Clicking the command will fire the [`OnDownload`]({%slug filemanager-events%}#ondownload) event, so you can handle the actual download.
35+
36+
The component does not have the actual files, so the `Item` field of the `FileManagerDownloadEventArgs` just provide metadata of the selected file. Based on that, you should find the actual in the file system you are using and provide the following data to the arguments, so the download can be performed:
37+
38+
* `args.Stream` - the `MemoryStream` of the actual selected file.
39+
* `args.MimeType` - the `MimeType` of the actual file, e.g. "image/png".
40+
41+
In addition, you can also provide a custom file name through the `FileName` field of the `FileManagerDownloadEventArgs`.
42+
43+
## Delete
44+
45+
The `Delete` command of the FileManager ContextMenu allows deleting of the selected files. Multiple file deletion is supported. It does not matter which item the ContextMenu for, the `Delete` command will handle the deletion of all selected files.
46+
47+
Clicking the command will open a delete confirmation dialog. Pressing the `OK` button wil fire the [`OnDelete`]({%slug filemanager-events%}#ondelete) event, so you can handle the deletion of the actual files in the data source. Plessing the `Cancel` button will close the dialog and prevent the deletion.
48+
49+
# Example
50+
51+
The following example demonstrates handling of the ContextMenu commends.
52+
53+
````CSHTML
54+
<TelerikFileManager Data="@Data"
55+
@bind-Path="@DirectoryPath"
56+
Height="400px"
57+
IdField="MyModelId"
58+
NameField="Name"
59+
SizeField="Size"
60+
PathField="Path"
61+
ExtensionField="Extension"
62+
IsDirectoryField="IsDirectory"
63+
HasDirectoriesField="HasDirectories"
64+
ParentIdField="ParentId"
65+
DateCreatedField="DateCreated"
66+
DateCreatedUtcField="DateCreatedUtc"
67+
DateModifiedField="DateModified"
68+
DateModifiedUtcField="DateModifiedUtc"
69+
OnUpdate="@OnUpdateHandler"
70+
OnModelInit="@OnModelInitHandler"
71+
OnDownload="@OnDownloadHandler"
72+
OnDelete="@OnDeleteHandler">
73+
</TelerikFileManager>
74+
75+
@code {
76+
public List<FlatFileEntry> Data = new List<FlatFileEntry>();
77+
public string DirectoryPath { get; set; } = string.Empty;
78+
79+
async Task OnUpdateHandler(FileManagerUpdateEventArgs args)
80+
{
81+
var item = args.Item as FlatFileEntry;
82+
83+
if (item.IsDirectory)
84+
{
85+
// prevent renaming of directories. If you allow that, make sure
86+
//to also update the Path of the children
87+
}
88+
else
89+
{
90+
// simulate update of the file name and path
91+
var name = item.Name ?? string.Empty;
92+
var extension = item.Extension ?? string.Empty;
93+
var fullName = extension.Length > 0 && name.EndsWith(extension) ?
94+
name : $"{name}{extension}";
95+
96+
var updatedItem = Data.FirstOrDefault(x => x.MyModelId == item.MyModelId);
97+
98+
updatedItem.Name = item.Name;
99+
updatedItem.Path = Path.Combine(DirectoryPath, fullName);
100+
}
101+
}
102+
103+
async Task OnDownloadHandler(FileManagerDownloadEventArgs args)
104+
{
105+
var selectedItem = args.Item as FlatFileEntry;
106+
107+
//the FileManager does not have the actual file.
108+
//To download it, find the actual file in the datasource
109+
//based on the selected file (args.Item) and
110+
//assign the following data to the argument:
111+
112+
//args.Stream = the file stream of the actual selected file;
113+
//args.MimeType = the mime type of the actual file, so it can be downloaded;
114+
//args.FileName = allows overriding the name of the downloaded file;
115+
}
116+
117+
118+
async Task OnDeleteHandler(FileManagerDeleteEventArgs args)
119+
{
120+
var currItem = args.Item as FlatFileEntry;
121+
122+
var itemToDelete = Data.FirstOrDefault(x => x.MyModelId == currItem.MyModelId);
123+
124+
//simulate item deletion
125+
Data.Remove(itemToDelete);
126+
127+
RefreshData();
128+
}
129+
130+
private FlatFileEntry OnModelInitHandler()
131+
{
132+
var item = new FlatFileEntry();
133+
item.Name = $"New folder";
134+
item.Size = 0;
135+
item.Path = Path.Combine(DirectoryPath, item.Name);
136+
item.IsDirectory = true;
137+
item.HasDirectories = false;
138+
item.DateCreated = DateTime.Now;
139+
item.DateCreatedUtc = DateTime.Now;
140+
item.DateModified = DateTime.Now;
141+
item.DateModifiedUtc = DateTime.Now;
142+
143+
return item;
144+
}
145+
146+
private void RefreshData()
147+
{
148+
Data = new List<FlatFileEntry>(Data);
149+
}
150+
151+
// fetch the FileManager data
152+
protected override async Task OnInitializedAsync()
153+
{
154+
Data = await GetFlatFileEntries();
155+
}
156+
157+
// a model to bind the FileManager. Should usually be in its own separate location.
158+
public class FlatFileEntry
159+
{
160+
public string MyModelId { get; set; }
161+
public string ParentId { get; set; }
162+
public string Name { get; set; }
163+
public long Size { get; set; }
164+
public string Path { get; set; }
165+
public string Extension { get; set; }
166+
public bool IsDirectory { get; set; }
167+
public bool HasDirectories { get; set; }
168+
public DateTime DateCreated { get; set; }
169+
public DateTime DateCreatedUtc { get; set; }
170+
public DateTime DateModified { get; set; }
171+
public DateTime DateModifiedUtc { get; set; }
172+
}
173+
174+
// the next lines are hardcoded data generation so you can explore the FileManager freely
175+
176+
async Task<List<FlatFileEntry>> GetFlatFileEntries()
177+
{
178+
179+
var workFiles = new FlatFileEntry()
180+
{
181+
MyModelId = "1",
182+
ParentId = null,
183+
Name = "Work Files",
184+
IsDirectory = true,
185+
HasDirectories = true,
186+
DateCreated = new DateTime(2022, 1, 2),
187+
DateCreatedUtc = new DateTime(2022, 1, 2),
188+
DateModified = new DateTime(2022, 2, 3),
189+
DateModifiedUtc = new DateTime(2022, 2, 3),
190+
Path = Path.Combine("files"),
191+
Size = 3 * 1024 * 1024
192+
};
193+
194+
var Documents = new FlatFileEntry()
195+
{
196+
MyModelId = "2",
197+
ParentId = workFiles.MyModelId,
198+
Name = "Documents",
199+
IsDirectory = true,
200+
HasDirectories = false,
201+
DateCreated = new DateTime(2022, 1, 2),
202+
DateCreatedUtc = new DateTime(2022, 1, 2),
203+
DateModified = new DateTime(2022, 2, 3),
204+
DateModifiedUtc = new DateTime(2022, 2, 3),
205+
Path = Path.Combine(workFiles.Path, "documents"),
206+
Size = 1024 * 1024
207+
};
208+
209+
var Images = new FlatFileEntry()
210+
{
211+
MyModelId = "3",
212+
ParentId = workFiles.MyModelId,
213+
Name = "Images",
214+
IsDirectory = true,
215+
HasDirectories = false,
216+
DateCreated = new DateTime(2022, 1, 2),
217+
DateCreatedUtc = new DateTime(2022, 1, 2),
218+
DateModified = new DateTime(2022, 2, 3),
219+
DateModifiedUtc = new DateTime(2022, 2, 3),
220+
Path = Path.Combine(workFiles.Path, "images"),
221+
Size = 2 * 1024 * 1024
222+
};
223+
224+
var specification = new FlatFileEntry()
225+
{
226+
MyModelId = "4",
227+
ParentId = Documents.MyModelId,
228+
Name = "Specification",
229+
IsDirectory = false,
230+
HasDirectories = false,
231+
Extension = ".docx",
232+
DateCreated = new DateTime(2022, 1, 5),
233+
DateCreatedUtc = new DateTime(2022, 1, 5),
234+
DateModified = new DateTime(2022, 2, 3),
235+
DateModifiedUtc = new DateTime(2022, 2, 3),
236+
Path = Path.Combine(Documents.Path, "specification.docx"),
237+
Size = 462 * 1024
238+
};
239+
240+
var report = new FlatFileEntry()
241+
{
242+
MyModelId = "5",
243+
ParentId = Documents.MyModelId,
244+
Name = "Monthly report",
245+
IsDirectory = false,
246+
HasDirectories = false,
247+
Extension = ".xlsx",
248+
DateCreated = new DateTime(2022, 1, 20),
249+
DateCreatedUtc = new DateTime(2022, 1, 20),
250+
DateModified = new DateTime(2022, 1, 25),
251+
DateModifiedUtc = new DateTime(2022, 1, 25),
252+
Path = Path.Combine(Documents.Path, "monthly-report.xlsx"),
253+
Size = 538 * 1024
254+
};
255+
256+
var dashboardDesign = new FlatFileEntry()
257+
{
258+
MyModelId = "6",
259+
ParentId = Images.MyModelId,
260+
Name = "Dashboard Design",
261+
IsDirectory = false,
262+
HasDirectories = false,
263+
Extension = ".png",
264+
DateCreated = new DateTime(2022, 1, 10),
265+
DateCreatedUtc = new DateTime(2022, 1, 10),
266+
DateModified = new DateTime(2022, 2, 13),
267+
DateModifiedUtc = new DateTime(2022, 2, 13),
268+
Path = Path.Combine(Images.Path, "dashboard-design.png"),
269+
Size = 1024
270+
};
271+
272+
var gridDesign = new FlatFileEntry()
273+
{
274+
MyModelId = "7",
275+
ParentId = Images.MyModelId,
276+
Name = "Grid Design",
277+
IsDirectory = false,
278+
HasDirectories = false,
279+
Extension = ".jpg",
280+
DateCreated = new DateTime(2022, 1, 12),
281+
DateCreatedUtc = new DateTime(2022, 1, 12),
282+
DateModified = new DateTime(2022, 2, 13),
283+
DateModifiedUtc = new DateTime(2022, 2, 13),
284+
Path = Path.Combine(Images.Path, "grid-design.jpg"),
285+
Size = 1024
286+
};
287+
288+
var files = new List<FlatFileEntry>()
289+
{
290+
workFiles,
291+
292+
Documents,
293+
specification,
294+
report,
295+
296+
Images,
297+
dashboardDesign,
298+
gridDesign
299+
};
300+
301+
return await Task.FromResult(files);
302+
}
303+
}
304+
````
305+
306+
## See Also
307+
308+
* [Live Demo: FileManager](https://demos.telerik.com/blazor-ui/filemanager/overview)
309+
* [FileManager Events]({%slug filemanager-events%})

0 commit comments

Comments
 (0)