Vue FileManager - itemView

Configures the file and directory view.

Selector: DxItemView
Type:

Object

Default Value: null

NOTE
Set the itemView.mode property to details to configure columns in the UI component.

View Demo

DevExtreme File Manager - Item View

App.vue
  • <template>
  • <DxFileManager>
  • <DxItemView
  • mode="thumbnails"
  • :show-folders="false"
  • :show-parent-folder="false"
  • >
  • </DxItemView>
  • </DxFileManager>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxFileManager,
  • DxItemView
  • } from 'devextreme-vue/file-manager';
  •  
  • export default {
  • components: {
  • DxFileManager,
  • DxItemView
  • },
  • data() {
  • return {
  • //...
  • };
  • }
  • };
  • </script>

details

Configures the "Details" file system representation mode.

Selector: DxDetails
Type:

Object

DevExtreme File Manager - Columns

App.vue
  • <template>
  • <DxFileManager>
  • <DxItemView>
  • <DxDetails>
  • <DxColumn data-field="thumbnail"/>
  • <DxColumn data-field="name"/>
  • <!-- ... -->
  • </DxDetails>
  • </DxItemView>
  • </DxFileManager>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxFileManager,
  • DxItemView,
  • DxDetails,
  • DxColumn
  • } from 'devextreme-vue/file-manager';
  •  
  • export default {
  • components: {
  • DxFileManager,
  • DxItemView,
  • DxDetails,
  • DxColumn
  • },
  • data() {
  • return {
  • //...
  • };
  • }
  • };
  • </script>

mode

Specifies the file system representation mode.

Default Value: 'details'

A user can use the view switcher on the toolbar to change the mode.

showFolders

Specifies whether to display folders in the view. When this property is false, folders are displayed in the navigation pane only.

Selector: show-folders
Type:

Boolean

Default Value: true

showParentFolder

Specifies whether to display the parent directory in the view.

Selector: show-parent-folder
Type:

Boolean

Default Value: true