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

ContextMenu.items

configuration

Configures the items of the ContextMenu.

contextMenu.items

Array

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        contextMenu: {
            items: [
                "delete"
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.items.command

String

Specifies the command of the item.

<div id="fileManager"></div>
<script>
  var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

  $("#fileManager").kendoFileManager({
    height: 500,
    dataSource: {
      transport: {
        read: {
          method: "POST",
          url: baseUrl + "Read"
        },
        destroy: {
          method: "POST",
          url: baseUrl + "Destroy"
        }
      }
    },
    contextMenu: {
      items: [
        { name: "delete" },
        { name: "custom", text: "Custom command", command: "MyCustomCommand", spriteCssClass:"k-icon k-i-info" }
      ]
    }
  });

  $(document).ready(function () {
    var filemanagerNS = kendo.ui.filemanager;
    filemanagerNS.commands.MyCustomCommand = filemanagerNS.FileManagerCommand.extend({
      exec: function(){
        kendo.alert('Custom command in ContextMenu has been clicked')
      }
    });
  })
</script>

contextMenu.items.icon

String

Specifies the icon of the item.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        contextMenu: {
            items: [
                {
                    text: "delete",
                    icon: "pencil"
                }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.items.name

String

Specifies the name of the item.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        contextMenu: {
            items: [
                { name: "delete" },
                { name: "rename" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.items.spriteCssClass

String

Specifies the spriteCssClass of the item.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        contextMenu: {
            items: [
                { name: "delete", spriteCssClass: "k-icon k-i-delete" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.items.text

String

Specifies the text of the item.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        contextMenu: {
            items: [
                { name: "delete", text: "Delete File" },
                { name: "rename", text: "Rename File" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>