React FileManager - contextMenu.items

Configures context menu items' settings.

Selector: Item
Default Value: [ 'create', 'upload', 'rename', 'move', 'copy', 'delete', 'refresh', 'download' ]

The FileManager UI component allows you to add default and custom context menu items.

Predefined Items

Predefined context menu items include:

  • 'create' - Creates a new directory.
  • 'upload' - Uploads a file.
  • 'refresh' - Refreshes the file manager content.
  • 'download' - Downloads a file.
  • 'move' - Moves files and directories.
  • 'copy' - Copies files and directories.
  • 'rename' - Renames files and directories.
  • 'delete' - Deletes files and directories.

To add a predefined item to the context menu, add its name and optional settings ('visible', 'beginGroup', 'text', 'icon', 'disabled') to the items array.

DevExtreme FileManager - Predefined Context Menu Items

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                // Specify a predefined item's name only
                "rename",
                // Specify a predefined item's name and optional settings
                {
                    name: "download",
                    text: "Download a File"
                },
                {
                    name: "refresh",
                    beginGroup: true
                }
            ]
        }          
    });
});  
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager ... >
    <dxo-context-menu>
        <dxi-item name="rename"></dxi-item>
        <dxi-item name="download" text="Download a File"></dxi-item>
        <dxi-item name="refresh" beginGroup="true"></dxi-item>        
    </dxo-context-menu>
    <!-- ... -->
</dx-file-manager>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    // ...      
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    imports: [
        DxFileManagerModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxFileManager ... >
        <DxContextMenu>
            <DxItem name="rename"/>
            <DxItem name="download" text="Download a File" />
            <DxItem name="refresh" :begin-group="true" />
        </DxContextMenu>            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager, 
        DxContextMenu,
        DxItem 
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager, 
            DxContextMenu, 
            DxItem
            // ... 
        },
        data() {
            return {
                //...
            };
        } 
    };
</script>
React
App.js
import React from 'react';
import FileManager, { ContextMenu, Item } from 'devextreme-react/file-manager';

const App = () => {
    return (
        <FileManager...>
            <ContextMenu>
                <Item name="rename" />
                <Item name="download" text="Download a File" />
                <Item name="refresh" beginGroup="true" />
            </ContextMenu>                
        </FileManager>
    );
};

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .ContextMenu(cm => {
        cm.Items(i => {
            i.Add().Name(FileManagerContextMenuItem.Rename);
            i.Add()
                .Name(FileManagerContextMenuItem.Download)
                .Text("Download a File");
            i.Add()
                .Name(FileManagerContextMenuItem.Refresh)
                .BeginGroup(true);
        });
    })
    // ...
)
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .ContextMenu(cm => {
        cm.Items(i => {
            i.Add().Name(FileManagerContextMenuItem.Rename);
            i.Add()
                .Name(FileManagerContextMenuItem.Download)
                .Text("Download a File");
            i.Add()
                .Name(FileManagerContextMenuItem.Refresh)
                .BeginGroup(true);
        });
    })
    // ...
)

Custom Items

To add a custom context menu item, specify its text and optional settings (for example, a file extension for a newly created file). Use the contextMenuItemClick event to handle clicks on custom context menu items.

DevExtreme FileManager - Custom Context Menu Items

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                {
                    text: "Create .txt Document",
                    extension: ".txt"
                },
                {
                    text: "Create .rtf Document",
                    extension: ".rtf"
                },
                {
                    text: "Create .xls Document",
                    extension: ".xls"
                }
            ]
        }
        onContextMenuItemClick: onItemClick
        // ...
    });
});
function onItemClick(args) {
    if(args.itemData.extension) {
        // your code
    }
}
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager 
    (onContextMenuItemClick)="onItemClick($event)">
    <dxo-context-menu>
        <dxi-item text="Create .txt Document" [options]="{ extension: '.txt' }"></dxi-item>
        <dxi-item text="Create .rtf Document" [options]="{ extension: '.rtf' }"></dxi-item>
        <dxi-item text="Create .xls Document" [options]="{ extension: '.xls' }"></dxi-item>
    </dxo-context-menu>
    <!-- ... -->
</dx-file-manager>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onItemClick(e){
        if(e.itemData.options.extension) {
            // your code
        }            
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    imports: [
        DxFileManagerModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxFileManager 
        :on-context-menu-item-click="onItemClick" >
        <DxContextMenu>
            <DxItem text="Create .txt Document" :options="{ extension: '.txt' }" />
            <DxItem text="Create .rtf Document" :options="{ extension: '.rtf' }" />
            <DxItem text="Create .xls Document" :options="{ extension: '.xls' }" />
        </DxContextMenu>            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager, 
        DxContextMenu, 
        DxItem
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager, 
            DxContextMenu, 
            DxItem
            // ... 
        },
        methods: {
            onItemClick(e) {
                if(e.itemData.options.extension) {
                    // your code
                }                     
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>
React
App.js
import React from 'react';
import FileManager, { ContextMenu, Item } from 'devextreme-react/file-manager';

const App = () => {
    const onItemClick = (e) => {
        if(e.itemData.extension) {
            // your code
        }
    };

    return (
        <FileManager onContextMenuItemClick={onItemClick}>
            <ContextMenu>
                <Item text="Create .txt Document" extension=".txt" />
                <Item text="Create .rtf Document" extension=".rtf" />
                <Item text="Create .xls Document" extension=".xls" />
            </ContextMenu>                
        </FileManager>
    );
};

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .ContextMenu(cm => {
        cm.Items(i => {
            i.Add()
                .Text("Create .txt Document")
                .Option("extension", ".txt");
            i.Add()
                .Text("Create .rtf Document")
                .Option("extension", ".rtf");
            i.Add()
                .Text("Create .xls Document")
                .Option("extension", ".xls");
        });
    })
    .OnContextMenuItemClick("onItemClick");
)

<script>
    function onItemClick(e) {
        if(e.itemData.extension) {
            // your code
        }
    }
</script>

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

You can add group separators only between items in submenus.

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item.

Type:

Boolean

Default Value: true

disabled

Specifies whether the menu item responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the menu item's icon.

Type:

String

This property accepts one of the following:

items

Configures settings of a context menu item's subitems.

Selector: Item

The FileManager UI component allows you to add default and create custom context menu subitems.

NOTE
You can specify the items option for custom context menu items only.
jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                "create", // default item
                {
                    text: "Create new file", // custom item with subitems
                    items: [
                        {
                            text: "Text Document",
                            extension: ".txt",
                        },
                        // ...
                    ]
                },
                // ...
            ]
        }
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager >
    <dxo-context-menu>
        <dxi-item name="create"></dxi-item>
        <dxi-item text="Create new file">
            <dxi-item text="Text Document" [options]="{ extension: '.txt' }"></dxi-item>
        </dxi-item>
    </dxo-context-menu>
    <!-- ... -->
</dx-file-manager>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    //...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    imports: [
        DxFileManagerModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxFileManager >
        <DxContextMenu>
            <DxItem name="create" />
            <DxItem text="Create new file">
                <DxItem text="Text Document" :options="{ extension: '.txt' }" />
            </DxItem>
        </DxContextMenu>            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager, 
        DxContextMenu,
        DxItem
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager, 
            DxContextMenu,
            DxItem
            // ... 
        },           
        data() {
            return {
                //...
            };
        } 
    };
</script>
React
App.js
import React from 'react';
import FileManager, { ContextMenu, Item } from 'devextreme-react/file-manager';

const App = () => {
    return (
        <FileManager>
            <ContextMenu>
                <Item name="create"/>
                <Item text="Create new file">
                    <Item text="Text Document" extension=".txt" />
                </Item>
            </ContextMenu>                
        </FileManager>
    );
};

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .ContextMenu(cm => {
        cm.Items(i => {
            i.Add().Name(FileManagerContextMenuItem.Create);                
            i.Add()
                .Text("Create new file")
                .Items(item => {
                    item.Add()
                        .Text("Text Document")
                        .Option("extension", ".txt");                            
                });
        });
    });
)

name

Specifies the context menu item's name.

selectable

Specifies whether or not a user can select a menu item.

Type:

Boolean

Default Value: false

selected

Specifies whether or not the item is selected.

Type:

Boolean

Default Value: false

text

Specifies the text inserted into the item element.

Type:

String

visible

Specifies the context menu item's visibility.

Type:

Boolean

Default Value: undefined