New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Filter TextBox

  • Open
  •  
  •  
  •  
  •  
  •  
  •  
  •  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
Page 1 of 2
Page 1 of 2. Items 1 to 6 of 11
Event log
  • Demo Configurator


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
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.FileExplorer.FilterTextbox.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<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 RenderMode="Lightweight" 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>

Support & Learning Resources

Find Assistance