Please help me with code to filter gridview using javascript..

Posted Date: 03 Aug 2012 Posted By:: sp Member Level: Silver Member Rank: 1204 Points: 5 Responses: 1

I have a gridview and two textboxes namely 'Textbox1' and 'TextBox2'. The gridview has two columns.. one for employee and other for code..
Employee: empty textbox Code: empty textbox
Employee Code
Ram 1001
Raghuveer 1005
Sham 2005
Pinku 2007

I want to achieve the following using JavaScript(filter gridview);
• Textbox1 is used to filter gridview's based on column 1.
• Textbox2 is used to filter gridview's based on column 2.
• If textbox2 is empty search should be performed only on the basis of 'keyword' present in textbox1 i.e all rows whose column1 contains the keywords in textbox1…..
Employee: S (keyword entered in textbox) Code: empty textbox
Sham 2005

• If textbox1 is empty search should be performed only on the basis of the keyword entered in textbox2…
Employee: empty textbox Code: 2(keyword entered in textbox)
Employee Code
Sham 2005
Pinku 2007

• If textbox1 and textbox2 both contain keywords than we select all those rows from gridview with same combination of keywords w.r.t Column1 and Column2
Employee: S (keyword entered in textbox) Code: 2(keyword entered in textbox)
Employee Code
Sham 2005

Here is my code:
<head runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
//
// Client Side Search
// Get the search Key from the TextBox
// Iterate through the 2nd Column.
// td:nth-child(2) - Filters only the 2nd Column
// If there is a match show the row [$(this).parent() gives the Row]
// Else hide the row [$(this).parent() gives the Row]
$('#txtCode').keyup(function (event) {
event.preventDefault();
var searchKey = $('#txtCode').val().toLowerCase();

$("#grdEmployee tr td:nth-child(3)").each(function () {
var cellText = $(this).text().toLowerCase();
if (cellText.indexOf(searchKey) >= 0) {
$(this).parent().show();
}
else {
$(this).parent().hide();
}
});
});
$('#txtName').keyup(function (event) {
event.preventDefault();
var searchKey = $('#txtName').val().toLowerCase();

$("#grdEmployee tr td:nth-child(2)").each(function () {
var cellText = $(this).text().toLowerCase();
if (cellText.indexOf(searchKey) >= 0) {
$(this).parent().show();
}
else {
$(this).parent().hide();
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Search Name:
<asp:TextBox ID="txtName" runat="server" Width="100"></asp:TextBox>
<asp:TextBox ID="txtCode" runat="server" Width="100"></asp:TextBox>
<asp:Button ID="cmdSearch" runat="server" Text="Search" />
<asp:Button ID="cmdClear" runat="server" Text="Clear" />
</td>
</tr>
<tr>
<td>
<asp:GridView
ID="grdEmployee"
runat="server"
AutoGenerateColumns="False" DataSourceID="Sqldatasource1">
<Columns>
<asp:BoundField DataField="SNo" HeaderText="SNo" InsertVisible="False"
ReadOnly="True" SortExpression="SNo" />
<asp:BoundField DataField="Employee" HeaderText="Employee" SortExpression="Employee" />
<asp:BoundField DataField="Code" HeaderText="Code"
SortExpression="Code" />
</Columns>
</asp:GridView>

</td>
</tr>

</table>
<asp:sqldatasource ID="Sqldatasource1" runat="server"
ConnectionString="<%$ ConnectionStrings:WebFormConnectionString3 %>"
SelectCommand="SELECT * FROM [medicine]"></asp:sqldatasource>
</div>
</form>
</body>

I AM UNABLE TO Perform combined search based on keywords entered in both the textboxes… Please provide code to achieve the above points….

Responses

#683007 Author: Kapil Member Level: Gold Member Rank: 51 Date: 03/Aug/2012 Rating: Points: 3
Hi, If you want to filter the data from Java Script then you have two options. 1) If you are using JQuery then there is plugin for that which will help to filter the data. a) http://tomcoote.co.uk/code-bank/jquery-column-filters/ b) http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html 2) You have to use Ajax & JSON to send the request to the server and get the data on Javascript and bind the data to grid. Hope this will help.. Happy Coding "Please don't forget to Rate this answer if you found it usefull" http://www.dotnetspider.com/mentors/86-kapil-deo.aspx My Blog

Post Reply

You must Sign In to post a response.

	Next : How to show large image on mouse over?
	Previous : What is the purpose of writing javascript asynchronously.Why not synchronously?
	Return to Discussion Forum
	Post New Message
	Category:

Related Messages

Active Members
Today

Last 7 Days

baskar (360)
Asheej T K (193)
Ultimaterengan (179)

more...

Awards & Gifts

Email subscription