ejFileExplorer

20 Aug 201824 minutes to read

FileExplorer provides a Windows Explorer-like functionality for any web application. It allows end-users to browse, select and upload files or change the folder structure by renaming, moving and deleting files or folders. File and folder management capabilities are fully customizable and can be disabled when necessary.

Syntax

HTML

<ej-fileexplorer id="fileExplorer"></ej-fileexplorer>

Name	Type	Description
options	object	settings for FileExplorer.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

Requires

• module:jQuery

• module:jsrender.min.js

• module:ej.core.js

• module:ej.data.js

• module:ej.globalize.js

• module:ej.scroller.js

• module:ej.draggable.js

• module:ej.button.js

• module:ej.treeview.js

• module:ej.uploadbox.js

• module:ej.waitingpopup.js

• module:ej.dialog.js

• module:ej.splitter.js

• module:ej.toolbar.js

• module:ej.tooltip.js

• module:ej.menu.js

• module:ej.fileexplorer.js

• module:ej.checkbox.js

• module:ej.splitbutton.js

• module:ej.grid.edit.js

• module:ej.grid.filter.js

• module:ej.grid.selection.js

• module:ej.gridresize.js

• module:ej.grid.sort.js

• module:ej.grid.dragAndDrop.js

• module:ej.grid.common.js

• module:ej.grid.base.js

Members

ajaxAction string

Sets the URL of server side AJAX handling method that handles file operation like Read, Remove, Rename, Create, Upload, Download, Copy and Move in FileExplorer.

Default Value

• ””

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

ajaxDataType string

Specifies the data type of server side AJAX handling method.

Default Value

• “json”

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" ajaxDataType="jsonp" style="display:block">
</ej-fileexplorer>

ajaxSettings object

By using ajaxSettings property, you can customize the AJAX configurations. Normally you can customize the following option in AJAX handling data, URL, type, async, contentType, dataType and success. For upload, download and getImage API, you can only customize URL.

Default Value

• { read: {}, createFolder: {}, remove: {}, rename: {}, paste: {}, getDetails: {}, download: {}, upload: {}, getImage: {}, search: {}}

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [ajaxSettings]="ajaxSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    ajaxSettings: Object;
    constructor() {
        let ajaxJSONPActionHandler = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperationsCors";
        this.ajaxSettings={
            read: {
                url: ajaxJSONPActionHandler,
                dataType: "jsonp"
            }
        };
    }
 }

allowDragAndDrop boolean

The FileExplorer allows to move the files from one folder to another folder of FileExplorer by using drag and drop option. Also it supports to upload a file by dragging it from windows explorer to the necessary folder of ejFileExplorer.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" 
        ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [allowDragAndDrop]="false" style="display:block">
</ej-fileexplorer>

allowKeyboardNavigation boolean

Gets or sets a value that indicates whether to enable keyboard support for FileExplorer actions.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" 
        ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [allowKeyboardNavigation]="false" style="display:block">
</ej-fileexplorer>

allowMultiSelection boolean

The FileExplorer allows to select multiple files by enabling the allowMultiSelection property. You can perform multi selection by pressing the Ctrl key or Shift key.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" 
        ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [allowMultiSelection]="false" style="display:block">
</ej-fileexplorer>

contextMenuSettings object

By using the contextMenuSettings property, you can customize the ContextMenu in the FileExplorer control.

contextMenuSettings.items object

The items property is used to configure and group the required ContextMenu items in FileExplorer control.

Default Value

JAVASCRIPT

{
        navbar: ["NewFolder", "Upload", "|", "Delete", "Rename", "|", "Cut", "Copy", "Paste", "|", "Getinfo"],
        cwd: ["Refresh", "Paste","|", "SortBy", "|", "NewFolder", "Upload", "|", "Getinfo"],
        files: ["Open", "Download", "|", "Upload", "|", "Delete", "Rename", "|", "Cut", "Copy", "Paste", "|", "OpenFolderLocation", "Getinfo"]
        }

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [contextMenuSettings]="contextMenuSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    contextMenuSettings: Object;
    constructor() {
        this.contextMenuSettings = {
                    // define the ContextMenu items
                    items: {
                        // removed the 'NewFolder' item from NavigationPane ContextMenu
                        navbar: ['Upload', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'Getinfo'],
                        // added the custom ContextMenu item (View) to Current working directory ContextMenu
                        cwd: ['Refresh', 'Paste', '|', 'SortBy', 'View', '|', 'NewFolder', 'Upload', '|', 'Getinfo'],
                        // removed 'Upload' item from Selected files/ folder's ContextMenu
                        files: ['Open', 'Download', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|',
                            'OpenFolderLocation', 'Getinfo']
                    }
        };
      }
 }

contextMenuSettings.customMenuFields array

The customMenuFields property is used to define custom functionality for custom ContextMenu item’s which are defined in items property.

Default Value

• []

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [contextMenuSettings]="contextMenuSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    contextMenuSettings: Object;
    constructor() {
        this.contextMenuSettings = {
                    // define the ContextMenu items
                    items: {
                        // removed the 'NewFolder' item from NavigationPane ContextMenu
                        navbar: ['Upload', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'Getinfo'],
                        // added the custom ContextMenu item (View) to Current working directory ContextMenu
                        cwd: ['Refresh', 'Paste', '|', 'SortBy', 'View', '|', 'NewFolder', 'Upload', '|', 'Getinfo'],
                        // removed 'Upload' item from Selected files/ folder's ContextMenu
                        files: ['Open', 'Download', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|',
                            'OpenFolderLocation', 'Getinfo']
                    },
                    // added the custom ContextMenu item's (View) functionality
                    customMenuFields: [
                    {
                        id: 'View',
                        text: 'View by',
                        spriteCssClass: 'custom-grid',
                        child: [
                        {
                            id: 'tile',
                            text: 'Tile view',
                            action: function (event) {
                                 let fileExplorerObj = $('#fileExplorer4').data('ejFileExplorer');
                                 fileExplorerObj.option('layout', event.ID);
                            }
                        },
                        {
                            id: 'grid',
                            text: 'Grid view',
                           action: function (event) {
                                 let fileExplorerObj = $('#fileExplorer4').data('ejFileExplorer');
                                 fileExplorerObj.option('layout', event.ID);
                            }
                        },
                        {
                            id: 'LargeIcons',
                            text: 'Large icons view',
                           action: function (event) {
                                 let fileExplorerObj = $('#fileExplorer4').data('ejFileExplorer');
                                 fileExplorerObj.option('layout', event.ID);
                            }
                        }, ]
                    }, ]
        };
    }
 }

cssClass string

Sets the root class for FileExplorer theme. This cssClass API allows to use custom skinning option for File Explorer control. By defining the root class by using this API, you have to include this root class in CSS.

Default Value

• ””

  Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [cssClass]="customCss" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  customCss:string;     
  constructor() {
          this.customCss = "gradient-lime";
  }
}

enablePersistence boolean

Specify the enablePersistence to FileExplorer to save the current model value in browser cookies for state maintains.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [enablePersistence]="true" style="display:block">
</ej-fileexplorer>

enableResize boolean

Enables or disables the resize support in FileExplorer control.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [enableResize]="true" style="display:block">
</ej-fileexplorer>

enableRTL boolean

Enables or disables the Right to Left alignment support in FileExplorer control.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [enableRTL]="true" style="display:block">
</ej-fileexplorer>

enableThumbnailCompress boolean

Enables or disables the thumbnail image compression option in FileExplorer control. By enabling this option, you can reduce the thumbnail image size while loading.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [enableThumbnailCompress]="true" style="display:block">
</ej-fileexplorer>

fileTypes string

Allows specified type of files only to display in FileExplorer control.

Default Value

• ”* . *”

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [fileTypes]="*.png,*.gif,*.jpg,*.jpeg,*.docx" style="display:block">
</ej-fileexplorer>

filterSettings object

By using filterSettings property, you can customize the search functionality of the search bar in FileExplorer control.

filterSettings.allowSearchOnTyping boolean

It allows to search the text given in search Textbox in every keyup event. When this property was set as false, searching will works only on Enter key and searchbar blur.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [filterSettings]="filterSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  filterSettings: Object;     
  constructor() {
          this.filterSettings = {allowSearchOnTyping: false};
  }
}

filterSettings.caseSensitiveSearch boolean

Enables or disables to perform the filter operation with case sensitive.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [filterSettings]="filterSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  filterSettings: Object;     
  constructor() {
          this.filterSettings = {caseSensitiveSearch: false};
  }
}

filterSettings.filterType enum

Sets the search filter type. There are several filter types available such as “startswith”, “contains”, “endswith”. See filterType.

</tr>

Name	Type	Default	Description
StartsWith	string	startswith	Enum for filter type startswith
Contains	string	contains	Enum for filter type contains
EndsWith	string	endswith	Enum for filter type endswith

Default Value

• ej.FileExplorer.filterType.Contains

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [filterSettings]="filterSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  filterSettings: Object;     
  constructor() {
          this.filterSettings = {filterType: "startswith"};
  }
}

gridSettings object

By using the gridSettings property, you can customize the grid behavior in the FileExplorer control.

gridSettings.allowResizing boolean

Allows to Resize the width of the columns by simply click and move the particular column header line.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [gridSettings]="gridSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  gridSettings: Object;     
  constructor() {
          this.gridSettings = {allowResizing:false};
  }
}

gridSettings.allowSorting boolean

Gets or sets a value that indicates whether to enable the dynamic sorting behavior on grid data. Sorting can be done through clicking on particular column header.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [gridSettings]="gridSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  gridSettings: Object;     
  constructor() {
          this.gridSettings = {allowSorting:false};
  }
}

gridSettings.columns array

Gets or sets an object that indicates to render the grid with specified columns. You can use this property same as the column property in Grid control.

Default Value

• [{ field: “name”, headerText: “Name”, width: “30%” }, { field: “dateModified”, headerText: “Date Modified”, width: “30%” }, { field: “type”, headerText: “Type”, width: “15%” }, { field: “size”, headerText: “Size”, width: “12%”, textAlign: “right”, headerTextAlign: “left” }]

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [gridSettings]="gridSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  gridSettings: Object;     
  constructor() {
          this.gridSettings = {columns:[{ field: "name", headerText: "Name", width: 90 }, { field: "type", headerText: "Type", width: 95 }, { field: "size", headerText: "Size", width: 90 }]};
  }
}

height string | number

Specifies the height of FileExplorer control.

Default Value

• 400

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [height]="height" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
  height: string;     
  constructor() {
          this.height = "450px";
  }
}

isResponsive boolean

Enables or disables the responsive support for FileExplorer control during the window resizing time.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [height]="height" [width]="width" [isResponsive]="true" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   height:string;
   width:string;
   constructor(){
       this.height="50%";
       this.width="70%";
  }
}

layout enum

Sets the file view type. There are three view types available such as Grid, Tile and Large icons. See layoutType.

Name	Description
Tile	Supports to display files in tile view
Grid	Supports to display files in grid view
LargeIcons	Supports to display files as large icons

Default Value

• ej.FileExplorer.layoutType.Grid

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [layout]="layout" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   layout:any;
   constructor(){
       this.layout="tile";
  }
}

locale string

Sets the culture in FileExplorer.

Default Value

• “en-US”

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [locale]="locale" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   locale: string;
   constructor(){
       this.locale="en-US";
  }
}

maxHeight string | number

Sets the maximum height of FileExplorer control.

Default Value

• null

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [maxHeight]="maxHeight" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   maxHeight: number;
   constructor(){
       this.maxHeight=500;
  }
}

maxWidth string | number

Sets the maximum width of FileExplorer control.

Default Value

• null

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [maxWidth]="maxWidth" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   maxWidth: number;
   constructor(){
       this.maxWidth=1000;
  }
}

minHeight string | number

Sets the minimum height of FileExplorer control.

Default Value

• “250px”

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [minHeight]="minHeight" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   minHeight: number;
   constructor(){
       this.maxWidth=300;
  }
}

minWidth string | number

Sets the minimum width of FileExplorer control.

Default Value

• “400px”

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [minWidth]="minWidth" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   minWidth: number;
   constructor(){
       this.maxWidth=300;
  }
}

path string

The property path denotes the filesystem path that are to be explored. The path for the filesystem can be physical path or relative path, but it has to be relevant to where the Web API is hosted.

Default Value

• ””

  Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    style="display:block">
</ej-fileexplorer>

rootFolderName string

Sets the alias name of root folder name in FileExplorer. It is used to replace the actual root folder name in FileExplorer.

Default Value

• ””

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [rootFolderName]="rootFolderName" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   rootFolderName: string;
   constructor(){
       this.rootFolderName="This PC"; // The name to replace your actual root folder name(FileBrowser).
  }
}

selectedFolder string

The selectedFolder is used to select the specified folder of FileExplorer control.

Default Value

• ””

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [selectedFolder]="selectedFolder" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   selectedFolder: string;
   constructor(){
       this.selectedFolder="http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/Food";
  }
}

selectedItems string | array

The selectedItems is used to select the specified items (file, folder) of FileExplorer control.

Default Value

• ””

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [selectedItems]="selectedItems" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
   selectedItems: String[];
   constructor(){
       this.selectedItems= ["Food", "Nature"];
  }
}

showCheckbox boolean

Enables or disables the checkbox option in FileExplorer control.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showCheckbox]="false" style="display:block">
</ej-fileexplorer>

showContextMenu boolean

Enables or disables the context menu option in FileExplorer control.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showContextMenu]="false" style="display:block">
</ej-fileexplorer>

showFooter boolean

Enables or disables the footer in FileExplorer control. The footer element displays the details of the current selected files and folders. And also the footer having the switcher to change the layout view.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showFooter]="false" style="display:block">
</ej-fileexplorer>

showRoundedCorner boolean

FileExplorer control is displayed with rounded corner when this property is set to true.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showRoundedCorner]="true" style="display:block">
</ej-fileexplorer>

showThumbnail boolean

FileExplorer control is rendered with thumbnail preview of images in Tile and LargeIcons layout when this property set to true.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showThumbnail]="false" style="display:block">
</ej-fileexplorer>

showToolbar boolean

Shows or disables the toolbar in FileExplorer control.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showToolbar]="false" style="display:block">
</ej-fileexplorer>

showNavigationPane boolean

Enables or disables the navigation pane in FileExplorer control. The navigation pane contains a tree view element that displays all the folders from the filesystem in a hierarchical manner. This is useful to a quick navigation of any folder in the filesystem.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" 
    [showNavigationPane]="false" style="display:block">
</ej-fileexplorer>

tools object

The tools property is used to configure and group required toolbar items in FileExplorer control.

Default Value

• { creation: [“NewFolder”], navigation: [“Back”, “Forward”, “Upward”], addressBar: [“Addressbar”], editing: [“Refresh”, “Upload”, “Delete”, “Rename”, “Download”], copyPaste: [“Cut”, “Copy”, “Paste”], getProperties: [“Details”], searchBar: [“Searchbar”], layout: [“Layout”], sortBy: [“SortBy”]}

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [tools]="tools" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    tools: Object;
    constructor() {
    // defines the tool items for customTool category 
    this.tools= {
        customTool: [{
            creation:["NewFolder", "Open"],
            navigation: ["Back", "Forward", "Upward"],
            addressBar: ["Addressbar"],
            editing: ["Refresh", "Upload", "Delete", "Rename", "Download"],
            copyPaste: ["Cut", "Copy", "Paste"],
            getProperties: ["Details"],
            searchBar: ["Searchbar"]
        }]
    };
    }
}

toolsList array

The toolsList property is used to arrange the toolbar items in the FileExplorer control.

Default Value

• [“layout”, “creation”, “navigation”, “addressBar”, “editing”, “copyPaste”, “sortBy”, “getProperties”, “searchBar”]

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [toolsList]="toolsList" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    toolsList: Object;
    constructor() {
    // defines the tool items for customTool category 
    this.toolsList= ["navigation", "creation", "addressBar", "editing", "copyPaste", "getProperties", "searchBar"];
    }
}

uploadSettings object

Gets or sets an object that indicates whether to customize the upload behavior in the FileExplorer.

uploadSettings.maxFileSize number

Specifies the maximum file size allowed to upload. It accepts the value in bytes.

Default Value

• 31457280

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [uploadSettings]="uploadSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    uploadSettings: Object;
    constructor() {
    // defines the tool items for customTool category 
    this.uploadSettings= {maxFileSize:10000};
    }
}

uploadSettings.allowMultipleFile boolean

Enables or disables the multiple files upload. When it is enabled, you can upload multiple files at a time and when disabled, you can upload only one file at a time.

Default Value

• true

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [uploadSettings]="uploadSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    uploadSettings: Object;
    constructor() {
    // defines the tool items for customTool category 
    this.uploadSettings= {allowMultipleFile:false};
    }
}

uploadSettings.autoUpload boolean

Enables or disables the auto upload option while uploading files in FileExplorer control.

Default Value

• false

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [uploadSettings]="uploadSettings" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    uploadSettings: Object;
    constructor() {
    // defines the tool items for customTool category 
    this.uploadSettings= {autoUpload:true};
    }
}

width string | number

Specifies the width of FileExplorer control.

Default Value

• 850

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [width]="width" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
    width: number;
    constructor() {
    // defines the tool items for customTool category 
    this.width= 800;
    }
}

Methods

adjustSize()

Refresh the size of FileExplorer control.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.adjustSize(); // refresh the size of file explorer

disableMenuItem(item)

Disable the particular context menu item.

Name	Type	Description
item	string | element	Id of the menu item/ Menu element to be disabled

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.disableMenuItem("Upload"); // disable upload option

disableToolbarItem(item)

Disable the particular toolbar item.

Name	Type	Description
item	string | element	Id of the toolbar item/ Tool item element to be disabled

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.disableToolbarItem("Searchbar"); // disable search bar

enableMenuItem(item)

Enable the particular context menu item.

Name	Type	Description
item	string | Element	Id of the menu item/ Menu element to be Enabled

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.enableMenuItem("Upload"); // enable upload option in context menu

enableToolbarItem(item)

Enable the particular toolbar item

Name	Type	Description
item	string | Element	Id of the tool item/ Tool item element to be Enabled

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.enableToolbarItem("Searchbar"); // enable search bar

refresh()

Refresh the content of the selected folder in FileExplorer control.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.refresh(); // refresh the content of selected folder

removeToolbarItem(item)

Remove the particular toolbar item.

Name	Type	Description
item	string | Element	Id of the tool item/ tool item element to be removed

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" style="display:block">
</ej-fileexplorer>

TS

// Create FileExplorer instance
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
fileExplorerObj.removeToolbarItem("Searchbar"); // remove search bar

Events

beforeAjaxRequest

Fires before the AJAX request is performed.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. data object returns the AJAX request data model object returns the FileExplorer model type string returns the name of the event

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeAjaxRequest)="onBeforeAjaxRequest($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onBeforeAjaxRequest(e: any){
            // Your code here
        }

 }

beforeDownload

Fires before downloading the files.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. files string[] returns the downloaded file names. model object returns the FileExplorer model. path string returns the path of currently opened item. selectedItems object returns the selected item details. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeDownload)="onBeforeDownload($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onBeforeDownload(e: any){
            // Your code here
        }

 }

beforeGetImage

Fires before getting a requested image from server. Also this event will be triggered when you have enabled thumbnail image compression option in FileExplorer.
Using this event, you can customize the image compression size.

Name	Type	Description
path	String	Image path Name Type Description cancel boolean set to true when the event has to be canceled, else false. canCompress boolean enable or disable the image compress option. model object returns the FileExplorer model. size object returns the expected image size. selectedItems object returns the selected item details. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeGetImage)="onBeforeGetImage($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onBeforeGetImage(e: any){
            // Your code here
        }

 }

beforeOpen

Fires before files or folders open.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. itemType string returns the opened item type. model object returns the FileExplorer model. path string returns the path of currently opened item. selectedItems object returns the selected item details. type string returns the name of the event.

</tr>
</tbody>
</table>

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeOpen)="onBeforeOpen($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onBeforeOpen(e: any){
            // Your code here
        }

 }

beforeUpload

Fires before uploading the files.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. model object returns the FileExplorer model. path string returns the path of currently opened item. selectedItems object returns the selected item details. uploadItemDetails object returns the upload item details. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeUpload)="onBeforeUpload($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onBeforeUpload(e: any){
            // Your code here
        }

 }

create

Fires when FileExplorer control was created

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (create)="onCreate($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onCreate(e: any){
            // Your code here
        }

 }

copy

Fires when file or folder is copied successfully.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. model object returns the FileExplorer model. name string[] returns the name of copied file/folder. selectedItems object returns the selected item details. sourcePath string returns the source path. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (copy)="onCopy($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onCopy(e: any){
            // Your code here
        }

 }

createFolder

Fires when new folder is created successfully in file system.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. data object returns the AJAX response data model object returns the FileExplorer model selectedItems object returns the selected item details type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (createFolder)="onCreateFolder($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onCreateFolder(e: any){
            // Your code here
        }

 }

cut

Fires when file or folder is cut successfully.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. model object returns the FileExplorer model. name string[] returns the name of moved file or folder. selectedItems object returns the selected item details. sourcePath string returns the source path. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (cut)="onCut($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onCut(e: any){
            // Your code here
        }

 }

destroy

Fires when the FileExplorer is destroyed successfully.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (destroy)="onDestroy($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onDestroy(e: any){
            // Your code here
        }

 }

dragStart

Fires when the files or directory has been started to drag over on the FileExplorer

Name	Type	Description
cancel	boolean	set to true when the event has to be canceled, else false.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.
target	object	returns the dragging element.
targetPath	string	returns the path of dragging element.
selectedItems	object	returns the dragging file details.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (dragStart)="onDragStart($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onDragStart(e: any){
            // Your code here
        }

 }

drag

Fires when the files or directory is dragging over on the FileExplorer.

Name	Type	Description
cancel	boolean	set to true when the event has to be canceled, else false.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.
target	object	returns the target element.
targetElementName	string	returns the name of target element.
targetPath	string	returns the path of target element.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (drag)="onDrag($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onDrag(e: any){
            // Your code here
        }

 }

dragStop

Fires when the files or directory has been stopped to drag over on FileExplorer

Name	Type	Description
cancel	boolean	set to true when the event has to be canceled, else false.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.
target	object	returns the target element.
targetPath	string	returns the path of target element.
targetElementName	string	returns the name of target element
dropAction	string	returns the action, which is performed after dropping the files (upload/ move).
fileInfo	object	returns the dragging file details

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (dragStop)="onDragStop($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onDragStop(e: any){
            // Your code here
        }

 }

drop

Fires when the files or directory is dropped to the target folder of FileExplorer

Name	Type	Description
cancel	boolean	set to true when the event has to be canceled, else false.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.
target	object	returns the target element.
targetFolder	string	returns the name of target folder.
targetPath	string	returns the path of target folder.
fileInfo	object	returns the dragging element details.
dropAction	string	returns the action, which is performed after dropping the files (upload/ move).

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (drop)="onDrop($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onDrop(e: any){
            // Your code here
        }

 }

getImage

Fires after loading the requested image from server. Using this event, you can get the details of loaded image.

Name	Type	Description
cancel	boolean	set to true when the event has to be canceled, else false.
path	string	loaded image path.
element	object	loaded image element
model	object	returns the FileExplorer model.
originalArgs	object	original arguments of image load or error event
action	string	returns the action type, which specifies thumbnail preview or opening image.
type	string	returns the name of the event.

</td>
</tr>
</tbody>
</table>

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (getImage)="onGetImage($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onGetImage(e: any){
            // Your code here
        }

 }

keydown

Fires when keydown in FileExplorer control.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
keyCode	number	returns the downed key keyCode value
altKey	boolean	returns altKey value.
shiftKey	boolean	returns shiftKey value.
ctrlKey	boolean	returns ctrlKey value.
originalArgs	object	returns the event object.
model	object	returns the FileExplorer model.
type	string	returns the name of the event.

</td>
</tr>
</tbody>
</table>

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (keydown)="onKeydown($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onKeydown(e: any){
            // Your code here
        }

 }

layoutChange

Fires when the file view type is changed.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. isInteraction boolean return true when we change the layout via interaction, else false. layoutType string returns the current view type. model object returns the FileExplorer model. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (layoutChange)="onLayoutChange($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onLayoutChange(e: any){
            // Your code here
        }

 }

menuBeforeOpen

Fires when before the ContextMenu opening.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean set to true when the event has to be canceled, else false. contextMenu string returns the name of ContextMenu items group. dataSource array returns the dataSource of ContextMenu. element object returns the element of ContextMenu. events object returns the event of ContextMenu. model object returns the FileExplorer model. target object returns the target element. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (menuBeforeOpen)="menuBeforeOpen($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        menuBeforeOpen(e: any){
            // Your code here
        }

 }

menuClick

Fires when click the ContextMenu item.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description ID string returns the ID of clicked ContextMenu item. cancel boolean set to true when the event has to be canceled, else false. contextMenu string returns the name of ContextMenu items group. element object returns the element of clicked ContextMenu item. event object returns the event of ContextMenu. model object returns the FileExplorer model. parentId string returns the parent element ID of clicked ContextMenu item. parentText string returns the parent element text of clicked ContextMenu item. text string returns the text of clicked ContextMenu item. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (menuClick)="onMenuClick($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onMenuClick(e: any){
            // Your code here
        }

 }

menuOpen

Fires when ContextMenu is successfully opened.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean set to true when the event has to be canceled, else false. contextMenu string returns the name of ContextMenu items group. element object returns the element of ContextMenu. model object returns the FileExplorer model. target object returns the target element. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (menuOpen)="onMenuOpen($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onMenuOpen(e: any){
            // Your code here
        }

 }

open

Fires when files are successfully opened.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. itemType string returns the opened item type. model object returns the FileExplorer model. path string returns the path of currently opened item. selectedItems object returns the selected item details. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (open)="onOpen($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onOpen(e: any){
            // Your code here
        }

 }

paste

Fires when a file or folder is pasted successfully.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. model object returns the FileExplorer model. name string[] returns the name of moved/copied file or folder. selectedItems object returns the selected item details. targetFolder object returns the target folder item details. targetPath string returns the target path. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (paste)="onPaste($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onPaste(e: any){
            // Your code here
        }

 }

remove

Fires when file or folder is deleted successfully.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. data object returns the AJAX response data. model object returns the FileExplorer model. name string returns the names of deleted items. path string returns the path of deleted item. selectedItems object returns the removed item details. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (remove)="onRemove($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onRemove(e: any){
            // Your code here
        }

 }

resize

Fires when resizing is performed for FileExplorer.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean if the event should be canceled; otherwise, false. event object returns the mouse move event args. model object returns the FileExplorer model. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (resize)="onResize($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onResize(e: any){
            // Your code here
        }

 }

resizeStart

Fires when resizing is started for FileExplorer.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. event object returns the mouse down event args. model object returns the FileExplorer model. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (resizeStart)="onResizeStart($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onResizeStart(e: any){
            // Your code here
        }

 }

resizeStop

Fires this event when the resizing is stopped for FileExplorer.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. event object returns the mouse leave event args. model object returns the FileExplorer model. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (resizeStop)="onResizeStop($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onResizeStop(e: any){
            // Your code here
        }

 }

select

Fires when the items from grid view or tile view of FileExplorer control is selected.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. model object returns the FileExplorer model. name string[] returns the name of selected items. path string returns the path of selected items. names string[] returns the name of selected items. selectedItems object returns the selected item details type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (select)="onSelect($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onSelect(e: any){
            // Your code here
        }

 }

templateRefresh

Triggered when refresh the template column elements in the grid view of FileExplorer control.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description cancel boolean Set to true when the event has to be canceled, else false. cell object Returns the cell object. column object Returns the column object. data object Returns the current row data. model object Returns the grid model of FileExplorer. rowIndex number Returns the current row index. type string returns the name of the event.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (templateRefresh)="onTemplateRefresh($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onTemplateRefresh(e: any){
            // Your code here
        }

 }

unselect

Fires when the items from grid view or tile view or large icons view of FileExplorer control is unselected.

Name	Type	Description
argument	Object	Event parameters from FileExplorer Name Type Description model object Returns the FileExplorer model. name string Returns the name of unselected item. names string[] Returns the name of unselected items. nodeType string Returns the type of unselected item. path string Returns the path of unselected item. type string Returns the name of the event. unselectedItem object Returns the unselected item details. unselectedItems array Returns the unselected items details.

Example

HTML

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/"
    ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (unselect)="onUnselect($event)" style="display:block">
</ej-fileexplorer>

TS

export class AppComponent { 
        constructor(){
        }
        onUnselect(e: any){
            // Your code here
        }

 }