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

Event log

Demo Configurator



Set Filter Label
Isolate this demo as a stand-alone application

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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FileExplorer.FilterTextbox.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="FileExplorer1" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-container size-medium">
        <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="595px" Height="320px"
            AllowPaging="true" PageSize="6" EnableFilterTextBox="true" OnClientFilter="OnClientFilter">
            <Configuration ViewPaths="~/FileExplorer/ExplorerSource/images"></Configuration>
        </telerik:RadFileExplorer>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                    <asp:CheckBox ID="chkEnableFilterBox" runat="server" Text="EnableFilterTextBox" OnCheckedChanged="btnSetText_CheckedChanged" AutoPostBack="true" /><br />
                    <br />
                    <qsf:TextBox ID="txtFilterLabel" runat="server" Size="Wide"></qsf:TextBox>
                    <qsf:Button ID="btnSetText" runat="server" Text="Set Filter Label" OnClick="btnSetText_Click">
                    </qsf:Button>
                </telerik:RadAjaxPanel>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>


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

Find Assistance

Help Us Improve

Was this example helpful?