Search in GridView using JavaScript
Article about search in gridview using JavaScript; Gridview data filtering on client-side based on keypress on textbox; Filter gridview data without postback.
In previous articles we explained Allow Only Number or String in TextBox, Auto Refresh Page Every 5 Seconds, Color Picker, Hindi TextBox using Google Transliterate API, Display Text in Password Field using JavaScript, Calculating Duration Between Two Dates, Copy to Clipboard Example, Image Gallery, Responsive Slider, Jquery ThickBox Popup and many more. Now we will move on search in gridview using JavaScript.
Follwing are the step to search in gridview using JavaScript
ADD SCRIPT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> function Search_Gridview(strKey, strGV) { var strData = strKey.value.toLowerCase().split(" "); var tblData = document.getElementById(strGV); var rowData; for (var i = 1; i < tblData.rows.length; i++) { rowData = tblData.rows[i].innerHTML; var styleDisplay = 'none'; for (var j = 0; j < strData.length; j++) { if (rowData.toLowerCase().indexOf(strData[j]) >= 0) styleDisplay = ''; else { styleDisplay = 'none'; break; } } tblData.rows[i].style.display = styleDisplay; } } </script> |
ADD HTML MARKUP
|
1 2 3 4 5 6 7 8 9 10 11 |
<div style="font-family: Aharoni; text-align: center; font-size: 30px; margin: 20px;"> Search in GridView using JavaScript by Code Scratcher </div> <div style="border: 1px solid Black; width: 800px; padding: 20px; height: 350px; font-size: 20px;"> Search : <asp:TextBox ID="txtSearch" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this, 'gvTest')"></asp:TextBox><br /> <br /> <asp:GridView ID="gvTest" runat="server" CellPadding="10" Width="500px"> </asp:GridView> </div> |
RUN PROJECT AND CHECK FINAL OUTPUT
Search in GridView using JavaScript – Output
Source Code
help@codescratcher.com
Incoming search terms
Search in GridView using JavaScript, Filter GridView using JavaScript, GridView filter data without postback, Client side gridview filtering using javascript in asp.net, Gridview Data Filtering on Client-Side based on Keypress on textbox, javascript search for asp.net gridview, Search Records or Filter rows in a GridView Control using JavaScript.
I wish to say that this post is awesome, great written and include almost all significant infos. I’d like to see more posts like this .
This code is so good but it does not work with gridview paging
It doesn’t work for me :/.. I followed all the steps but it still wont work
Hello Rida,
Can you please download the source code and compare it with your code.
If anything then let us know.
Thanks!
okay I’ll try that.
I am using an updatepanel.. would that have to do with anything?
Rida its work fine but not filtering all rows anyways good work admin
Thank u…. its working …..
Perfect, just what I needed, thank you!!!!!!!
Perfect.
hi, i try to add this in my site and it is what i want.
i downloaded sample codes. it is working fine.
but i couldnt integrated to my MsSql database.
Works Perfect, even with a GridView inside an UpdatePanel. Thanks.
perfect work and also implement it with my database.
this is work fine with my database but if i use in GridView PageSize=10 then this code search into first page 10 records but never search into another paging like 2,3,4..so what can i do for this isse.
in update panel its not working. please help me
its works fine.
but it didn’t work when we use master page. Is there any way to fix it?
Hi i am using same code in spgridview but document.getElementBy(gvTest) giving null value. Please note that my spgrid has id=gvTest
this works like a charm, was searching this functionality for long.. implemented it in other way.. thanks
Source code works fine but I need to make some adjustment for my project:
Step 1 : I connected gridview to database on sample code , it worked fine
Step2: I used master page , it gave error below:
Uncaught TypeError: Cannot read property ‘rows’ of null
at Search_Gridview (WebForm1.aspx:14)
at HTMLInputElement.onkeyup (WebForm1.aspx:51)