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:
- Define the ContextMenu's Open event handler.
- Check if the target is the TreeView (left pane) by determining if it has the
k-treeview-item
class. - Determine if the target is a folder by checking if the
k-svg-i-folder
icon exists. - Make a reference to the specific command item using the data attribute.
- Conditionally disable the listItem from the Kendo UI ContextMenu.
@(Html.Kendo().FileManager().Name("filemanager")
.ContextMenu(context => context.Items(items =>
{
items.Add("rename");
}).Open("onOpen")) //Add Open Event
//...
)
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.