Step 1:
Download the jquery-1.7.1.min.js file ans save this file at Scripts folder at solution Explorer.
Step 2
Pass the Given Below code in your source page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search GridView Data</title>
<style type="text/css">
body
{
font-family: Arial;
font-size : 10pt;
}
.links
{
font-weight: bold;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#<%=lblNoRecords.ClientID%>').css('display','none');
$('#<%=txtSearch.ClientID%>').blur(function(e)
{
$('#<%=lblNoRecords.ClientID%>').css('display','none'); // Hide No records to display label.
$("#<%=gdRows.ClientID%> tr:has(td)").hide(); // Hide all the rows.
var iCounter = 0;
var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); //Get the search box value
if(sSearchTerm.length == 0) //if nothing is entered then show all the rows.
{
$("#<%=gdRows.ClientID%> tr:has(td)").show();
return false;
}
//Iterate through all the td.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()
{
var cellText = $(this).text().toLowerCase();
if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) //Check if data matches
{
$(this).parent().show();
iCounter++;
return true;
}
});
if(iCounter == 0)
{
$('#<%=lblNoRecords.ClientID%>').css('display','');
}
e.preventDefault();
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
Search Text :
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Search" />
<br /><br />
<asp:GridView ID="gdRows" runat="server" BackColor="Pink" BorderColor="Tan"
BorderWidth="1px" CellPadding="6" Font-Names="Arial" Font-Size="Small" GridLines="None"
ForeColor="Black" Width="36%">
<FooterStyle BackColor="Tan" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<RowStyle HorizontalAlign="Left" />
</asp:GridView>
<asp:Label ID="lblNoRecords" Text="No recprd found" runat="server" ForeColor="Red"></asp:Label>
</form>
</body>
</html>
Note : This page has not Page directives.
Step 3:
Pass the Given Below code in code Behind :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindGrid();
}
private void BindGrid()
{
DataTable dt = new DataTable();
DataColumn dc;
dc = new DataColumn();
dc.ColumnName = "ID";
dc.DataType = System.Type.GetType("System.Int32");
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "PlayerName";
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "100s";
dc.DataType = System.Type.GetType("System.Int32");
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "MatchPlayed";
dc.DataType = System.Type.GetType("System.Int32");
dt.Columns.Add(dc);
DataRow dr;
dr = dt.NewRow();
dr["ID"] = 1;
dr["PlayerName"] = "Virat Kohli";
dr["100s"] = 10;
dr["MatchPlayed"] = 100;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 2;
dr["PlayerName"] = "Sachin Tendulker";
dr["100s"] = 15;
dr["MatchPlayed"] = 990;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 3;
dr["PlayerName"] = "Yousuf Pathan";
dr["100s"] = 35;
dr["MatchPlayed"] = 3990;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 4;
dr["PlayerName"] = "RAM";
dr["100s"] = 22;
dr["MatchPlayed"] = 399;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 5;
dr["PlayerName"] = "Yuvraj Singh";
dr["100s"] = 10;
dr["MatchPlayed"] = 350;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 6;
dr["PlayerName"] = "Virender Sehwag";
dr["100s"] = 1;
dr["MatchPlayed"] = 399;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 7;
dr["PlayerName"] = "Kapil Dev";
dr["100s"] = 62;
dr["MatchPlayed"] = 300;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 8;
dr["PlayerName"] = "Kiran Morey";
dr["100s"] = 5;
dr["MatchPlayed"] = 700;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 9;
dr["PlayerName"] = "Ajay Jadeja";
dr["100s"] = 25;
dr["MatchPlayed"] = 199;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 10;
dr["PlayerName"] = "Parvinder Awana";
dr["100s"] = 20;
dr["MatchPlayed"] = 350;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 11;
dr["PlayerName"] = "Ajankya Rahane";
dr["100s"] = 12;
dr["MatchPlayed"] = 500;
dt.Rows.Add(dr);
gdRows.DataSource = dt;
gdRows.DataBind();
}