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.
HTML Markup
The HTML Markup consists of an ASP.Net GridView with BoundField columns. I have specified OnDataBound event of the GridView to dynamically add a row with TextBoxes for searching records in each column of GridView.
<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>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
Binding the GridView control
I have created a dynamic DataTable with some dummy data and it has been bind to the GridView control in Page Load event.
C#
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, "Rama devi","India");
dt.Rows.Add(2, "Jason steve", "America");
dt.Rows.Add(3, "Rajitha Ganesh", "India");
dt.Rows.Add(4, "Kshatriya Dev", "Australia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Adding a Row of TextBox for Searching Data
Inside the OnDataBound event
handler, I have created a new GridView Header Row with a TextBox in its
each Cell and then added this row to the GridView. These TextBoxes will
be used to search the respective GridView column on TextBox KeyPress
event.
You will notice that the CssClass property is set for each TextBox with value search_textbox, this has been done to apply the jQuery QuickSearch plugin client side using the jQuery CSS class selector.
C#
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);
}
Applying the jQuery QuickSearch Plugin
The jQuery QuickSearch Plugin is applied using the jQuery CSS class selector for each TextBox inside the GridView Header Row.
<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>
