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 widget is built entirely by Kendo UI for jQuery components: Grid, ListView, TreeView, Toolbar, Breadcrumb.

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:

  1. Use the jQuery.data() method.
  2. Once a reference is established, use the FileManager API to control its behavior.

    var filemanager = $("#filemanager").data("kendoFileManager");
    

Functionality and Features

Visit the Client API section for full description of the configurations methods and events of the Kendo UI for jQuery FileManager component.

See Also

In this article
Not finding the help you need? Improve this article