Thumbnails
By default, the Bootstrap File Manager control is displayed in Thumbnails mode. In this mode, the File Manage displays files using thumbnail images.
Thumbnail images are generated automatically for image files (.bmp, .jpg, .png, etc.). The generated images are stored in the location specified using the Settings.ThumbnailFolder property. By default, the File Manager keeps thumbnails in the public "~\Thumb\" folder, where every subfolder corresponds to a File Manager folder containing any images. A subfolder name is created using the MD5 (Message Digest 5) algorithm based on a source folder's relative path.
Therefore, if you implement a multi-user application or dynamically change the root folder, it is recommended that you also dynamically specify a thumbnail folder based on the currently logged-in user.
Predefined thumbnails are provided for the following file extensions:
- txt
- rtf, doc, docx, odt
- xls, xlsx, ods
- ppt, pptx, odp
- pdf
Other files are displayed using the default thumbnail image. If the SettingsFileList.ShowFolders option is enabled, the file list includes folder items that also have a dedicated thumbnail image. A predefined thumbnail can be substituted using the CssClasses property.
Thumbnail-specific settings are available through the SettingsFileList.ThumbnailsViewSettings property:
- ThumbnailWidth - Gets or sets the width of thumbnails and folder images displayed in the file area.
- ThumbnailHeight - Gets or sets the height of thumbnails and folder images displayed in the file area.
<dx:BootstrapFileManager runat="server" Height="420px" Settings-EnableMultiSelect="true">
<SettingsFileList ShowFolders="true" ShowParentFolder="true">
<ThumbnailsViewSettings ThumbnailWidth="48" ThumbnailHeight="48" />
</SettingsFileList>
<SettingsAdaptivity Enabled="true" CollapseFolderContainerAtWindowInnerWidth="991" />
<SettingsToolbar ShowPath="false" />
<SettingsBreadcrumbs Visible="true" />
<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" />
</dx:BootstrapFileManager>
Details
In Details view mode, information about files and folders is displayed in a grid view. To enable this mode, set the SettingsFileList.View property to Detail. You can add columns to the grid using the SettingsFileList.DetailsViewSettings.Columns collection property. If this collection is empty, the grid contains the following default columns:
The SettingsFileList.DetailsViewSettings property provides access to the following settings related to the Details view functionality:
- AllowColumnSort - Gets or sets whether end-users can sort data.
- AllowColumnDragDrop - Gets or sets whether end-users can reorder columns by dragging their headers.
- AllowColumnResize - Gets or sets a value that specifies whether the columns can be resized by end-users on the client side.
- ShowHeaderFilterButton - Gets or sets whether column headers display filter buttons.
- ShowSelectAllCheckbox - Specifies whether the Select All check box is displayed in the file list.
- SettingsCommandColumn - Provides access to the settings of the command column.
- SettingsAdaptivity - Provides access to the adaptivity settings.
- ThumbnailHeight - Gets or sets the height of thumbnails and folder images displayed in the file area.
- ThumbnailWidth - Gets or sets the width of thumbnails and folder images displayed in the file area.
<dx:BootstrapFileManager runat="server" Height="480px" Settings-EnableMultiSelect="true">
<SettingsFileList View="Details" ShowFolders="true" ShowParentFolder="true">
<DetailsViewSettings AllowColumnDragDrop="true" ShowSelectAllCheckbox="true" ShowHeaderFilterButton="true" />
</SettingsFileList>
<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" />
<SettingsAdaptivity Enabled="true" CollapseFolderContainerAtWindowInnerWidth="991" />
</dx:BootstrapFileManager>