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

ContextMenu

configuration

Configures the ContextMenu of the FileManager.

contextMenu

Object|Boolean

Default: true

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

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

contextMenu.activate

Function

Fires when a sub menu or the ContextMenu gets opened and its animation finished. ContextMenu Events.

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

    $("#fileManager").kendoFileManager({
        contextMenu: {
            activate: function(e) {
                console.log("ContextMenu activated");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.close

Function

Fires before a sub menu or the ContextMenu gets closed. You can cancel this event to prevent closure. ContextMenu Events.

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

    $("#fileManager").kendoFileManager({
        contextMenu: {
            close: function(e) {
                console.log("ContextMenu is closing");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.deactivate

Function

Fires when a sub menu or the ContextMenu gets closed and its animation finished. ContextMenu Events.

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

    $("#fileManager").kendoFileManager({
        contextMenu: {
            deactivate: function(e) {
                console.log("ContextMenu deactivated");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.items

Array

Configures the items of the ContextMenu.

<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.open

Function

Fires before a sub menu or the ContextMenu gets opened. You can cancel this event to prevent opening the sub menu. ContextMenu Events.

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

    $("#fileManager").kendoFileManager({
        contextMenu: {
            open: function(e) {
                console.log("ContextMenu is opening");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

contextMenu.select

Function

Fires when a menu item gets selected. ContextMenu Events.

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

    $("#fileManager").kendoFileManager({
        contextMenu: {
            select: function(e){
                console.log('Selected item: ' + $(e.item).text())
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

Related Members