Angular FileManager - toolbar
The FileManager UI component allows you to add default and custom toolbar items.
Predefined Items
Predefined toolbar items include:
- 'showNavPane' - Shows or hides the navigation panel.
- 'create' - Creates a new directory.
- 'upload' - Uploads a file.
- 'refresh' - Refreshes the file manager content and shows the progress panel.
- 'download' - Downloads a file.
- 'move' - Moves files and directories.
- 'copy' - Copies files and directories.
- 'rename' - Renames files and directories.
- 'delete' - Deletes files and directories.
- 'switchView' - Switches between the 'Details' and 'Thumbnails' file system representation modes.
- 'clearSelection' - Clears selection from files and directories in the Item View area.
To add a predefined item to the toolbar, specify its name and optional settings ('visible', 'location', 'locateInMenu', 'text', 'icon', 'disabled') and add the item to one of the following collections:
items - Displays toolbar items when no file system item is selected.
fileSelectionItems - Displays toolbar items when one or more file system items are selected.
- <dx-file-manager>
- <dxo-toolbar>
- <!-- Specifies a predefined item's name and optional settings -->
- <dxi-item name="create" text="Create a directory" icon="newfolder"></dxi-item>
- <!-- Specifies a predefined item's name only -->
- <dxi-item name="switchView"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <!-- Specifies items that are visible when users select files -->
- <dxi-file-selection-item name="copy"></dxi-file-selection-item>
- <dxi-file-selection-item name="rename"></dxi-file-selection-item>
- </dxo-toolbar>
- </dx-file-manager>
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxFileManagerModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxFileManagerModule
- ],
- //...
- })
- export class AppModule { }
Custom Items
To add a custom toolbar item, specify its text and optional settings (for example, a file extension for the toolbar item that creates a new file) and add the item to one of the following collections:
items - Displays toolbar items when no file system item is selected.
fileSelectionItems - Displays toolbar items when one or more file system items are selected.
The widget property allows you to specify a UI component for a custom toolbar item (dxButton is the default UI component). Use the toolbarItemClick event to handle clicks on custom toolbar items.
- <dx-file-manager>
- <dxo-toolbar>
- <dxi-item widget="dxMenu" [options]="fileMenuOptions"></dxi-item>
- </dxo-toolbar>
- </dx-file-manager>
- import { Component } from '@angular/core';
- import { Service } from './app.service';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- providers: [Service]
- })
- export class AppComponent {
- constructor(service: Service) {
- this.fileMenuOptions = {
- items: [
- {
- text: "Create new file",
- icon: "plus",
- items: [
- {
- text: "Text Document",
- options: {
- extension: ".txt",
- }
- },
- {
- text: "RTF Document",
- options: {
- extension: ".rtf",
- }
- },
- {
- text: "Spreadsheet",
- options: {
- extension: ".xls",
- }
- }
- ]
- }
- ],
- onItemClick: () => {
- // ...
- }
- };
- }
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxFileManagerModule } from 'devextreme-angular';
- @NgModule({
- imports: [
- BrowserModule,
- DxFileManagerModule
- ],
- declarations: [AppComponent],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
fileSelectionItems[]
items[]
If you have technical questions, please create a support ticket in the DevExpress Support Center.