Hi fiends,in this article I will explain about How to Search
GridView records (data) on TextBox KeyPress using jQuery in ASP.NET using
C#/VB.NET
For searching Gridview records I used the jQuery QuickSearch Plugin.
The jQuery QuickSearch
Plugin is applied using the jQuery CSS class selector for each TextBox inside
the GridView Header Row.
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search
GridView records (data) on TextBox KeyPress using jQuery in ASP.NET using
C#/VB.NET
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/Quicksearch.js"></script>
<script type="text/javascript">
$(function () {
$('.search_textbox').each(function
(i) {
$(this).quicksearch("[id*=gvData]
tr:not(:has(th))", {
'testQuery': function
(query, txt, row) {
return $(row).children(":eq("
+ i + ")").text().toLowerCase().indexOf(query[0].toLowerCase())
!= -1;
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvData"
runat="server"
BackColor="White"
BorderColor="#CC9966"
AutoGenerateColumns="false"
BorderStyle="Solid"
BorderWidth="1px"
CellPadding="4"
Font-Names="Georgia"
Font-Size="Small"
Width="475px"
OnDataBound="OnDataBound">
<Columns>
<asp:BoundField DataField="EMP_ID"
HeaderText="EMP
ID" />
<asp:BoundField DataField="EMP_Name"
HeaderText="EMP
Name" />
</Columns>
<FooterStyle BackColor="Tan"
/>
<AlternatingRowStyle
BackColor="#E6E6E1"
/>
<FooterStyle BackColor="#FFFFCC"
ForeColor="#330099"
/>
<HeaderStyle BackColor="#990000"
Font-Bold="True"
ForeColor="#FFFFCC"
/>
</asp:GridView>
</div>
</form>
</body>
</html>
|
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.
In C#:
using System.Data;
public partial class SearchGridTextnoxKeypress : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new
DataTable();
dt.Columns.AddRange(new DataColumn[2] { new
DataColumn("EMP_ID"),
new DataColumn("EMP_Name") });
dt.Rows.Add("1", "Kishore");
dt.Rows.Add("2", "SambaSiva");
dt.Rows.Add("3", "Satyam");
dt.Rows.Add("4", "Raghava");
dt.Rows.Add("5", "Nag");
ViewState["dt"] = dt;
BindGridData();
}
}
protected
void BindGridData()
{
gvData.DataSource =
ViewState["dt"] as DataTable;
gvData.DataBind();
}
protected
void OnDataBound(object
sender, EventArgs e)
{
GridViewRow row = new
GridViewRow(0, 0, DataControlRowType.Header,
DataControlRowState.Normal);
for (int i = 0; i
< gvData.Columns.Count; i++)
{
TableHeaderCell cell = new
TableHeaderCell();
TextBox txtboxSearch = new
TextBox();
txtboxSearch.Attributes["placeholder"]
= gvData.Columns[i].HeaderText;
txtboxSearch.CssClass = "search_textbox";
cell.Controls.Add(txtboxSearch);
row.Controls.Add(cell);
}
gvData.HeaderRow.Parent.Controls.AddAt(1, row);
}
}
|
In VB.NET:
Imports System.Data
Partial Public Class SearchGridTextnoxKeypress
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(sender As
Object, e As EventArgs)
If Not IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(1) {New
DataColumn("EMP_ID"),
New DataColumn("EMP_Name")})
dt.Rows.Add("1", "Kishore")
dt.Rows.Add("2", "SambaSiva")
dt.Rows.Add("3", "Satyam")
dt.Rows.Add("4", "Raghava")
dt.Rows.Add("5", "Nag")
ViewState("dt") = dt
BindGridData()
End If
End
Sub
Protected
Sub BindGridData()
gvData.DataSource = TryCast(ViewState("dt"),
DataTable)
gvData.DataBind()
End
Sub
Protected
Sub OnDataBound(sender As Object, e As EventArgs)
Dim row As New GridViewRow(0,
0, DataControlRowType.Header, DataControlRowState.Normal)
For i As Integer = 0 To
gvData.Columns.Count - 1
Dim cell As New TableHeaderCell()
Dim txtboxSearch As
New TextBox()
txtboxSearch.Attributes("placeholder")
= gvData.Columns(i).HeaderText
txtboxSearch.CssClass = "search_textbox"
cell.Controls.Add(txtboxSearch)
row.Controls.Add(cell)
Next
gvData.HeaderRow.Parent.Controls.AddAt(1, row)
End
Sub
End Class
|
The output of the above code as shown in the below figure.
%2Bon%2BTextBox%2BKeyPress%2Busing%2BjQuery%2Bin%2BASP.jpg)
%2Bon%2BTextBox%2BKeyPress%2Busing%2BjQuery%2Bin%2BASP2.jpg)
When I search with EMP ID then its showing the corresponding records.
%2Bon%2BTextBox%2BKeyPress%2Busing%2BjQuery%2Bin%2BASP3.jpg)
You can download the code by clicking on the below Download image.
Hi Thanks a lot..
ReplyDeleteits workining for me.. but i want to get the each row of the grid view after filter in text box when click on Save button .so can u plz help me.
Hi Sarvesh Nemalikanti,
DeleteAdd checkbox ine ach row and Maintain the state of checkboxes
Refer below links
http://aspdotnet-kishore.blogspot.in/2014/04/maintain-state-of-checkbox-after.html
http://aspdotnet-kishore.blogspot.in/2014/04/how-to-maintain-selected-checkboxes.html
This is exactly what I need. I got it working, but when I filter on one column then try to further filter on another, the first column's filter is lost. Please advise.
ReplyDeletecan we filter the data of first page from the last page??????
ReplyDelete