JavaScript/jQuery FileManager - itemView
Configures the file and directory view.
Type:
Default Value: null
NOTE
Set the itemView.mode property to details to configure columns in the UI component.
jQuery
JavaScript
$(function () { $("#file-manager").dxFileManager({ itemView: { mode: "thumbnails", showFolders: false, showParentFolder: false } // ... }); });
Angular
app.component.html
app.module.ts
<dx-file-manager> <dxo-item-view mode="thumbnails" showFolders="false" showParentFolder="false" > </dxo-item-view> <!-- ... --> </dx-file-manager>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxFileManagerModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxFileManagerModule ], //... }) export class AppModule { }
Vue
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>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileManager, { ItemView } from 'devextreme-react/file-manager'; class App extends React.Component { render() { return ( <FileManager> <ItemView mode="thumbnails" showFolder={false} showParentFolder={false} /> </FileManager> ); } } export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt() .ItemView(v => v .Mode() .ShowFolder(false) .ShowParentFolder(false) ) )
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt() .ItemView(v => v .Mode() .ShowFolder(false) .ShowParentFolder(false) ) )
details
Configures the "Details" file system representation mode.
Type:
jQuery
JavaScript
$(function () { $("#file-manager").dxFileManager({ itemView: { details: { columns: [ "thumbnail", "name", // ... ] } }, // ... }); });
Angular
app.component.html
app.module.ts
<dx-file-manager> <dxo-item-view> <dxo-details> <dxi-column dataField="thumbnail"></dxi-column> <dxi-column dataField="name"></dxi-column> <!-- ... --> </dxo-details> </dxo-item-view> </dx-file-manager>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxFileManagerModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxFileManagerModule ], //... }) export class AppModule { }
Vue
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>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileManager, { ItemView, Details, Column } from 'devextreme-react/file-manager'; class App extends React.Component { render() { return ( <FileManager> <ItemView> <Details> <Column dataField="thumbnail" /> <Column dataField="name" /> <!-- ... --> </Details> </ItemView> </FileManager> ); } } export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt() .ItemView(itemView => { itemView.Details(details => { details.Columns(columns => { columns.Add().DataField("thumbnail"); columns.Add().DataField("name"); <!-- ... --> }); }) }) )
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt() .ItemView(itemView => { itemView.Details(details => { details.Columns(columns => { columns.Add().DataField("thumbnail"); columns.Add().DataField("name"); <!-- ... --> }); }) }) )
mode
Specifies the file system representation mode.
Type:
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.
Type:
Default Value: true
showParentFolder
Specifies whether to display the parent directory in the view.
Type:
Default Value: true
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.