FileExplorer

Controls

Rate this demo

Thank you for your post!

FileExplorer - File Selector Dialog

How to open the 'Explorer.aspx' file:

This demo contains 1 or more dialog pages. To view them, click on the dropdown button (image) next to the corresponding file type.


Open the dialog and double click on a file to select it.

File Selector Dialog

The example above shows how to create a simple File Selector Dialog. On Open button click a RadWindow containing a RadFileExplorer control is displayed. Once the user browses to a file and double clicks on it, the OnClientFileOpen event is fired and the selected file path is populated in the RadTextBox declared on the parent page.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FileExplorer.Dialogues.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET FileExplorer Demo - File Selector Dialog</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All">
     </telerik:RadFormDecorator>
     <qsf:InformationBox ID="InformationBox1" runat="server" Title="How to open the 'Explorer.aspx' file:">
          <span style="color: Red; font-size: 12px;">This demo contains 1 or more dialog pages.
               To view them, click on the dropdown button (image) next to the corresponding file
               type.</span>
     </qsf:InformationBox>
     <div>
          <label for="fileName">Select a file:</label>
        <telerik:RadTextBox ID="fileName" runat="server" Width="350px">
          </telerik:RadTextBox>
          <asp:Button ID="selectFile" OnClientClick="OpenFileExplorerDialog(); return false;"
               Text="Open..." runat="server"></asp:Button>
          <br />
          <br />
          Open the dialog and double click on a file to select it.
     </div>
     <script type="text/javascript">
          //<![CDATA[
          function OpenFileExplorerDialog() {
               var wnd = $find("<%= ExplorerWindow.ClientID %>");
               wnd.show();
          }

          //This function is called from a code declared on the Explorer.aspx page
          function OnFileSelected(fileSelected) {
               var textbox = $find("<%= fileName.ClientID %>");
               textbox.set_value(fileSelected);
          }
          //]]>
     </script>
     <telerik:RadWindow runat="server" Width="550px" Height="560px" VisibleStatusbar="false"
          ShowContentDuringLoad="false" NavigateUrl="Explorer.aspx" ID="ExplorerWindow"
          Modal="true" Behaviors="Close,Move">
     </telerik:RadWindow>

    </form>
</body>
</html>