Telerik Rad Grid, Searching with Javascript & JQuery

Here is an interesting topic of searching of grid content just from Java script, not from the code behind.. Let me explain.

Filter in RAD Grid:

Here is an example to explain all the searching in Rad Grid..

 

<script type="text/javascript">

    function buttonClicked(button, UniqueName) {

        button.parentElement.firstElementChild.value = "";

        var masterTable = $find("<%=rgProviderRequests.ClientID %>").get_masterTableView();

        masterTable.filter(UniqueName, button.parentElement.firstElementChild.value, "Contains");

    }

    function keyPressed(txtBox, eventArgs, UniqueName) {

        var masterTable = $find("<%=rgProviderRequests.ClientID %>").get_masterTableView();

        masterTable.filter(UniqueName, txtBox.value, "Contains");

    }

</script>

Gird : 

<telerik:RadGrid ID="rgProviderRequests" GridLines="None" runat="server" Width="800px"

Skin="Windows7" AutoGenerateColumns="False" OnItemDataBound="rgProviderRequests_ItemDataBound" OnNeedDataSource="rgProviderRequests_NeedDataSource" AllowPaging="True" PageSize="10"
AllowFilteringByColumn="true">
  <ClientSettings>
    <Resizing AllowColumnResize="false" AllowRowResize="false" ResizeGridOnColumnResize="false"
     ClipCellContentOnResize="true" EnableRealTimeResize="true" />
  </ClientSettings>
  <GroupingSettings CaseSensitive="false" />
  <FilterMenu EnableImageSprites="false">
  </FilterMenu>
  <MasterTableView EditMode="EditForms" DataKeyNames="Status,UserId" NoMasterRecordsText="No records to display"
  TableLayout="Fixed" AllowFilteringByColumn="true">
    <PagerStyle Mode="NextPrevAndNumeric" />
    <Columns>
      <telerik:GridBoundColumn HeaderText="Date" ItemStyle-Width="90px" SortExpression="CreateDate"
      HeaderButtonType="TextButton" DataField="CreateDate" UniqueName="CreateDate"
      HeaderStyle-Width="90px" AllowFiltering="false">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn HeaderText="User" SortExpression="EmailAddress" HeaderButtonType="TextButton"
      DataField="EmailAddress" UniqueName="EmailAddress" HeaderStyle-Width="150px"
      ShowFilterIcon="false" FilterControlWidth="120px" CurrentFilterFunction="Contains"
       FilterControlToolTip="" FilterImageToolTip="" FilterControlAltText="" AutoPostBackOnFilter="true">
        <FilterTemplate>
          <asp:TextBox ID="TextBox1" runat="server" onchange="keyPressed(this,event,'EmailAddress');"
          Height="25px" CssClass="inputLimit" Width="100%"></asp:TextBox>
          <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/clearIcon.png"
          OnClientClick="buttonClicked(this,'EmailAddress');return false;"></asp:ImageButton>
        </FilterTemplate>
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn HeaderText="Status" SortExpression="Status" HeaderButtonType="TextButton"
     DataField="Status" UniqueName="Status" HeaderStyle-Width="100px" ShowFilterIcon="false"
     FilterControlWidth="70px" CurrentFilterFunction="Contains" FilterControlToolTip=""
     FilterImageToolTip="" FilterControlAltText="" AutoPostBackOnFilter="true">
        <FilterTemplate>
          <asp:TextBox ID="TextBox2" runat="server" onchange="keyPressed(this,event,'Status');"
          Height="25px" CssClass="inputLimit" Width="100%"></asp:TextBox>
          <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/clearIcon.png"
          OnClientClick="buttonClicked(this,'Status');return false;"></asp:ImageButton>
        </FilterTemplate>
      </telerik:GridBoundColumn>
      <telerik:GridTemplateColumn HeaderText="Select Action" ItemStyle-Width="150px" HeaderStyle-Width="150px"
      UniqueName="Action" AllowFiltering="false">
        <ItemTemplate>
          <telerik:RadComboBox ID="rcbAction" Width="160px" DropDownWidth="110px" runat="server"
           AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChangedHandler">
            <Items>
              <telerik:RadComboBoxItem runat="server" Text="Select Action" />                                     

            </Items>

          </telerik:RadComboBox>
          <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
          </telerik:RadWindowManager>
        </ItemTemplate>
      </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>