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

Create Custom File Manager Command

Environment

Product Progress® Kendo UI® File Manager for jQuery

Description

How can I create a custom command for the Kendo UI File Manager?

Creating a Custom Command

As of Kendo UI R1 2020 SP1 the kendo.ui.filemanager namespace exposes the FileManagerCommand class that could be extended to implement a custom File Manager command.

<div id="filemanager"></div>

<script>
  var ds = [
    {
      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(),
          }
      ]
    }
  ];

  var fm = $("#filemanager").kendoFileManager({
    dataSource: ds,
    toolbar: {
      items: [
        { type: "button", name: "custom", text: "MyCommand", command: "MyCustomCommand", options: "{ \"arg\": \"argument\" }" }
      ]
    },
    contextMenu: {
      items: [
        { name: "custom", text: "MyCommand", command: "MyCustomCommand" }
      ]
    }
  }).data("kendoFileManager");

  var filemanagerNS = kendo.ui.filemanager;

  filemanagerNS.commands.MyCustomCommand = filemanagerNS.FileManagerCommand.extend({
    exec: function(){
      var that = this,
          filemanager = that.filemanager, // get the kendo.ui.FileManager instance
          options = that.options, // get the options passed through the tool
          target = options.target // options.target is available only when command is executed from the context menu
          selectedFiles = filemanager.getSelected(); // get the selected files

      console.log(options.arg, target, selectedFiles);
      // Proceed with the logic of the custom command.
    }
  });
</script>

See Also

In this article