All docs
V22.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
Box
Map
A newer version of this page is available. Switch to the current version.

jQuery FileManager - itemView.details

Configures the "Details" file system representation mode.

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");
                <!-- ... -->
            });
        })
    })
)

columns[]

Configures the columns.

Default Value: ['thumbnail', 'name', 'dateModified', 'size']

This property accepts an array of objects, where each object configures a single column. If a column does not need to be customized, this array may include the name of the field that provides data for this column.