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.

FileExplorer - InitialPath and Paging

The value set to the InitialPath property is case sensitive and should be in the same format as shown in the RadFileExplorer's addressbar.
  •  Images
    •  Products
    •  prueba
    •  status
Table that lists the contents of the current directory
FilenameSize
Table that lists the contents of the current directory
  
  
  
  
  
  
  
  
Table that lists the contents of the current directory
Data pager
Data pager
Page 1 of 2
Page 1 of 2. Items 1 to 8 of 9
Preview

RadFileExplorer's paging feature

These settings should be set in order to enable RadFileExplorer's paging feature:

  • Set the AllowPaging="true" property
  • Set the desired page size by setting an integer value to the PageSize property. If this value is not set, then the default value 10 will be used

Note: If the RadFileExplorer 's InitialPath property is set then the pager will auto page in order to show the selected file. Also, the RadFileExplorer 's OnClientItemSelected event will be fired

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FileExplorer.Default.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 runat="server">
    <title>ASP.NET FileExplorer Demo - InitialPath and Paging</title>
     <style type="text/css">
          h5 {
               margin: 3px;
               margin-top: 6px;
          }
          .leftPane {
               float: left;
               padding-right: 10px;
               margin-right: 20px;
          }
          .previmage {
               margin: 10px;
               width: 200px;
               height: 180px;
               vertical-align: middle;
          }
     </style>
     <telerik:RadCodeBlock ID="codeBlock1" runat="server">
          <script type="text/javascript">
               function OnClientItemSelected(sender, args) {
                    var pvwImage = $get("<%= pvwImage.ClientID %>");
                    var imageSrc = args.get_path();

                    if (imageSrc.match(/\.(gif|jpg)$/gi)) {
                         pvwImage.src = imageSrc;
                         pvwImage.style.display = "";
                         pvwImage.alt = imageSrc.substring(imageSrc.lastIndexOf('/') + 1);
                    }
                    else {
                         pvwImage.style.display = "none";
                    }
               }
          </script>
     </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
     <qsf:InformationBox ID="InformationBox1" runat="server">
          <span style="font-size: 12px;">The value set to the <em>InitialPath</em> property is
               case sensitive and should be in the same format as shown in the <strong>RadFileExplorer</strong>'s
               addressbar. </span>
     </qsf:InformationBox>
     <div>
          <div class="leftPane">
               <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="600px" Height="310px"
                    AllowPaging="true" PageSize="8" OnClientItemSelected="OnClientItemSelected">
                    <Configuration ViewPaths="~/FileExplorer/ExplorerSource/Images"></Configuration>
               </telerik:RadFileExplorer>
          </div>
          <div style="float: left;">
               <fieldset style="width: 230px; height: 220px">
                    <legend>Preview</legend>
                    <img id="pvwImage" src="../../../ExplorerSource/Images/AllImages/Flower1.jpg" runat="server" alt="flower1.jpg"
                         class="previmage" style="display: none;" />
               </fieldset>
          </div>
          <br class="qsf-clear-float" />
     </div>
    </form>
</body>
</html>