Customization in TypeScript File Manager component

18 Nov 20182 minutes to read

The File Manager component allows customizing features such as context menu, search, upload, and toolbar using APIs. The following areas can be customized in the File Manager component:

Context menu customization

Context menu settings—such as the items displayed for files, folders, and layout interactions, as well as visibility—can be customized using the contextMenuSettings property.

Details view customization

Details view settings—such as column width, header text, and templates for each field—can be customized using the detailsViewSettings property.

Navigation pane settings—such as minimum and maximum width, visibility, and sort order—can be customized using the navigationPaneSettings property.

Show/hide file extension

File extensions are displayed in the File Manager component by default. Hide them by disabling the showFileExtension property.

In the File Manager component, the fileLoad and fileOpen events are triggered before a file/folder is rendered and before a file/folder is opened, respectively. These events can be used to perform operations before rendering or opening a file/folder.

Show/hide hidden items

The File Manager component supports showing or hiding hidden items by enabling or disabling the showHiddenItems property.

Show/hide thumbnail images in Large Icons view

Thumbnail images are displayed in the File Manager component’s Large Icons view by default. Hide them by disabling the showThumbnail property.

Toolbar customization

Toolbar settings—such as the items displayed and their visibility—can be customized using the toolbarSettings property.

See Also

Upload customization

Upload settings—such as minimum and maximum file size and auto upload behavior—can be configured using the uploadSettings property.

Tooltip customization

Tooltip values can be customized by adding extra content to the title attributes of the toolbar, navigation pane, Details view, and Large Icons view in the File Manager component.

Maintaining control state on page reload

The File Manager can maintain its state on page reload. Enable the enablePersistence property to preserve the following:

  • Previous view of the File Manager - view
  • Previous path of the File Manager - path
  • Previous selected items of the File Manager - selectedItems

Note: Refresh the files of the current folder programmatically by calling the refreshFiles method.

Specifying the current path of the File Manager

The current path of the File Manager can be specified initially or dynamically using the path property.