JavaScript/jQuery FileManager Options

$(function () {
    $("#file-manager").dxFileManager({
        allowedFileExtensions: [".js", ".json", ".css"]
        // ...
    });
});

<template>
    <DxFileManager
        :allowed-file-extensions="allowedFileExtensions" >   
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                allowedFileExtensions: ['.js', '.json', '.css']
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

const allowedFileExtensions = ['.txt', '.doc', '.png'];

class App extends React.Component {
    render() {
        return (
            <FileManager allowedFileExtensions={allowedFileExtensions} >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .AllowedFileExtensions(new[] { ".js", ".json", ".css" })
    // ...
)

@(Html.DevExtreme().FileManager()
    .AllowedFileExtensions(new[] { ".js", ".json", ".css" })
    // ...
)

$(function () {
    $("#file-manager").dxFileManager({
        currentPath: "Documents/Images"
        // ...
    });
});

<template>
    <DxFileManager
        :current-path="Documents/Images" >   
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                // ...
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    render() {
        return (
            <FileManager currentPath="Documents/Images" >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .CurrentPath("Documents/Images")
    // ...
)

@(Html.DevExtreme().FileManager()
    .CurrentPath("Documents/Images")
    // ...
)

$(function () {
    $("#file-manager").dxFileManager({
        currentPathKeys: ["EB458000-0341-6943", "92F5-4722-A7D6-98EB"]
        // ...
    });
});

<template>
    <DxFileManager
        :current-path-keys="keys" >   
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                keys: ['EB458000-0341-6943', '92F5-4722-A7D6-98EB']
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

const keys = ['EB458000-0341-6943', '92F5-4722-A7D6-98EB']

class App extends React.Component {
    render() {
        return (
            <FileManager currentPathKeys={keys} >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .CurrentPathKeys(new[] { "EB458000-0341-6943", "92F5-4722-A7D6-98EB" })
    // ...
)

@(Html.DevExtreme().FileManager()
    .CurrentPathKeys(new[] { "EB458000-0341-6943", "92F5-4722-A7D6-98EB" })
    // ...
)

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        customizeDetailColumns: function(columns) {
            // ...
            // Customize the "columns" array objects here
            // ...
            return columns;
        }
    });
});

<template>
    <DxFileManager ...
        :customize-detail-columns="fileManager_customizeDetailColumns"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        fileManager_customizeDetailColumns(columns) {
            // ...
            // Customize the "columns" array objects here
            // ...
            return columns;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor(props) {
    //     super(props);
    //     this.fileManager_customizeDetailColumns = this.fileManager_customizeDetailColumns.bind(this);
    // }

    fileManager_customizeDetailColumns(columns) {
        // ...
        // Customize the "columns" array objects here
        // ...
        return columns;
    }

    render() {
        return (
            <FileManager ...
                customizeDetailColumns={this.fileManager_customizeDetailColumns}
            />
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    @* ... *@
    .CustomizeDetailColumns("customizeDetailColumns")
)

<script type="text/javascript">
    function customizeDetailColumns(columns) {
        // ...
        // Customize the "columns" array objects here
        // ...
        return columns;
    }
</script>

@(Html.DevExtreme().FileManager()
    @* ... *@
    .CustomizeDetailColumns("customizeDetailColumns")
)

<script type="text/javascript">
    function customizeDetailColumns(columns) {
        // ...
        // Customize the "columns" array objects here
        // ...
        return columns;
    }
</script>

$(function(){
    $("#fileManagerContainer").dxFileManager({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxFileManager ...
        :element-attr="fileManagerAttributes">
    </DxFileManager>
</template>

<script>
import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    data() {
        return {
            fileManagerAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    fileManagerAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <FileManager ...
                elementAttr={this.fileManagerAttributes}>
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
)
<script src="~/Scripts/data/data.js"></script>

<!-- data.js -->
var fileSystem = [{
    name: "Documents",
    isDirectory: true,
    items: [
        {
        name: "Projects",
        isDirectory: true,
        items: [
            {
            name: "About.rtf",
            isDirectory: false,
            size: 1024
        }, {
            name: "Passwords.rtf",
            isDirectory: false,
            size: 2048
        }]
    }, {
        name: "About.xml",
        isDirectory: false,
        size: 1024
    }]
}];

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
)
<script src="~/Scripts/data/data.js"></script>

<!-- data.js -->
var fileSystem = [{
    name: "Documents",
    isDirectory: true,
    items: [
        {
        name: "Projects",
        isDirectory: true,
        items: [
            {
            name: "About.rtf",
            isDirectory: false,
            size: 1024
        }, {
            name: "Passwords.rtf",
            isDirectory: false,
            size: 2048
        }]
    }, {
        name: "About.xml",
        isDirectory: false,
        size: 1024
    }]
}];

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        focusedItemKey: "item1_key"
    });
});

<template>
    <DxFileManager
        :focused-item-key="item1_key" >   
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                // ...
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    render() {
        return (
            <FileManager focusedItemKey="item1_key" >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .FocusedItemKey("item1_key")
    // ...
)

@(Html.DevExtreme().FileManager()
    .FocusedItemKey("item1_key")
    // ...
)

$(function () {
    $("#file-manager").dxFileManager({
        itemView: {
            mode: "thumbnails",
            showFolders: false,
            showParentFolder: false
        }
        // ...
    });
});

<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>

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;

@(Html.DevExtreme().Gantt()
    .ItemView(v => v
        .Mode()
        .ShowFolder(false)
        .ShowParentFolder(false)
    )
)

@(Html.DevExtreme().Gantt()
    .ItemView(v => v
        .Mode()
        .ShowFolder(false)
        .ShowParentFolder(false)
    )
)

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onContextMenuItemClick: function(e) {
            // Your code goes here
        }
    });
});
function onItemClick(args) {
    if(args.itemData.extension) {
        // your code
    }
}

<template>
    <DxFileManager 
        :on-context-menu-item-click="onItemClick" >
        <DxContextMenu>
            <DxItem text="Create .txt Document" :options="{ extension: '.txt' }" />
            <DxItem text="Create .rtf Document" :options="{ extension: '.rtf' }" />
            <DxItem text="Create .xls Document" :options="{ extension: '.xls' }" />
        </DxContextMenu>            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager, 
        DxContextMenu, 
        DxItem
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager, 
            DxContextMenu, 
            DxItem
            // ... 
        },
        methods: {
            onItemClick(e) {
                if(e.itemData.options.extension) {
                    // your code
                }                     
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager, { ContextMenu, Item } from 'devextreme-react/file-manager';

const App = () => {
    const onItemClick = (e) => {
        if(e.itemData.extension) {
            // your code
        }
    };

    return (
        <FileManager onContextMenuItemClick={onItemClick}>
            <ContextMenu>
                <Item text="Create .txt Document" extension=".txt" />
                <Item text="Create .rtf Document" extension=".rtf" />
                <Item text="Create .xls Document" extension=".xls" />
            </ContextMenu>                
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .ContextMenu(cm => {
        cm.Items(i => {
            i.Add()
                .Text("Create .txt Document")
                .Option("extension", ".txt");
            i.Add()
                .Text("Create .rtf Document")
                .Option("extension", ".rtf");
            i.Add()
                .Text("Create .xls Document")
                .Option("extension", ".xls");
        });
    })
    .OnContextMenuItemClick("onItemClick");
)

<script>
    function onItemClick(e) {
        if(e.itemData.extension) {
            // your code
        }
    }
</script>

@(Html.DevExtreme().FileManager()
    .ContextMenu(cm => {
        cm.Items(i => {
            i.Add()
                .Text("Create .txt Document")
                .Option("extension", ".txt");
            i.Add()
                .Text("Create .rtf Document")
                .Option("extension", ".rtf");
            i.Add()
                .Text("Create .xls Document")
                .Option("extension", ".xls");
        });
    })
    .OnContextMenuItemClick("onItemClick");
)

<script>
    function onItemClick(e) {
        if(e.itemData.extension) {
            // your code
        }
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onContextMenuShowing: function (e) {
            const contextMenuItems = ['create', 'rename', 'delete'];
            if (e.viewArea === 'itemView'){
                // your code
                e.cancel = true;
            } else {
                // your code
                e.component.option('contextMenu.items', contextMenuItems);
            }
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @context-menu-showing="onContextMenuShowing"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onContextMenuShowing(e) {
            const contextMenuItems = ['create', 'rename', 'delete'];
            if (e.viewArea === 'itemView'){
                // your code
                e.cancel = true;
            } else {
                // your code
                e.component.option('contextMenu.items', contextMenuItems);
            }                
        }
    }
}
</script>

import React from 'react';
import FileManager, { ContextMenu } from 'devextreme-react/file-manager';

const App = () => {
    const menuItems = ['create', 'rename', 'delete'];
    const [contextMenuItems, setContextMenuItems] = useState(menuItems);
    const filterMenuItems = useCallback((items) => {
        return items.filter((item) => item !== "delete");
    }, []);
    const onContextMenuShowing = useCallback(
        (e) => {
            if (e.viewArea === "itemView") {
                // your code
                e.cancel = true;
            }
            // else {
            //   If you dynamically change context menu items, use the following code to update the item states: 
            //   setContextMenuItems(filterMenuItems(contextMenuItems));
            // }
        },
        [filterMenuItems, contextMenuItems]
    };

    return (
        <FileManager 
            onContextMenuShowing={onContextMenuShowing}>
            <ContextMenu items={contextMenuItems}></ContextMenu>
        </FileManager>
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .onContextMenuShowing("fm_contextMenuShowing_handler")
)
<script>
    function fm_contextMenuShowing_handler(e) {
        const contextMenuItems = ['create', 'rename', 'delete'];
        if (e.viewArea === 'itemView'){
            // your code
            e.cancel = true;
        } else {
            // your code
            e.component.option('contextMenu.items', contextMenuItems);
        }
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .onContextMenuShowing("fm_contextMenuShowing_handler")
)
<script>
    function fm_contextMenuShowing_handler(e) {
        const contextMenuItems = ['create', 'rename', 'delete'];
        if (e.viewArea === 'itemView'){
            // your code
            e.cancel = true;
        } else {
            // your code
            e.component.option('contextMenu.items', contextMenuItems);
        }
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onCurrentDirectoryChanged: function(e) {
            // Your code goes here
        }
    });
});

<template>
    <DxFileManager 
        :on-current-directory-changed="onDirectoryChanged" >            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onDirectoryChanged(e) {
                // your code
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onDirectoryChanged = (e) => {
        // your code
    };

    return (
        <FileManager onCurrentDirectoryChanged={onDirectoryChanged}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnCurrentDirectoryChanged("onDirectoryChanged");
    // ...
)

<script>
    function onDirectoryChanged(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnCurrentDirectoryChanged("onDirectoryChanged");
    // ...
)

<script>
    function onDirectoryChanged(e) {
        // your code
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onDirectoryCreated: function(e) {
            if (e.parentDirectory.name === 'Images'){
                // your code
            } 
        }
    });
});

<template>
    <DxFileManager
        :on-directory-created="onDirectoryCreated" >            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onDirectoryCreated(e) {
                if (e.parentDirectory.name === 'Images'){
                    // your code
                } 
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onDirectoryCreated = (e) => {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    };

    return (
        <FileManager onDirectoryCreated={onDirectoryCreated}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnDirectoryCreated("onDirectoryCreated");
    // ...
)

<script>
    function onDirectoryCreated(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnDirectoryCreated("onDirectoryCreated");
    // ...
)

<script>
    function onDirectoryCreated(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onDirectoryCreating: function (e) {
            if (e.parentDirectory.name === 'Images'){
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-directory-creating="onDirectoryCreating"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onDirectoryCreating(e) {
            if (e.parentDirectory.name === 'Images'){
                // your code
                e.cancel = true;
            }                
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onDirectoryCreating = (e) => {
        if (e.parentDirectory.name === 'Images'){
            // your code
            e.cancel = true;
        }           
    };

    return (
        <FileManager ...
            onDirectoryCreating={onDirectoryCreating} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnDirectoryCreating("fm_directoryCreating_handler")
)
<script>
    function fm_directoryCreating_handler(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnDirectoryCreating("fm_directoryCreating_handler")
)
<script>
    function fm_directoryCreating_handler(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onErrorOccurred: function(e) {
            // Your code goes here
        }
    });
});

<template>
    <DxFileManager 
        :on-error-occurred="onError" >            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onError(e) {
                // your code
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onError = (e) => {
        // your code
    };

    return (
        <FileManager onErrorOccurred={onError}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnErrorOccurred("onError");
    // ...
)

<script>
    function onError(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnErrorOccurred("onError");
    // ...
)

<script>
    function onError(e) {
        // your code
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onFileUploaded: function(e) {
            if (e.parentDirectory.name === 'Images'){
                // your code
            } 
        }
    });
});

<template>
    <DxFileManager
        :on-file-uploaded="onFileUploaded" >            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onFileUploaded(e) {
                if (e.parentDirectory.name === 'Images'){
                    // your code
                } 
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onFileUploaded = (e) => {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    };

    return (
        <FileManager onFileUploaded={onFileUploaded}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnFileUploaded("onFileUploaded");
    // ...
)

<script>
    function onFileUploaded(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnFileUploaded("onFileUploaded");
    // ...
)

<script>
    function onFileUploaded(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onFileUploading: function (e) {
            if (e.destinationDirectory === 'Images'){
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-file-uploading="onFileUploading"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onFileUploading(e) {
            if (e.destinationDirectory === 'Images'){
                // your code
                e.cancel = true;
            }                
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onFileUploading = (e) => {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        }           
    };

    return (
        <FileManager ...
            onFileUploading={onFileUploading} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnFileUploading("fm_fileUploading_handler")
)
<script>
    function fm_fileUploading_handler(e) {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnFileUploading("fm_fileUploading_handler")
)
<script>
    function fm_fileUploading_handler(e) {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onFocusedItemChanged: function(e) {
            // Your code goes here
        }
    });
});

<template>
    <DxFileManager 
        :on-focused-item-changed="onFocusedItemChangedEv" >            
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onFocusedItemChangedEv(e) {
                // your code
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onFocusedItemChangedEv = (e) => {
        // your code
    };

    return (
        <FileManager onFocusedItemChanged={onFocusedItemChangedEv}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnFocusedItemChanged("onFocusedItemChangedEv");
    // ...
)

<script>
    function onFocusedItemChangedEv(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnFocusedItemChanged("onFocusedItemChangedEv");
    // ...
)

<script>
    function onFocusedItemChangedEv(e) {
        // your code
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onItemCopied: function(e) {
            if (e.parentDirectory.name === 'Images'){
                // your code
            } 
        }
    });
});

<template>
    <DxFileManager
        :on-item-copied="onItemCopied" >
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onItemCopied(e) {
                if (e.parentDirectory.name === 'Images'){
                    // your code
                } 
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemCopied = (e) => {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    };

    return (
        <FileManager onItemCopied={onItemCopied}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnItemCopied("onItemCopied");
    // ...
)

<script>
    function onItemCopied(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnItemCopied("onItemCopied");
    // ...
)

<script>
    function onItemCopied(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onItemCopying: function (e) {
            if (e.destinationDirectory === 'Images'){
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-item-copying="onItemCopying"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onItemCopying(e) {
            if (e.destinationDirectory === 'Images'){
                // your code
                e.cancel = true;
            }                
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemCopying = (e) => {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        }           
    };

    return (
        <FileManager ...
            onItemCopying={onItemCopying} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemCopying("fm_itemCopying_handler")
)
<script>
    function fm_itemCopying_handler(e) {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemCopying("fm_itemCopying_handler")
)
<script>
    function fm_itemCopying_handler(e) {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onItemDeleted: function(e) {
            // your code
        }
    });
});

<template>
    <DxFileManager
        :on-item-deleted="onItemDeleted" >
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onItemDeleted(e) {
                // your code
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemDeleted = (e) => {
        // your code
    };

    return (
        <FileManager onItemDeleted={onItemDeleted}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnItemDeleted("onItemDeleted");
    // ...
)

<script>
    function onItemDeleted(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnItemDeleted("onItemDeleted");
    // ...
)

<script>
    function onItemDeleted(e) {
        // your code
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onItemDeleting: function (e) {
            // your code
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-item-deleting="onItemDeleting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onItemDeleting(e) {
            // your code
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemDeleting = (e) => {
        // your code
    };

    return (
        <FileManager ...
            onItemDeleting={onItemDeleting} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemDeleting("fm_itemDeleting_handler")
)
<script>
    function fm_itemDeleting_handler(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemDeleting("fm_itemDeleting_handler")
)
<script>
    function fm_itemDeleting_handler(e) {
        // your code
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onItemDownloading: function (e) {
            // your code
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-item-downloading="onItemDownloading"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onItemDownloading(e) {
            // your code
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemDownloading = (e) => {
        // your code
    };

    return (
        <FileManager ...
            onItemDownloading={onItemDownloading} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemDownloading("fm_itemDownloading_handler")
)
<script>
    function fm_itemDownloading_handler(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemDownloading("fm_itemDownloading_handler")
)
<script>
    function fm_itemDownloading_handler(e) {
        // your code
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onItemMoved: function(e) {
            if (e.parentDirectory.name === 'Images'){
                // your code
            } 
        }
    });
});

<template>
    <DxFileManager
        :on-item-moved="onItemMoved" >
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onItemMoved(e) {
                if (e.parentDirectory.name === 'Images'){
                    // your code
                } 
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemMoved = (e) => {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    };

    return (
        <FileManager onItemMoved={onItemMoved}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnItemMoved("onItemMoved");
    // ...
)

<script>
    function onItemMoved(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnItemMoved("onItemMoved");
    // ...
)

<script>
    function onItemMoved(e) {
        if (e.parentDirectory.name === 'Images'){
            // your code
        } 
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onItemMoving: function (e) {
            if (e.destinationDirectory === 'Images'){
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-item-moving="onItemMoving"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onItemMoving(e) {
            if (e.destinationDirectory === 'Images'){
                // your code
                e.cancel = true;
            }                
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemMoving = (e) => {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        }           
    };

    return (
        <FileManager ...
            onItemMoving={onItemMoving} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemMoving("fm_itemMoving_handler")
)
<script>
    function fm_itemMoving_handler(e) {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemMoving("fm_itemMoving_handler")
)
<script>
    function fm_itemMoving_handler(e) {
        if (e.destinationDirectory === 'Images'){
            // your code
            e.cancel = true;
        } 
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onItemRenamed: function(e) {
            if (e.itemName === 'test.png'){
                // your code
            } 
        }
    });
});

<template>
    <DxFileManager
        :on-item-renamed="onItemRenamed" >
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';

    import { 
        DxFileManager
        // ... 
    } from 'devextreme-vue/file-manager';

    export default {
        components: { 
            DxFileManager
            // ... 
        },
        methods: {
            onItemRenamed(e) {
                if (e.itemName === 'test.png'){
                    // your code
                } 
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemRenamed = (e) => {
        if (e.itemName === 'test.png'){
            // your code
        } 
    };

    return (
        <FileManager onItemRenamed={onItemRenamed}>
            <!-- ... -->               
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .OnItemRenamed("onItemRenamed");
    // ...
)

<script>
    function onItemRenamed(e) {
        if (e.itemName === 'test.png'){
            // your code
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnItemRenamed("onItemRenamed");
    // ...
)

<script>
    function onItemRenamed(e) {
        if (e.itemName === 'test.png'){
            // your code
        } 
    }
</script>

$(function() {
    $("#file-manager").dxFileManager({
        // ...
        onItemRenaming: function (e) {
            if (e.newName === 'nature.png'){
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxFileManager
        ...
        @on-item-renaming="onItemRenaming"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        onItemRenaming(e) {
            if (e.newName === 'nature.png'){
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';
import FileManager from 'devextreme-react/file-manager';

const App = () => {
    const onItemRenaming = (e) => {
        if (e.newName === 'nature.png'){
            // your code
            e.cancel = true;
        }
    };

    return (
        <FileManager ...
            onItemRenaming={onItemRenaming} />            
    );
}

export default App;

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemRenaming("fm_itemRenaming_handler")
)
<script>
    function fm_itemRenaming_handler(e) {
        if (e.newName === 'nature.png'){
            // your code
            e.cancel = true;
        } 
    }
</script>

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    // ...
    .OnItemRenaming("fm_itemRenaming_handler")
)
<script>
    function fm_itemRenaming_handler(e) {
        if (e.newName === 'nature.png'){
            // your code
            e.cancel = true;
        } 
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxFileManager ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxFileManager from 'devextreme-vue/file-manager'; 

export default { 
    components: { 
        DxFileManager
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import FileManager from 'devextreme-react/file-manager'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <FileManager ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onSelectedFileOpened: function(e) {
            // Your code goes here
        }
    });
});

<template>
    <DxFileManager ...
        :on-selected-file-opened="fileManager_onSelectedFileOpened"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        fileManager_onSelectedFileOpened(e) {
            // Your code goes here
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    fileManager_onSelectedFileOpened(e) {
        // Your code goes here
    }

    render() {
        return (
            <FileManager ...
                onSelectedFileOpened={this.fileManager_onSelectedFileOpened}
            />
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .OnSelectedFileOpened("fileManager_onSelectedFileOpened");
    // ...
)

<script>
    function fileManager_onSelectedFileOpened(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnSelectedFileOpened("fileManager_onSelectedFileOpened");
    // ...
)

<script>
    function fileManager_onSelectedFileOpened(e) {
        // your code
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onSelectionChanged: function(e) {
            // Your code goes here
        }
    });
});

<template>
    <DxFileManager ...
        :on-selection-changed="fileManager_onSelectionChanged"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        fileManager_onSelectionChanged(e) {
            // Your code goes here
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    fileManager_onSelectionChanged(e) {
        // Your code goes here
    }

    render() {
        return (
            <FileManager ...
                onSelectionChanged={this.fileManager_onSelectionChanged}
            />
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .OnSelectionChanged("fileManager_onSelectionChanged");
    // ...
)

<script>
    function fileManager_onSelectionChanged(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .OnSelectionChanged("fileManager_onSelectionChanged");
    // ...
)

<script>
    function fileManager_onSelectionChanged(e) {
        // your code
    }
</script>

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        onToolbarItemClick: function(e) {
            // Your code goes here
        }
    });
});

<template>
    <DxFileManager ...
        :on-toolbar-item-click="fileManager_onToolbarItemClick"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFileManager from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager
    },
    methods: {
        fileManager_onToolbarItemClick(e) {
            // Your code goes here
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    fileManager_onToolbarItemClick(e) {
        // Your code goes here
    }

    render() {
        return (
            <FileManager ...
                onToolbarItemClick={this.fileManager_onToolbarItemClick}
            />
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .onToolbarItemClick("fileManager_onToolbarItemClick");
    // ...
)

<script>
    function fileManager_onToolbarItemClick(e) {
        // your code
    }
</script>

@(Html.DevExtreme().FileManager()
    .onToolbarItemClick("fileManager_onToolbarItemClick");
    // ...
)

<script>
    function fileManager_onToolbarItemClick(e) {
        // your code
    }
</script>

$(function () {
    $("#file-manager").dxFileManager({
        permissions: {
            create: true,
            copy: true,
            move: true,
            remove: true,
            rename: true
        },
        // ...
    });
});

<template>
    <DxFileManager>   
        <DxPermissions
            :create="true"
            :copy="true"
            :move="true"
            :delete="true"
            :rename="true"
            :upload="true"
            :download="true"
        />
    </DxFileManager>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxFileManager, DxPermissions } from 'devextreme-vue/file-manager';

export default {
    components: {
        DxFileManager,
        DxPermissions
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';
import FileManager, { Permissions } from 'devextreme-react/file-manager';

const App = () => {
    return (
        <FileManager>
            <Permissions
                create={true}
                copy={true}
                move={true}
                delete={true}
                rename={true}
                upload={true}
                download={true}>
            </Permissions>                
        </FileManager>
    );
};

export default App;

@(Html.DevExtreme().FileManager()
    .Permissions(permissions => permissions
        .Create(true)
        .Copy(true)
        .Move(true)
        .Delete(true)
        .Rename(true)
        .Upload(true)
        .Download(true)
    )
    // ...
)

@(Html.DevExtreme().FileManager()
    .Permissions(permissions => permissions
        .Create(true)
        .Copy(true)
        .Move(true)
        .Delete(true)
        .Rename(true)
        .Upload(true)
        .Download(true)
    )
    // ...
)

$(function () {
    $("#file-manager").dxFileManager({
        rootFolderName: "Custom Root Folder"
        // ...
    });
});

<template>
    <DxFileManager
        root-folder-name="Custom Root Folder"
    >   
    </DxFileManager>
</template>

<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                // ...
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    render() {
        return (
            <FileManager 
                rootFolderName="Custom Root Folder" 
            >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .RootFolderName("Custom Root Folder")
    // ...
)

@(Html.DevExtreme().FileManager()
    .RootFolderName("Custom Root Folder")
    // ...
)

$(function() {
    $("#fileManagerContainer").dxFileManager({
        // ...
        selectedItemKeys: ["item1_key", "item2_key", "item3_key"]
    });
});

<template>
    <DxFileManager
        :selected-item-keys="keys" >   
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                keys: ['item1_key', 'item2_key', 'item3_key']
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

const keys = ['item1_key', 'item2_key', 'item3_key']

class App extends React.Component {
    render() {
        return (
            <FileManager selectedItemKeys={keys} >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .SelectedItemKeys(new[] { "item1_key", "item2_key", "item3_key" })
    // ...
)

@(Html.DevExtreme().FileManager()
    .SelectedItemKeys(new[] { "item1_key", "item2_key", "item3_key" })
    // ...
)

$(function () {
    $("#file-manager").dxFileManager({
        selectionMode: "single"
        // ...
    });
});

<template>
    <DxFileManager
        :selection-mode="single" >   
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager
        },
        data() {
            return {
                // ...
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager from 'devextreme-react/file-manager';

class App extends React.Component {
    render() {
        return (
            <FileManager selectionMode={single} >
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .SelectionMode(FileManagerSelectionMode.Single)
    // ...
)

@(Html.DevExtreme().FileManager()
    .SelectionMode(FileManagerSelectionMode.Single)
    // ...
)

$(function () {
    $("#file-manager").dxFileManager({
        toolbar: {
            items: [
                // Specifies a predefined item's name and optional settings
                {
                    name: "create",
                    text: "Create a directory",
                    icon: "newfolder"
                },
                // Specifies a predefined item's name only
                "switchView", "separator"
                //...
            ]
            fileSelectionItems: [
                "copy", "rename"
                //...
            ]
        }
    });
});

<template>
    <DxFileManager>
        <DxToolbar>
            <!-- Specifies a predefined item's name and optional settings -->
            <DxItem name="create" text="Create a directory" icon="newfolder" />
            <!-- Specifies a predefined item's name only -->
            <DxItem name="switchView"/>
            <DxItem name="separator"/>
            <!-- Specifies items that are visible when users select files -->
            <DxFileSelectionItem name="copy"/>
            <DxFileSelectionItem name="rename"/>
        </DxToolbar>        
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager,
        DxToolbar,
        DxItem,
        DxFileSelectionItem
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager,
            DxToolbar,
            DxItem,
            DxFileSelectionItem
        },
        data() {
            return {
                //...
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager, { Toolbar, Item, FileSelectionItem } from 'devextreme-react/file-manager';

class App extends React.Component {
    render() {
        return (
            <FileManager>
                <Toolbar>
                    {/* Specifies a predefined item's name and optional settings */}
                    <Item name="create" text="Create a directory" icon="newfolder" />
                    {/* Specifies a predefined item's name only */}
                    <Item name="switchView" />
                    <Item name="separator" />
                    {/* Specifies items that are visible when users select files */}
                    <FileSelectionItem name="copy" />
                    <FileSelectionItem name="rename" />
                </Toolbar>
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .Toolbar(toolbar => {
        toolbar.Items(items => {
            // Specifies a predefined item's name and optional settings
            items.Add().Name(FileManagerToolbarItem.Create).Text("Create a directory").Icon("newfolder");
            // Specifies a predefined item's name only
            items.Add().Name(FileManagerToolbarItem.SwitchView);
            items.Add().Name(FileManagerToolbarItem.Create);
        });
        // Specifies items that are visible when users select files 
        toolbar.FileSelectionItems(items => {
            items.Add().Name(FileManagerToolbarItem.Copy);
            items.Add().Name(FileManagerToolbarItem.Rename);
        });
    })
)

@(Html.DevExtreme().Gantt()
    .Toolbar(toolbar => {
        toolbar.Items(items => {
            // Specifies a predefined item's name and optional settings
            items.Add().Name(FileManagerToolbarItem.Create).Text("Create a directory").Icon("newfolder");
            // Specifies a predefined item's name only
            items.Add().Name(FileManagerToolbarItem.SwitchView);
            items.Add().Name(FileManagerToolbarItem.Create);
        });
        // Specifies items that are visible when users select files 
        toolbar.FileSelectionItems(items => {
            items.Add().Name(FileManagerToolbarItem.Copy);
            items.Add().Name(FileManagerToolbarItem.Rename);
        });
    })
)

$(function () {
    $("#file-manager").dxFileManager({
        toolbar: {
            items: [
                // Specifies a custom item as a dxMenu UI component
                {
                    widget: "dxMenu",
                    options: {
                        items: [
                            {
                                text: "Create new file",
                                icon: "plus",
                                items: [
                                    {
                                        text: "Text Document",
                                        extension: ".txt"
                                    },
                                    {
                                        text: "RTF Document",
                                        extension: ".rtf"
                                    },
                                    {
                                        text: "Spreadsheet",
                                        extension: ".xls"
                                    }]
                            }
                        ],
                    }
            }]
        },
        onToolbarItemClick: onItemClick
    });
});
function onItemClick(args) {
    // ...
}

<template>
    <DxFileManager>
        <DxToolbar>
            <DxItem
                widget="dxMenu"
                :options="fileMenuOptions"
            />
        </DxToolbar>        
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager,
        DxToolbar,
        DxItem
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager,
            DxToolbar,
            DxItem
        },
        data() {
            return {
                fileMenuOptions: {
                    items: [
                        {
                            text: "Create new file",
                            icon: "plus",
                            items: [
                                {
                                    text: "Text Document",
                                    options: {
                                        extension: ".txt",
                                    }
                                },
                                {
                                    text: "RTF Document",
                                    options: {
                                        extension: ".rtf",
                                    }
                                },
                                {
                                    text: "Spreadsheet",
                                    options: {
                                        extension: ".xls",
                                    }
                                }
                            ]
                        }
                    ],
                onItemClick: this.onItemClick
            };
        },
        methods:{
            onItemClick() {
                // ...
            }
        }
    };
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import FileManager, { Toolbar, Item } from 'devextreme-react/file-manager';    

const App = () => {
    const fileMenuOptions = {
        items: [
            {
                text: 'Create new file',
                icon: 'plus',
                items: [
                    {
                        text: 'Text Document',
                        extension: '.txt'
                    },
                    {
                        text: 'RTF Document',
                        extension: '.rtf'
                    },
                    {
                        text: 'Spreadsheet',
                        extension: '.xls'
                    }
                ]
            }
        ],
        onItemClick: 'onItemClick'
    };

    const onItemClick = (e) => {
        // ...
    };        

    return (
        <FileManager>
            <Toolbar>
                <Item widget="dxMenu" options={this.fileMenuOptions} />
            </Toolbar>
        </FileManager>
    );
};

export default App;

$(function () {
    $("#file-manager").dxFileManager({
        upload: {
            chunkSize: 500000,
            maxFileSize: 1000000
        },
        // ...
    });
});

<template>
    <DxFileManager>   
        <DxUpload 
            :chunk-size="500000"
            :max-file-size="1000000"
            />
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager,
        DxUpload
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager,
            DxUpload
        },
        data() {
            return {
                //...
            };
        }            
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileManager, { Upload } from 'devextreme-react/file-manager';

class App extends React.Component {
    render() {
        return (
            <FileManager>
                <Upload 
                    chunkSize={500000} 
                    maxFileSize={1000000}
                />
            </FileManager>
        );
    }
}
export default App;

@(Html.DevExtreme().FileManager()
    .Upload(up => up
        .ChunkSize(500000)
        .MaxFileSize(1000000)
    )
    // ...
)

@(Html.DevExtreme().FileManager()
    .Upload(up => up
        .ChunkSize(500000)
        .MaxFileSize(1000000)
    )
    // ...
)