JavaScript/jQuery FileManager - contextMenu.items
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.
- <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 { }
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.
- <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 { }
icon
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
items
The FileManager UI component allows you to add default and create custom context menu subitems.
- <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 { }
If you have technical questions, please create a support ticket in the DevExpress Support Center.