Allowing ContextMenu Commands for Files Only in ListView

Environment

Product	Version
Progress® Telerik UI for ASP.NET Core	2023.3.1114

Description

How can I configure the Telerik UI for ASP.NET Core to only allow a context menu command to work for files in the right pane?

Solution

To display ContextMenu commands only for files and not folders in the right pane/ListView of the UI for ASP.NET Core FileManager, follow the steps below:

1. Define the ContextMenu's Open event handler.
2. Check if the target is the TreeView (left pane) by determining if it has the k-treeview-item class.
3. Determine if the target is a folder by checking if the k-svg-i-folder icon exists.
4. Make a reference to the specific command item using the data attribute.
5. Conditionally disable the listItem from the Kendo UI ContextMenu.

Razor

@(Html.Kendo().FileManager().Name("filemanager")
    .ContextMenu(context => context.Items(items =>
    {
        items.Add("rename");
    }).Open("onOpen"))  //Add Open Event
    //...
)

javascript

function onOpen(e) {
    //Check if the target is from the TreeView
    var isTreeView = $(e.target).hasClass("k-treeview-item");

    //find the folder
    var isFolder = $(e.target).find("span.k-svg-i-folder").length;

    //find the command List Item - rename in this case
    var renameCommand = $(e.sender.wrapper).find("li[data-command='RenameCommand']");

    //If it's a folder or TreeView Item
    if (isFolder || isTreeView) {

        //Disable the listItem
        this.enable(renameCommand , false);
    } else {

        //Otherwise, enable it
        this.enable(renameCommand , true);
    }
}

Please refer to this sample for a visual representation of the approach.