JavaScript/jQuery FileManager - contextMenu
Type:
dxFileManagerContextMenu
items[]
Type:
Default Value: [ 'create', 'upload', 'rename', 'move', 'copy', 'delete', 'refresh', 'download' ]
Accepted Values: 'create' | 'upload' | 'refresh' | 'download' | 'move' | 'copy' | 'rename' | 'delete'
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.
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.
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>
Feedback