Responsive Layout

Use the SettingsAdaptivity.Enable property to enable the responsive mode. In this mode, the File Manager's visual interface has the following features:

  • The directory tree is hidden when the browser window's inner width is less than or equal to the SettingsAdaptivity.CollapseFolderContainerAtWindowInnerWidth property's value. An end-user can access the folder tree using the hamburger button. This behavior can be disabled using the SettingsAdaptivity.EnableCollapseFolderContainer property.
  • The toolbar buttons are successively hidden as the control shrinks to fit the browser window's width. The buttons are hidden in the order specified with their AdaptivePriority property. A user can access the hidden items by clicking the ellipse button on the toolbar's right.
  • In the same manner, if the Details view mode is enabled, the grid automatically hides columns one by one to fit the browser window's width. You can define the order in which columns are hidden by specifying the details column AdaptivePriority property for each data column and the DetailsViewSettings.SettingsCommandColumn.AdaptivePriority property for a command column.
Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
<dx:BootstrapFileManager runat="server" Height="700">
    <SettingsAdaptivity Enabled="true" CollapseFolderContainerAtWindowInnerWidth="750" />
    <Settings RootFolder="~/Content/FileManager/Files" InitialFolder="Documents"
        ThumbnailFolder="~/Content/FileManager/Thumbnails" />
    <SettingsEditing AllowCreate="true" AllowDelete="true" AllowMove="true" AllowCopy="true" AllowRename="true"
        AllowDownload="true" TemporaryFolder="~/Content/FileManager/Temp" />
    <SettingsToolbar ShowPath="false" />
    <SettingsBreadcrumbs Visible="true" ShowParentFolderButton="true" />
    <SettingsFileList ShowFolders="true">
        <ThumbnailsViewSettings ThumbnailWidth="48" ThumbnailHeight="48" />
Screen Size
Color Themes
Demo QR Code