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>