ContextMenu in FileManager
The Telerik UI for ASP.NET Core 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 Core 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")
);
})
)
<kendo-filemanager name="filemanager" upload-url="@Url.Action("Upload", "FileManagerData")">
<filemanager-datasource>
<transport>
<read url="@Url.Action("Read", "FileManagerData")" />
<create url="@Url.Action("Destroy", "FileManagerData")" />
<destroy url="@Url.Action("Create", "FileManagerData")" />
<update url="@Url.Action("Update", "FileManagerData")" />
</transport>
</filemanager-datasource>
<context-menu>
<items>
<item name="rename"></item>
<item name="delete"></item>
</items>
</context-menu>
</kendo-filemanager>
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.
-
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"); }); })<context-menu enabled="true"> <items> <item name="rename"> </item> <item name="delete"> </item> <item name="custom" text="Custom button" command="MyCustomCommand"> </item> </items> </context-menu> -
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
RenameandDeletecommands are to be added, it is mandatory to configure all the requiredText(),Command()andIcon()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");
});
})
<context-menu enabled="true">
<items>
<item name="rename">
</item>
<item name="delete" command="DeleteCommand" text="Delete" icon="x">
</item>
<item name="custom" command="CustomCommand" text="Files Selected" icon="info-circle">
</item>
</items>
</context-menu>