File Explorer

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadFileExplorer - Telerik's ASP.NET FileExplorer

Browse to an image and double click to preview.
  •  Images
    •  Linguística56
    •  NewFolder
    •  test
    •  TEST5
Table that lists the contents of the current directory
FilenameSize
Table that lists the contents of the current directory
  
  
  
  
  
  
  
  
  
  
  
Max file size allowed:
200.00 KB
File extensions allowed:
*.jpg, *.jpeg, *.gif, *.png
Preview
Properties
Choose explorer controls:





Set control behavior:






tlrk.it/1dJ4Jyp To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1dJ4Jyp

About RadFileExplorer for ASP.NET AJAX

Bringing desktop to the web is not mythical and Telerik File Explorer component is yet another proof. A flexible web control for file management, RadFileExplorer completely mimics the Windows Explorer functionality and is entirely built with the Telerik controls. You can easily add it to your page, and organize your files and folders: create, rename, delete, drag and drop, all the familiar file operations and all of them performed on the client.

RadFileExplorer and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular FileExplorer demo, you can use the following path to find it in the sample website application:
fileexplorer/examples/overview

Key Features

  • A single control, integrated in Telerik.Web.UI - ready to drag and drop on the page
  • Directory load on demand loading using ASP.NET 2.0 AJAX Callback mechanism
  • Clientside and server events for file operations
  • Uses the FileBrowserContentProvider abstraction of RadEditor for hooking to any underlying file system, such as OS, database, MOSS SharePoint, MCMS
  • Sorting of files and folders
  • Context menus
  • Ability to delete and rename files and folders
  • Ability to create new folders
  • Ability to enable paging for the grid if the folders contain a large number of items (e.g. more than 200)
  • Ability to switch quickly between Grid and Thumbnail views using the new toolbar buttons

Resources

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/FileExplorer/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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 runat="server">
    <title>AJAX File Explorer Demo | RadFileExplorer</title>
     <style type="text/css">
          h5 {
               margin: 3px;
               margin-top: 6px;
          }
     </style>
     <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <table cellspacing="4">
          <tr>
               <td rowspan="2" style="vertical-align: top;">
                    Browse to an image and double click to preview.
                    <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="520px" Height="520px"
                         OnClientItemSelected="OnClientItemSelected" OnClientDelete="OnClientDelete">
                         <Configuration ViewPaths="~/FileExplorer/Examples/Overview/Images" UploadPaths="~/FileExplorer/Examples/Overview/Images"
                              DeletePaths="~/FileExplorer/Examples/Overview/Images"></Configuration>
                    </telerik:RadFileExplorer>
               </td>
               <td>
                    <div id="decoratedZoneFiledset">
                         <fieldset style="width: 230px; height: 220px; margin-top: 14px;">
                              <legend>Preview</legend>
                              <img id="pvwImage" src="Images/Northwind/Flowers/Flower1.jpg" alt="Flower1.jpg"
                                   style="display: none; margin: 10px; width: 200px; height: 180px; vertical-align: middle;" />
                         </fieldset>
                    </div>
               </td>
          </tr>
          <tr>
               <td valign="top" id="decoratorZone">
                    <div id="decoratedZone">
                         <fieldset style="width: 230px;">
                              <legend>Properties</legend>
                              <h5>
                                   Choose explorer controls:</h5>
                              <asp:CheckBoxList Width="140px" ID="visibleControls" CellSpacing="0" runat="server">
                                   <asp:ListItem Selected="true" Text="Address Box" Value="AddressBox"></asp:ListItem>
                                   <asp:ListItem Selected="true" Text="Grid" Value="Grid"></asp:ListItem>
                                   <asp:ListItem Selected="true" Text="ListView" Value="ListView"></asp:ListItem>
                                   <asp:ListItem Selected="true" Text="Toolbar" Value="Toolbar"></asp:ListItem>
                                   <asp:ListItem Selected="true" Text="TreeView" Value="TreeView"></asp:ListItem>
                                   <asp:ListItem Selected="true" Text="Context Menus" Value="ContextMenus"></asp:ListItem>
                              </asp:CheckBoxList>
                              <h5>
                                   Set control behavior:</h5>
                              <asp:CheckBox ID="enableUpload" Width="130px" Text="Enable upload?" Checked="true"
                                   runat="server" Style="margin-left: 3px"></asp:CheckBox>
                              <br />
                              <asp:CheckBox ID="enableCreateNewFolder" Width="130px" Text="Allow new folders?"
                                   Checked="true" runat="server" Style="margin-left: 3px"></asp:CheckBox>
                              <br />
                              <asp:CheckBox ID="displayUpFolder" Width="160px" Text="Display up folder(..) item?"
                                   Checked="false" runat="server" Style="margin-left: 3px"></asp:CheckBox>
                              <br />
                              <asp:CheckBox ID="enableOpenFile" Width="165px" Text="Open files on double-click?"
                                   Checked="true" runat="server" Style="margin-left: 3px"></asp:CheckBox>
                              <br />
                              <asp:CheckBox ID="allowPaging" Width="165px" Text="Enable paging" Checked="false"
                                   runat="server" Style="margin-left: 3px"></asp:CheckBox>
                              <br />
                              <br />
                              <asp:Button ID="Update" Text="Update RadFileExplorer" Width="180px" runat="server">
                              </asp:Button>
                         </fieldset>
                    </div>
               </td>
          </tr>
     </table>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/FileExplorer.png" AlternateText="tlrk.it/1dJ4Jyp" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1dJ4Jyp">tlrk.it/1dJ4Jyp</a>
    </div>
    </form>
</body>
</html>