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 - Filter TextBox

  •  Images
    •  AllImages
    •  Customers
    •  Products
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 6 of 7
Example Configuration
EnableFilterTextBox


Clear log Event log:

Filter TextBox

RadFileExplorer supports filtering of the files and folders in the Grid. Simply set the EnableFilterTextBox property to true and a search box will be rendered above the Grid's header. The items are filtered on every key stroke, so you don't need to press "Enter" to invoke the filtering process. Note that the FileExplorer searches for the keyword in the currently selected directory, omitting the items in the subfolders.

The text of the Label is set through the localizable FilterTextBoxLabel property.

It is not necessary to have the built-in filter textbox enabled in order to perform filtering. The FileExplorer's filter(keyWord) client-side method can be used to filter the items in the currently selected directory.

The filter client-side event (OnClientFilter property) is raised before the filtering occurs, and event argument object with the following properties and methods is passed to the event handler method:

  • get_text() - gets the text (keyword) to search for
  • set_text(newText) - sets the text (keyword) to search for
  • set_cancel(toCancel) - sets bool value that determines whether the filtering will be cancelled - set_cancel(true) will cancel the filtering process.
  • get_domEvent() - gets a reference to the current domEvent - it comes handy when you need to determine which key was pressed
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FileExplorer.FilterTextbox.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 - Filter TextBox</title>
     <style type="text/css">
          .RadForm_Metro input.rfdDecorated {
               border-radius: 0;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
     <script type="text/javascript">
          //<![CDATA[
          function OnClientFilter(sender, eventArgs) {
               logEvent("Filter event: The user searched for <strong>\"" + eventArgs.get_text() + "\"</strong> keyword.");
          }
          //]]>
     </script>
     <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
     </telerik:RadAjaxLoadingPanel>
     <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"
          Height="350px" Style="padding-top: 20px;">
          <telerik:RadFormDecorator runat="server" ID="rfdDemoContent" DecoratedControls="All"
               DecorationZoneID="decoratedZoneCont" />
          <div style="float: left; width: 550px; height: 350px;">
               <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="520px" Height="320px"
                    AllowPaging="true" PageSize="6" EnableFilterTextBox="true" OnClientFilter="OnClientFilter">
                    <Configuration ViewPaths="~/FileExplorer/ExplorerSource/Images"></Configuration>
               </telerik:RadFileExplorer>
          </div>
          <qsf:ConfiguratorPanel ID="configFE" runat="server" Width="300px" Height="200px"
               Style="float: left;" Expanded="true">
               <div style="padding: 20px;" id="decoratedZoneCont">
                    <span></span>
                    <telerik:RadButton ID="chkEnableFilterBox" runat="server" Text="EnableFilterTextBox"
                         ButtonType="ToggleButton" ToggleType="CheckBox" OnCheckedChanged="btnSetText_CheckedChanged">
                    </telerik:RadButton>
                    <br />
                    <br />
                    <asp:TextBox ID="txtFilterLabel" runat="server" Style="margin-bottom: 7px;"></asp:TextBox>
                    <br />
                    <telerik:RadButton ID="btnSetText" runat="server" Text="Set Filter Label" OnClick="btnSetText_Click">
                    </telerik:RadButton>
               </div>
          </qsf:ConfiguratorPanel>
     </telerik:RadAjaxPanel>
     <qsf:EventLogConsole ID="eventLog" AllowClear="true" runat="server" Width="520px"
          Style="clear: both;"></qsf:EventLogConsole>
    </form>
</body>
</html>