Angular FileManager - contextMenu

Configures the context menu settings.

Selector: dxo-context-menu
Type: dxFileManagerContextMenu

items[]

Configures context menu items' settings.

Selector: dxi-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

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 { }

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

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 { }