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

DataSource

configuration

Sets the FileManagerDataSource of the FileManager. Can be bound to a remote service or local data.

When using the transport options as functions the target parameter will not be sent automatically due to the DataSource not calling the parameterMap method. You can call it within your function to pass the required data - Example - read as function.

dataSource

Object | Array | kendo.data.FileManagerDataSource

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

    $("#fileManager").kendoFileManager({
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                },
                update: {
                    method: "POST",
                    url: baseUrl + "Update"
                },
                create: {
                    method: "POST",
                    url: baseUrl + "Create"
                },
                destroy: {
                    method: "POST",
                    url: baseUrl + "Destroy"
                }
            }
        }
    });
</script>

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

    $("#fileManager").kendoFileManager({
        dataSource: {
            transport: {
                read: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Read",
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                },
                update: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Update",
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                },
                create: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Update",
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                },
                destroy: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Destroy",
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                }
            }
        }
    });
</script>

<div id="fileManager"></div>
<script>
  var myData = [
    {
      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: myData
});
</script>