FileManager TagHelper Overview
The Telerik UI for ASP.NET Core FileManager TagHelper is a server-side wrapper for the Kendo UI FileManager widget. The FileManager is an Explorer-like component enabling you to manage files and folders
It enables you to organize and manage files and folders and provides you with a rich API for customization. You can show additional information about the selected file in a template-customizable Preview Pane, which you can show or hide via a switch button. The widget is built entirely by Kendo UI for jQuery components: Grid, ListView, TreeView, Toolbar, Breadcrumb.
The FileManager is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Filter
The following example demonstrates initialization of the FileManager with a local binding. The file structure is served as JSON though the FileManager DataSource object.
@addTagHelper *, Kendo.Mvc
<kendo-filemanager name="filemanager11" upload-url="@Url.Action("Upload", "FileManagerData")">
<filemanager-datasource>
<transport>
<read url="@Url.Action("Read", "FileManagerData")" />
<create url="@Url.Action("Destroy", "FileManagerData")" />
<destroy url="@Url.Action("Create", "FileManagerData")" />
<update url="@Url.Action("Update", "FileManagerData")" />
</transport>
</filemanager-datasource>
</kendo-filemanager>
// GET: /FileManager/
private const string contentFolderRoot = "~/Content/";
private const string prettyName = "Folders/";
private static readonly string[] foldersToCopy = new[] { "~/Content/shared/filemanager" };
/// <summary>
/// Gets the base paths from which content will be served.
/// </summary>
public override string ContentPath
{
get
{
return CreateUserFolder();
}
}
/// <summary>
/// Gets the valid file extensions by which served files will be filtered.
/// </summary>
public override string Filter
{
get
{
return "*.*";
}
}
private string CreateUserFolder()
{
var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName);
var path = Server.MapPath(virtualPath);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
foreach (var sourceFolder in foldersToCopy)
{
CopyFolder(Server.MapPath(sourceFolder), path);
}
}
return virtualPath;
}
private void CopyFolder(string source, string destination)
{
if (!Directory.Exists(destination))
{
Directory.CreateDirectory(destination);
}
foreach (var file in Directory.EnumerateFiles(source))
{
var dest = Path.Combine(destination, Path.GetFileName(file));
System.IO.File.Copy(file, dest);
}
foreach (var folder in Directory.EnumerateDirectories(source))
{
var dest = Path.Combine(destination, Path.GetFileName(folder));
CopyFolder(folder, dest);
}
}
Referencing Existing Instances
To refer to an existing Grid instance, use the jQuery.data()
method. Once a reference is established, use the FileManager client-side API to control its behavior.
var filemanager = $("#filemanager").data("kendoFileManager");
Functionality and Features
- Data binding
- ContextMenu
- Drag and Drop
- Views
- Navigation
- PreviewPane
- Search
- Sort
- Toolbar Commands
- Accessibility
- Globalization
Visit the Client API section for full description of the configurations methods and events of the Kendo UI for jQuery FileManager component.