Adaptivity

  • 2 minutes to read

The DevExpress File Manager supports adaptive mode that allows you to build responsive page layouts. Set the FileManagerSettingsAdaptivity.Enabled to true to enable the File Manager's adaptivity.

Online Demo

File Manager - Responsive Layout

Adaptive Folder Container

The adaptive folder container is not displayed permanently and can be shown/hidden using the hamburger button (expand/collapse folder container) in the toolbar's left.

ASPxFileManager_AdaptiveExpandFolderContainer

The folder container switches to the adaptive mode when the browser window's inner width is less than or equal to the FileManagerSettingsAdaptivity.CollapseFolderContainerAtWindowInnerWidth property's value. The default value is 600 pixels.

You can disable the folder container's adaptive behavior by setting the FileManagerSettingsAdaptivity.EnableCollapseFolderContainer to false.

Adaptive Toolbar

The File Manager's adaptive toolbar hides its items if the browser window's inner width changes. A user can access the hidden items by clicking the ellipse (Show hidden items) button on the toolbar’s right.

ASPxFIleManager - Toolbar - AdaptiveButton

You can specify the order in which toolbar items (including custom ones) are hidden using their AdaptivePriority property (for example, the Filter Box's FileManagerToolbarFilterBox.AdaptivePriority property). Toolbar items (excluding the path box and filter box) also provide the FileManagerToolbarItemBase.AdaptiveText property that allows you to specify the text that denotes the hidden item when a user presses the ellipsis button.

Set the FileManagerToolbarAdaptivitySettings.EnableAutoHideRootItems property to false to disable the adaptive File Manager's toolbar.

Adaptive Detail View Mode

The ASPxFileManager in detail view mode provides a responsive file container grid that automatically hides columns one by one when the control's size does not fit the browser window. You can define the order in which columns are hidden by specifying the FileManagerDetailsColumn.AdaptivePriority property for each data column and the FileManagerDetailsCommandColumnSettings.AdaptivePriority property for a command column (displayed when the multi-selection feature is enabled).

Set the FileManagerFileListDetailsViewAdaptivitySettings.Mode to FileManagerDetailsViewAdaptivityMode.Off to disable the file container's grid adaptivity.