Kendo UI for jQuery FileManager Overview
The Kendo UI FileManager is an Explorer-like component enabling you to manage file 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 component is built entirely by Kendo UI for jQuery components: Grid, ListView, TreeView, Toolbar, Breadcrumb.
The FileManager is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the FileManager
The following example demonstrates initialization of the FileManager with a local binding. The file structure is served as JSON though the FileManager DataSource object.
// Define the HTML div that will contain the FileManager.
<div id="filemanager"></div>
// Initialize the FileManager with local data.
<script>
var data = [
{
name: "Folder",
isDirectory: true,
hasDirectories: false,
path: "folder",
extension: "",
size: 0,
createdUtc: new Date(),
items: [
{
name: "Image.jpg",
isDirectory: false,
hasDirectories: false,
path: "folder/Image.jpg",
extension: ".jpg",
size: 20,
createdUtc: new Date(),
},
{
name: "Image2.jpg",
isDirectory: false,
hasDirectories: false,
path: "folder/Image2.jpg",
extension: ".jpg",
size: 20,
createdUtc: new Date(),
}
]
}
];
$("#filemanager").kendoFileManager({
dataSource: data
});
</script>
Referencing Existing Instances
To refer to an existing FileManager instance:
- Use the
jQuery.data()method. -
Once a reference is established, use the FileManager 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.