FileExplorer

Controls

Rate this demo

Thank you for your post!

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
    •  AllImages
    •  Customers
    •  Products
  
  
  
  
  
  
  
  
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>
    <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>