In order to search GridView records (data) on TextBox KeyPress event, I am making use of jQuery QuickSearch Plugin which dynamically searches the GridView cells and filters out the unwanted rows and displays only the records (data) that matches the input search term.
Desingner Source Code :
Code Behind :
Desingner Source Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border:1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1"
HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White"
runat="server"
AutoGenerateColumns="false"
OnDataBound="OnDataBound">
<Columns>
<asp:BoundField DataField="Id"
HeaderText="Id"
ItemStyle-Width="30"
/>
<asp:BoundField DataField="Name"
HeaderText="Name"
ItemStyle-Width="100"
/>
<asp:BoundField DataField="Country"
HeaderText="Country"
ItemStyle-Width="100"
/>
</Columns>
</asp:GridView>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="quicksearch.js"></script>
<script type="text/javascript">
$(function () {
$('.search_textbox').each(function (i) {
$(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
'testQuery': function
(query, txt, row) {
return $(row).children(":eq("
+ i + ")").text().toLowerCase().indexOf(query[0].toLowerCase())
!= -1;
}
});
});
});
</script>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default :
System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new
DataTable();
dt.Columns.AddRange(new DataColumn[3] { new
DataColumn("Id",
typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond",
"United States");
dt.Rows.Add(2, "Jitendra Gangwar",
"India");
dt.Rows.Add(3, "Suzanne Mathews",
"France");
dt.Rows.Add(4, "Robert
Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void
OnDataBound(object sender, EventArgs e)
{
GridViewRow row = new
GridViewRow(0, 0, DataControlRowType.Header,
DataControlRowState.Normal);
for (int i = 0; i
< GridView1.Columns.Count; i++)
{
TableHeaderCell cell = new
TableHeaderCell();
TextBox txtSearch = new
TextBox();
txtSearch.Attributes["placeholder"]
= GridView1.Columns[i].HeaderText;
txtSearch.CssClass = "search_textbox";
cell.Controls.Add(txtSearch);
row.Controls.Add(cell);
}
GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
}
}
No comments:
Post a Comment