ContextMenu in FileManager

The Telerik UI for ASP.NET MVC FileManager's ContextMenu enables you to easily execute FileManager commands on the selected file or folder.

The component uses the Telerik UI for ASP.NET MVC ContextMenu, enabling you to get full advantage of its Client API. Once an item is selected, the corresponding command is executed.

The built-in items in the ContextMenu are rename and delete. You can define your custom items which can execute custom commands. You can also manage what items should be visible, by enumerating the needed ones in the initialization of the component (see Example below)

    @(Html.Kendo().FileManager()
        .Name("filemanager")                         
        .ContextMenu(context => context.Items(items =>
        {
            items.Add("rename");
            items.Add("delete");
        })) 
        .DataSource(ds =>
        {
            ds.Read(operation => operation
                .Type(HttpVerbs.Post)
                .Action("Read", "FileManagerData")
            );
            ds.Destroy(operation => operation
                .Type(HttpVerbs.Post)
                .Action("Destroy", "FileManagerData")
            );
            ds.Create(operation => operation
                .Type(HttpVerbs.Post)
                .Action("Create", "FileManagerData")
            );
            ds.Update(operation => operation
                .Type(HttpVerbs.Post)
                .Action("Update", "FileManagerData")
            );
        })
    )

Custom ContextMenu Items

To add a custom command to the context menu of the FileManager, follow the instuctions below. There is no limitation for the number of custom items.

1. Add the item, set text and specify a command name:

       .ContextMenu(context =>
       {
           context.Items(items =>
           {
               items.Add("rename");
               items.Add("delete");
               items.Add("custom").Text("Custom button").Command("MyCustomCommand");
           });
       })
   

2. Create the command for the FileManager:

       $(function(){
           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.
               }
           });
       }); 
   

ContextMenu Icons

The ContextMenu enables you to add the traditional Kendo Web Font Icons in order to enhance the look and feel of the incorporated ContextMenu items.

If the built-in Rename and Delete commands are to be added, it is mandatory to configure all the required Text(), Command() and Icon() configurations.

    .ContextMenu(context =>
    {
        context.Items(items =>
        {
            items.Add("rename");
            items.Add("delete").Text("Delete").Command("DeleteCommand").Icon("x");
            items.Add("custom").Text("Files Selected").Command("CustomCommand").Icon("info-circle");
        });
    })

See Also

• Overview of FileManager
• Drag and Drop FileManager
• Navigation in FileManager