Angular FileManager - itemView

Configures the file and directory view.

Selector: dxo-item-view

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

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.

Selector: dxo-details

Type:

Object

DevExtreme File Manager - Columns

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:

String

Default Value: 'details'

Accepted Values: 'details' | 'thumbnails'

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:

Boolean

Default Value: true

showParentFolder

Specifies whether to display the parent directory in the view.

Type:

Boolean

Default Value: true