JavaScript/jQuery FileManager - toolbar.fileSelectionItems
jQuery
$(function () {
$("#file-manager").dxFileManager({
toolbar: {
fileSelectionItems: [
"move", "copy", "rename",
{
widget: "dxButton",
options: {
text: "Share",
icon: "arrowright"
},
location: "before",
onClick: shareItem
},
// ...
"separator", "delete", "refresh", "clear"
]
}
});
});icon
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
location
Whatever template you use for UI component items (default or a custom) will be located according to the value specified for the location field in the item data source object.
See Also
name
options
Angular
options should contain the properties of the DevExtreme UI component specified in the widget property. Because of this dependency, options cannot be typed and are not implemented as nested configuration components. Specify options with an object.
<dx-file-manager ... >
<dxo-toolbar>
<dxi-file-selection-item
widget="dxCheckBox"
[options]="{ text: 'Show IDs' }">
</dxi-file-selection-item>
</dxo-toolbar>
</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
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
options should contain the properties of the DevExtreme UI component specified in the widget property. Because of this dependency, options cannot be typed and are not implemented as nested configuration components. Specify options with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
<template>
<DxFileManager ... >
<DxToolbar>
<DxFileSelectionItem
widget="dxCheckBox"
:options="checkBoxOptions"
/>
</DxToolbar>
</DxFileManager>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxFileManager, {
DxToolbar,
DxFileSelectionItem
} from 'devextreme-vue/file-manager';
export default {
components: {
DxFileManager,
DxToolbar,
DxFileSelectionItem
},
data() {
return {
checkBoxOptions: { text: 'Show IDs' }
}
}
}
</script>React
options should contain the properties of the DevExtreme UI component specified in the widget property. Because of this dependency, options cannot be typed and are not implemented as nested configuration components. Specify options with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import FileManager, {
Toolbar,
FileSelectionItem
} from 'devextreme-react/file-manager';
class App extends React.Component {
checkBoxOptions = { text: 'Show IDs' };
render() {
return (
<FileManager ... >
<Toolbar>
<FileSelectionItem
widget="dxCheckBox"
options={this.checkBoxOptions}
/>
</Toolbar>
</FileManager>
);
}
}
export default App;widget
A UI component that presents a toolbar item. To configure it, use the options object.
Import the specified UI component's module when using DevExtreme modules.
You can specify the widget option for custom toolbar items only.