ejFileExplorer

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

JAVASCRIPT

$(element).ejFileExplorer(options)

Name	Type	Description
options	object	settings for FileExplorer.

Example

HTML

<div id="fileExplorer"></div> 
 
<script>
// Create FileExplorer
$('#fileExplorer').ejFileExplorer({ 
path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",
});
</script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with ajaxAction value specified.
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

ajaxDataType string

Specifies the data type of server side AJAX handling method.

Default Value

• “json”

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with ajaxDataType value specified.
        $('#fileExplorer').ejFileExplorer({
        ajaxDataType: "jsonp",            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with ajaxSettings value specified.
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        ajaxSettings: {
            read: {
                url: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",
                dataType: "jsonp"
            }
        }
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with allowDragAndDrop value specified.
        $('#fileExplorer').ejFileExplorer({
        allowDragAndDrop: false,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

allowKeyboardNavigation boolean

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

Default Value

• true

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with allowKeyboardNavigation value specified.
        $('#fileExplorer').ejFileExplorer({
        allowKeyboardNavigation: false,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with allowMultiSelection value specified.
        $('#fileExplorer').ejFileExplorer({
        allowMultiSelection: false,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the items value specified.
        $('#fileExplorer').ejFileExplorer({ 
        contextMenuSettings:{
                //define the ContextMenu items
                items:{
                        // removed the "NewFolder" item from NavigationPane ContextMenu
                        navbar: ["Upload", "|", "Delete", "Rename", "|", "Cut", "Copy", "Paste", "|", "Getinfo"],
                        // added the custom menu item (View) to Current working directory ContextMenu
                        cwd: ["Refresh", "Paste","|", "SortBy", "|", "NewFolder", "Upload", "|", "Getinfo", "View"],
                        // removed "Upload" item from Selected files/ folder's ContextMenu
                        files: ["Open", "Download", "|", "Delete", "Rename", "|", "Cut", "Copy", "Paste", "|", "OpenFolderLocation", "Getinfo"]
                },
        },
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        }); 
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the customMenuFields value specified.
        $('#fileExplorer').ejFileExplorer({ 
        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", "|", "NewFolder", "Upload", "|", "Getinfo", "View"],
                        // 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",
                        child: [
                        {
                                id: "Tile",
                                text: "Tile view",
                                action: "onLayout"
                        },
                        {
                                id: "Grid",
                                text: "Grid view",
                                action: "onLayout"
                        },
                        {
                                id: "LargeIcons",
                                text: "Large icons view",
                                action: "onLayout"
                        },]
                },]
        },
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        });
        
        //define the action for custom ContextMenu item
        function onLayout(args) {
                var fileExplorerObj = $('#fileExplorer').data("ejFileExplorer");
                fileExplorerObj.option("layout", args.ID);
        }
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with cssClass value specified.
        $('#fileExplorer').ejFileExplorer({ 
        cssClass: 'gradient-lime',
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"      
        });
        </script>

enablePersistence boolean

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

Default Value

• false

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with enablePersistence value specified.
        $('#fileExplorer').ejFileExplorer({ 
        enablePersistence: true,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                   
        });
        </script>

enableResize boolean

Enables or disables the resize support in FileExplorer control.

Default Value

• false

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with enableResize value specified.
        $('#fileExplorer').ejFileExplorer({ 
        enableResize: true,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                   
        });
        </script>

enableRTL boolean

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

Default Value

• false

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with enableRTL value specified.
        $('#fileExplorer').ejFileExplorer({ 
        enableRTL: true,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with enableThumbnailCompress value specified.
        $('#fileExplorer').ejFileExplorer({ 
        enableThumbnailCompress: true,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        });
        </script>

fileTypes string

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

Default Value

• ”* . *”

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Specifies the file types that one needs to allow in FileExplorer control
        $('#fileExplorer').ejFileExplorer({ 
        fileTypes: "*.png,*.gif,*.jpg,*.jpeg,*.docx",
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with selectedFolder value specified.
        $('#fileExplorer').ejFileExplorer({
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",
        filterSettings: {allowSearchOnTyping: false},
        });
        </script>

filterSettings.caseSensitiveSearch boolean

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

Default Value

• false

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Specifies the case sensitive for searching operation
        $('#fileExplorer').ejFileExplorer({ 
        filterSettings: {
        caseSensitiveSearch: true,
        },
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"     
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Specifies the filter types that are used to filter the grid or list elements
        $('#fileExplorer').ejFileExplorer({
        filterSettings: { 
        filterType: "startswith",
        },
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"     
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // Initialize the FileExplorer with the allowSorting value specified for grid.
        $('#fileExplorer').ejFileExplorer({ 
        gridSettings:{allowResizing:false},
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        }); 
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // Initialize the FileExplorer with the allowSorting value specified for grid.
        $('#fileExplorer').ejFileExplorer({ 
        gridSettings:{allowSorting:false},
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        }); 
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the columns value specified for grid.
        $('#fileExplorer').ejFileExplorer({ 
        gridSettings:{columns:[{ field: "name", headerText: "Name", width: 90 }, { field: "type", headerText: "Type", width: 95 }, { field: "size", headerText: "Size", width: 90 }]},
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        }); 
        </script>

height string | number

Specifies the height of FileExplorer control.

Default Value

• 400

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the height value specified.
        $('#fileExplorer').ejFileExplorer({   
        height: 450,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"            
        });
        </script>

isResponsive boolean

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

Default Value

• false

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with isResponsive value specified.
        $('#fileExplorer').ejFileExplorer({
        isResponsive: true,
        width: "70%",
        height: "50%",
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the layout value specified.
        $('#fileExplorer').ejFileExplorer({ 
        layout: "tile",
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                 
        }); 
        </script>

locale string

Sets the culture in FileExplorer.

Default Value

• “en-US”

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the culture value specified.
        $('#fileExplorer').ejFileExplorer({ 
        locale: "en-US",
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"               
        });
        </script>

maxHeight string | number

Sets the maximum height of FileExplorer control.

Default Value

• null

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with maxHeight value specified.
        $('#fileExplorer').ejFileExplorer({
        maxHeight: 500,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

maxWidth string | number

Sets the maximum width of FileExplorer control.

Default Value

• null

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with maxWidth value specified.
        $('#fileExplorer').ejFileExplorer({
        maxWidth: 1000,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

minHeight string | number

Sets the minimum height of FileExplorer control.

Default Value

• “250px”

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with minHeight value specified.
        $('#fileExplorer').ejFileExplorer({
        minHeight: 300,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

minWidth string | number

Sets the minimum width of FileExplorer control.

Default Value

• “400px”

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with minWidth value specified.
        $('#fileExplorer').ejFileExplorer({
        minWidth: 300,            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Specifies the root folder path that has to be specified in FileExplorer control
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                                 
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with ajaxAction value specified.
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",
        rootFolderName: "This PC", // The name to replace your actual root folder name(FileBrowser).
        });
        </script>

selectedFolder string

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

Default Value

• ””

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with selectedFolder value specified.
        $('#fileExplorer').ejFileExplorer({
        selectedFolder: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/Food",            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

selectedItems string | array

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

Default Value

• ””

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with selectedItems value specified.
        $('#fileExplorer').ejFileExplorer({
        selectedItems: ["Food", "Nature"],            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
        });
        </script>

showCheckbox boolean

Enables or disables the checkbox option in FileExplorer control.

Default Value

• true

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the showCheckbox value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showCheckbox: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                     
        });
        </script>

showContextMenu boolean

Enables or disables the context menu option in FileExplorer control.

Default Value

• true

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the showContextMenu value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showContextMenu: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                     
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the showFooter value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showFooter: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                   
        });
        </script>

showRoundedCorner boolean

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

Default Value

• false

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // Initialize the FileExplorer with the showRoundedCorner value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showRoundedCorner: true,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // Initialize the FileExplorer with the showThumbnail value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showThumbnail: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        });
        </script>

showToolbar boolean

Shows or disables the toolbar in FileExplorer control.

Default Value

• true

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // Initialize the FileExplorer with the showToolbar value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showToolbar: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // Initialize the FileExplorer with the showNavigationPane value specified.
        $('#fileExplorer').ejFileExplorer({ 
        showNavigationPane: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                 
        }); 
        </script>

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

<div id="fileExplorer" ></div> 
            
            <script>
            // Initialize the FileExplorer with toolbar tools value specified.
            $('#fileExplorer').ejFileExplorer({ 
            tools: {
            creation:["NewFolder", "Open"],
            navigation: ["Back", "Forward", "Upward"],
            addressBar: ["Addressbar"],
            editing: ["Refresh", "Upload", "Delete", "Rename", "Download"],
            copyPaste: ["Cut", "Copy", "Paste"],
            getProperties: ["Details"],
            searchBar: ["Searchbar"]
            },
            path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
            ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"        
            });
            </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with toolsList value specified.
        $('#fileExplorer').ejFileExplorer({ 
        toolsList: ["navigation", "creation", "addressBar", "editing", "copyPaste", "getProperties", "searchBar"],
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                 
        }); 
        </script>

uploadSettings object

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

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

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the multipleFilesSelection value specified for uploadbox.
        $('#fileExplorer').ejFileExplorer({ 
        uploadSettings:{allowMultipleFile:false},
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        }); 
        </script>

uploadSettings.autoUpload boolean

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

Default Value

• false

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with auto upload option as true.
        $('#fileExplorer').ejFileExplorer({ 
        uploadSettings:{autoUpload:true},
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        }); 
        </script>

uploadSettings.dialogAction object

Specifies the actions for upload dialog during initialization.

Default Value

• { modal:false, closeOnComplete:false, content:null, drag:true }

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Sets the  dialogAction API value
        $('#fileExplorer').ejFileExplorer({ 
        dialogAction:{ modal:false, closeOnComplete:false,resize: false, drag:true, content:"#controlId" },
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        }); 
        </script>

uploadSettings.dialogPosition object

Specifies the position at which the upload dialog is displayed using X and Y values. X: Sets the left position value for dialog. Y: Sets the top position value for dialog.

Default Value

• null

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Sets the dialogPosition API value during initialization
        $('#fileExplorer').ejFileExplorer({ 
        dialogPosition: { X: 200, Y: 30 },
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        }); 
        </script>

uploadSettings.maxFileSize number

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

Default Value

• 31457280

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the maxFileSize value specified for uploadbox.
        $('#fileExplorer').ejFileExplorer({ 
        uploadSettings:{maxFileSize:10000},
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        }); 
        </script>

uploadSettings.showFileDetails boolean

Specifies the file details which are to be displayed when selected for upload by setting the showFileDetails to true.

Default Value

• true

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Sets the showFileDetails API value during initialization
        $('#fileExplorer').ejFileExplorer({ 
        showFileDetails: false,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                
        }); 
        </script>

virtualItemCount number

Specifies the virtual item count for virtual support.

Default Value

• 0

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the virtualItemCount value specified.
        $('#fileExplorer').ejFileExplorer({
        virtualItemCount: 40,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                     
        });
        </script>

width string | number

Specifies the width of FileExplorer control.

Default Value

• 850

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // Initialize the FileExplorer with the width value specified.
        $('#fileExplorer').ejFileExplorer({   
        width: 800,
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"                     
        });
        </script>

Methods

adjustSize()

Refresh the size of FileExplorer control.

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // refresh the size of FileExplorer 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"           
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.adjustSize(); // refresh the size of file explorer               
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // disable the context menu item 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"           
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.disableMenuItem("Upload"); // disable upload option                         
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // disable the toolbar tool 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"           
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.disableToolbarItem("Searchbar"); // disable search bar                           
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // enable the context menu item 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"            
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.enableMenuItem("Upload"); // enable upload option in context menu                     
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // enable the toolbar tool 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"            
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.enableToolbarItem("Searchbar"); // enable search bar                     
        </script>

refresh()

Refresh the content of the selected folder in FileExplorer control.

Example

HTML

<div id="fileExplorer"></div> 
        
        <script>
        // refresh the content of selected folder 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"           
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.refresh(); // refresh the content of selected folder               
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // remove the toolbar tool 
        $('#fileExplorer').ejFileExplorer({      
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"            
        });
        // Create FileExplorer instance
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
        fileExplorerObj.removeToolbarItem("Searchbar"); // remove search bar                     
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeAjaxRequest event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeAjaxRequest: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeDownload event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeDownload: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeGetImage event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeGetImage: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeOpen event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeOpen: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeUpload event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeUpload: function (args) {}
        });
        </script>

beforeUploadDialogOpen

Fires before opening the upload dialog.

Name	Type	Description
files	object	returns Selected FileList objects
model	object	returns the FileExplorer model
type	string	returns the name of the event.

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeUploadboxOpen event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeUploadDialogOpen: function (args) {}
        });
        </script>

beforeUploadSend

Event is fired before the upload progress is started.

Name	Type	Description
cancel	boolean	if the event is cancelled; otherwise, false
files	object	selected FileList Object
model	object	returns the upload model
type	string	returns the name of the event
xhr	object	XHR-AJAX Object for reference

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // beforeUploadSend event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        beforeUploadSend: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // copy event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        create: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // copy event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        copy: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // createFolder event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        createFolder: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // cut event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        cut: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // destroy event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        
        destroy: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // dragStart event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        dragStart: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // drag event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        drag: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // dragStop event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        dragStop: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // drop event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        drop: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // getImage event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        getImage: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // keydown event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        keydown: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // layoutChange event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        layoutChange: function (args) {}
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // menuBeforeOpen event of ContextMenu for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        menuBeforeOpen: function (args) {}
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // menuClick event of ContextMenu for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        menuClick: function (args) {}
        });
        </script>

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

<div id="fileExplorer"></div> 
        
        <script>
        // menuOpen event of ContextMenu for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        menuOpen: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // open event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        open: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // paste event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        paste: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // remove event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        remove: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // resize event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        resize: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // resizeStart event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        resizeStart: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // resizeStop event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        resizeStop: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // select event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",        
        select: function (args) {}
        });
        </script>

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

<div id="fileExplorer" ></div> 
        
        <script>
        // select event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",           
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",        
        templateRefresh: function (args) {}
        });
        </script>

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

<div id="fileExplorer"></div>

<script>
    // unselect event for FileExplorer
    $('#fileExplorer').ejFileExplorer({
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",
        unselect: function (args) { }
    });
</script>

uploadComplete

Event is fired when the file upload progress gets completed.

Name	Type	Description
e	object	AJAX event argument for reference
error	string	details about the error information
files	object	uploaded file list
model	object	returns the Upload model
responseText	string	response from the server
success	object	successfully uploaded files list
type	string	returns the name of the event
xhr	object	XHR-AJAX Object for reference

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // uploadComplete event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        uploadComplete: function (args) {}
        });
        </script>

uploadError

Event is fired when the file upload fails due to some error.

Name	Type	Description
action	string	error event action details
error	string	details about the error information
files	object	returns the details of the uploaded files
type	string	returns the name of the event

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // uploadError event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        uploadError: function (args) {}
        });
        </script>

uploadSuccess

Event is fired when the file upload progress gets succeeded.

Name	Type	Description
e	object	AJAX event argument for reference
files	object	uploaded file list
model	object	returns the Upload model
responseText	string	response from the server
type	string	returns the name of the event
xhr	object	XHR-AJAX Object for reference

Example

HTML

<div id="fileExplorer" ></div> 
        
        <script>
        // uploadSuccess event for FileExplorer
        $('#fileExplorer').ejFileExplorer({            
        path: "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/",         
        ajaxAction: "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations",      
        uploadSuccess: function (args) {}
        });
        </script>