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.

Kendo UI for jQuery Kendoka image

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:

  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