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.

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>