ejFileExplorer

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