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.

Introduction

 

Here is an interesting topic of searching for 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>

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