Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Codes Author
Thu, 28-Aug-2014 Authors
All Time Authors
Satyapriyanayak
12160
Jayakumars
8120
Niladri.biswas
6000

Latest members | More ...


(Statistics delayed by 5 minutes)
 Codes

How to Search Contents of Gridview Using Jquery

Sunil Soni
Posted by Sunil Soni under ASP.NET AJAX on 4/27/2012 2:20:43 AM | Points: 40 | Views : 3320 | Status : [Member]

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>

&nbsp;

<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();

}


Found interesting? Add this to:



Comments or Responses


Login to post response