New to Kendo UI for jQuery? Download free 30-day trial

Views Overview

The FileManager provides two inbuilt views for content visualization: Grid and List Views.

You can switch between views from the Toolbar button group

Grid View

This view is achieved with the Kendo Grid and in renders the files in a tabular manner (see Image1 below). That said, you can control the configuration of this view through the views.grid object of the FileManager (see example below).

    <div id="fileManager"></div>
    <script>
        var baseUrl = "https://demos.telerik.com/kendo-ui/service/filemanager/";

        $("#fileManager").kendoFileManager({
          views: {
            grid: {
              sortable: false //disable the sorting of the grid
            }
          },
          dataSource: {
            transport: {
              read: {
                type: "post",
                url: baseUrl + "Read"
              },
              update: {
                type: "post",
                url: baseUrl + "Update"
              },
              create: {
                type: "post",
                url: baseUrl + "Create"
              },
              destroy: {
                type: "post",
                url: baseUrl + "Destroy"
              }
            }
          }
        });
    </script>

GridView type in FileManager:

List View (Thumbnails)

The List view is implemented with the help of the Kendo ListView component. The content in this view is rendered as a list of thumbnails, representing the files. You can control the configuration of this view trough the views.list object of the FileManager.

     <div id="fileManager"></div>
    <script>
      var baseUrl = "https://demos.telerik.com/kendo-ui/service/filemanager/";

      $("#fileManager").kendoFileManager({
        views: {          
          list: {
              selectable: "single" //allows only single selection int the ListView
          }
        },
        dataSource: {
          transport: {
            read: {
              type: "post",
              url: baseUrl + "Read"
            },
            update: {
              type: "post",
              url: baseUrl + "Update"
            },
            create: {
              type: "post",
              url: baseUrl + "Create"
            },
            destroy: {
              type: "post",
              url: baseUrl + "Destroy"
            }
          }
        }
      });
    </script>

ListView type in FileManager:

See Also

In this article