javascript search box

 simple java script for Searching in text box with RadGrid view in .net  
 ------------------------------------------------------------------------------------:  
 step1:  
 -----  
 Where ever you want you can put that text box:  
 <table style="width: 100%;">  
           <tr>  
             <td align="center">  
               <asp:Label ID="LblRptnM" runat="server" Font-Names="Verdana" Font-Size="12px" Text="Search Here:"></asp:Label>  
               <telerik:RadTextBox ID="RadTextBox1" runat="server" AccessKey="Q" AutoPostBack="false"  
                 BorderColor="#A7C0DC" BorderStyle="Solid" BorderWidth="1px" EmptyMessage="Search For Item Names"  
                 Font-Names="Trebuchet MS, Helvetica, sans-serif" Font-Size="Medium" Height="25px"  
                 onkeyup="instantFilter(this,event)" Width="350px">  
               </telerik:RadTextBox>  
             </td>  
           </tr>  
 </table>  
 Step 2:  
 -------  
 place the javascript at top of the page near scripts  
 <telerik:RadCodeBlock runat="server" ID="ADfadsf">  
     <script type="text/javascript">  
       //Put your JavaScript code here.  
       function pageLoad() {  
         dataItems = $find("<%= alertGrid.ClientID %>").get_masterTableView().get_dataItems();  
       }  
       var dataItems;  
       var savedValues = [];  
       function rowCreated(sender, args) {  
         var values = [];  
         var cells = args.get_item().get_element().cells;  
         for (var i = 0; i < cells.length; i++) {  
           values[i] = $(cells[i]).text().toLowerCase();  
         }  
         savedValues[args.get_itemIndexHierarchical()] = values;  
       }  
       var oldValue = "";  
       var firstCell = null;  
       function instantFilter(sender, args) {  
         var newValue = sender.value.toLowerCase();  
         sender.style.color = "green";  
         if (newValue != oldValue) {  
           firstCell = null;  
           var currentItemsCount = 0;  
           for (var i = 0; i < savedValues.length; i++) {  
             var elected = false;  
             for (var k = 0; k < savedValues[i].length; k++) {  
               if (savedValues[i][k].indexOf(newValue) != -1) {  
                 elected = true;  
                 break;  
               }  
             }  
             var item = dataItems[i];  
             item.get_element().style.display = elected ? "" : "none";  
             if (elected) {  
               if (firstCell == null) {  
                 firstCell = item.get_element().cells[0];  
               }  
               item.get_element().className = currentItemsCount % 2 == 0 ? "rgRow" : "rgAltRow";  
               currentItemsCount++;  
             }  
           }  
           oldValue = newValue;  
         }  
       }  
     </script>  
   </telerik:RadCodeBlock>  
 step 3:  
 -------  
 and give that grid id to the javascript  
 step 4:  
 -------  
 in the grid  
 <ClientSettings AllowKeyboardNavigation="true">  
                     <Scrolling AllowScroll="true" UseStaticHeaders="true" />  
                     <ClientEvents OnRowCreated="rowCreated" />  
                     <Selecting AllowRowSelect="true" />  
 </ClientSettings>  
 now excute  

11:39 PM Share: