RadGrid for ASP.NET
Contents
Search on key press/button click Send comments on this topic.
Filtering > How to > Search on key press/button click

Glossary Item Box

Sometimes you may want to filter the grid records after typing a string sequence in a textbox and then hit a button beside that textbox/press the [ENTER] key from the keyboard. While the filter operation can be triggered when you click the button with the mouse, the second option (i.e. filter on key press) need to be implemented with custom code. The main parts of the logic are described in the points below:

  1. Hook the onkeypress event of the search textbox
  2. Check whether the key code of the pressed key is 13 (or other if you want to perform search from other key)
  3. Find the button in the grid command item template (in our sample the button is wrapped in this template of the control)
  4. cancel/prevent the default bubbling and invoke the click() method of the button
  5. intercept the postback request in the ItemCommand handler of the grid and filter the records in it in par with the pattern typed by the user

The upcoming example uses ObjectDataSource and SelectParameter to represents the approach:

ASPX/ASCX Copy Code
<script type="text/javascript">
    function doFilter(sender, e)
    {
      if(e.keyCode == 13)
      {
        var btn = document.getElementById('<%= RadGrid1.MasterTableView.GetItems(Telerik.WebControls.GridItemType.CommandItem)(0).FindControl("btnSearch").ClientID %>');

         if(btn != null)
        {
           e.cancelBubble = true;
           e.returnValue = false;

            if (e.preventDefault)
           {
               e.preventDefault();
           }

           btn.click();
       }
      }
    }
</script>
<rad:RadGrid AllowFilteringByColumn="False" id="RadGrid1" runat="server" Width="500px" DataSourceID="ObjectDataSource1" AutoGenerateColumns="False" AllowPaging="True" PageSize="20" />
               <MasterTableView CommandItemDisplay="Top">
                   <CommandItemTemplate>
                       <div style="float: right">
                           <asp:Label ID="Label50" runat="server" Text="Filter:"></asp:Label>
                           <asp:DropDownList ID="ddlFieldName" runat="server">
                               <asp:ListItem Text="CustomerID" Value="CustomerID" Selected="True"></asp:ListItem>
                           </asp:DropDownList>
                           <asp:TextBox ID="txtSearch" onkeypress="doFilter(this, event)" runat="server"></asp:TextBox>
                           <asp:Button ID="btnSearch" runat="server" CommandName="btnSearch" Text="Filter" />
                           <asp:Button ID="btnShowAll" runat="server" CommandName="btnShowAll" Text="Show All" />
                       </div>
                  </CommandItemTemplate>
               <Columns>
                   <rad:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" UniqueName="CompanyName">
                   </rad:GridBoundColumn>
               </Columns>
           </MasterTableView>
  <FilterMenu HoverBackColor="LightSteelBlue" HoverBorderColor="Navy" NotSelectedImageUrl="~/RadControls/Grid/Skins/Default/NotSelectedMenu.gif"
               SelectColumnBackColor= "Control" SelectedImageUrl="~/RadControls/Grid/Skins/Default/SelectedMenu.gif"
               TextColumnBackColor= "Window"></FilterMenu>
</rad:RadGrid>
<br/>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetCustomers1"
               TypeName= "Northwind">
               <SelectParameters>
                   <asp:SessionParameter Name="filter1" SessionField="filter1" Type="String" />
               </SelectParameters>
</asp:ObjectDataSource>

 

C# Copy Code
protected void RadGrid1_ItemCommand(object source, Telerik.WebControls.GridCommandEventArgs e)
{
        if (e.CommandName == "btnSearch")
       {
           Button btn = (Button)e.CommandSource;
           TextBox txt = btn.NamingContainer.FindControl("txtSearch") as TextBox;

            if (source is RadGrid1)
           {
               Session[ "filter1"] = txt.Text;
           }
       }
        else if (e.CommandName == "btnShowAll")
       {
           Session[ "filter1"] = null;
       }
}
VB.NET Copy Code
Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.WebControls.GridCommandEventArgs) Handles RadGrid1.ItemCommand
         If e.CommandName = "btnSearch" Then
             Dim btn As Button = CType(e.CommandSource, Button)
             Dim txt As TextBox = btn.NamingContainer.FindControl("txtSearch")

             If (source Is RadGrid1) Then
                Session( "filter1") = txt.Text
             End If
         ElseIf e.CommandName = "btnShowAll" Then
            Session( "filter1") = Nothing
         End If

End Sub