Getting Started

Follow these simple steps to use EO.Web FileExplorer control:

1. Place a FileExplorer control on your Web Form;
2. Define the FileExplorer UI through its LayoutTemplate property. You may also wish to copy the UI layout directly from the samples;
3. Set the FileExplorer's RootFolder property;
4. Configure filters. By default there is no filter so the control lists all files. However it is often desired to restrict the control to only list certainly type of files. For example, a browse image dialog would only want to list image files;
5. Configure permissions. The default permission is browse only;
6. Optionally specify one or more browse-only root folders by setting the control's BrowseOnlyRootFolders property;

Access Selected Folder and File Path

Currently selected folder and file path can be accessed both from the server side or the client side. Use SelectedFolder and SelectedFile to access the selected folder and file on the server side:

[C#]
Label1.Text = FileExplorer1.SelectedFile;

[Visual Basic.NET]
Label1.Text = FileExplorer1.SelectedFile

The same value can be accessed on the client side with JavaScript:

[JavaScript]
window.alert(eo_GetObject("FileExplorer1").getSelectedFile());

When the FileExplorer control is used with a dialog, it is often desired to fill a textbox with the selected file path when the dialog closes. This can be done by handling the dialog's ClientSideOnAccept event:

[ASPX]
<eo:Dialog ClientSideOnAccept="dialog_accept_handler" ...>
    ....
</eo:Dialog>

[JavaScript]
function dialog_accept_handler()
{
    //Get the textbox control
    var textbox = document.getElementById("<%=TextBox1.ClientID%>");
    
    //Get the FileExplorer object
    var fileExplorer = eo_GetObject("FileExplorer1");
    
    //Set the textbox's value
    textbox.value = fileExplorer.getSelectedFile();
}

Placing FileExplorer into a Separate Page

It is often desired to place the FileExplorer control into a separate page so that it is not loaded until user requests this feature (for example, by clicking a toolbar button). A separate FileExplorerHolder control is provided to support this delay loading scheme. This control is the recommended method to use FileExplorer control with a dialog.

Follow these simple steps to use FileExplorer in a separate page (for using with Dialog):

1. Create a separate page and place a FileExplorer control in that page. Configure the FileExplorer control according to steps outlined above;
2. Place a FileExplorerHolder control inside the dialog's ContentTemplate control. Customize the dialog's size and the FileExplorerHolder's size accordingly;
3. Setting the FileExplorerHolder's Url property to the page where the FileExplorer is in. Note an application-relative path must be used;
4. Use the FileExplorerHolder object as if it was a FileExplorer object on the client side to get the current selected file. For example, using:

   eo_GetObject("FileExplorerHolder").getSelectedFile();
   

5. Note the server side interface for the FileExplorer object is available in the separate page that hosts the FileExplorer control, not in the main page that hosts the FileExplorerHolder control. If you wish to configure the FileExplorer control from the main page, you may do so by modifying the FileExplorerHolder control's Url property to include custom query string parameters, then interprets these parameters in the page that hosts the FileExplorer control.