Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#
First of all add the following .js file, Link and the JavaScript to your <Head> tag ::
<head runat="server">
<title></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*=gvDetails] tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
});
</script>
</head>
// This Script dynamically searches the GridView cells and filters out the unwanted rows and displays only the records that matches the input search term.
Now add the following code inside your <Body> tag ::
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" HeaderStyle-BackColor="AliceBlue"
AutoGenerateColumns="false"
HeaderStyle-ForeColor="Black" runat="server"
ondatabound="gvDetails_DataBound">
<Columns>
<asp:BoundField DataField="UserId" HeaderText="User Id" ItemStyle-Width="50" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Designation" HeaderText="Designation" ItemStyle-Width="200" />
<asp:BoundField DataField="Department" HeaderText="Department" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
</div>
</form>
And finally add the following code in the code page ::
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 SearchInGridViewRowaspx : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
gvDetails.Columns[4].Visible = false;
gvDetails.DataSource = this.getData();
gvDetails.DataBind();
}
private DataTable getData()
{
if (ViewState["Details"] != null)
return (DataTable)ViewState["Details"];
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Designation", typeof(string));
dt.Columns.Add("Department", typeof(string));
DataRow dr = dt.NewRow();
dr["UserId"] = 101;
dr["Name"] = "Zaheer";
dr["Designation"] = "Associate Technical Consultant";
dr["Department"] = ".Net";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 12;
dr["Name"] = "Anish";
dr["Designation"] = "Technical Consultant";
dr["Department"] = "CRM";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 113;
dr["Name"] = "Manish";
dr["Designation"] = "Navision Consultant";
dr["Department"] = "Navision";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 4;
dr["Name"] = "Ravish";
dr["Designation"] = "Tech Lead";
dr["Department"] = "CRM";
dt.Rows.Add(dr);
ViewState["Details"] = dt;
return dt;
}
// Below a new header having textbox in each cell is created and added to gridview.
// KeyPress event of textbox on each column is used to search data in respective column
// CssClass property is set for each TextBox with value "search_textbox" to apply the jQuery QuickSearch plugin client side using the jQuery CSS class selector.
protected void gvDetails_DataBound(object sender, EventArgs e)
{
GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
for (int i = 0; i < gvDetails.Columns.Count - 1; i++)
{
TableHeaderCell cell = new TableHeaderCell();
TextBox txtSearch = new TextBox();
txtSearch.Attributes["placeholder"] = gvDetails.Columns[i].HeaderText;
txtSearch.CssClass = "search_textbox";
cell.Controls.Add(txtSearch);
row.Controls.Add(cell);
}
gvDetails.HeaderRow.Parent.Controls.AddAt(1, row);
}
}
Link for quciksearch.js ::
Click here to get "QuickSearch.js" file. Just copy text and save file as "quicksearch.js"
Or, Visit this link::
https://github.com/riklomas/quicksearch/blob/master/jquery.quicksearch.js
<head runat="server">
<title></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*=gvDetails] tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
});
</script>
</head>
// This Script dynamically searches the GridView cells and filters out the unwanted rows and displays only the records that matches the input search term.
Now add the following code inside your <Body> tag ::
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" HeaderStyle-BackColor="AliceBlue"
AutoGenerateColumns="false"
HeaderStyle-ForeColor="Black" runat="server"
ondatabound="gvDetails_DataBound">
<Columns>
<asp:BoundField DataField="UserId" HeaderText="User Id" ItemStyle-Width="50" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Designation" HeaderText="Designation" ItemStyle-Width="200" />
<asp:BoundField DataField="Department" HeaderText="Department" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
</div>
</form>
And finally add the following code in the code page ::
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 SearchInGridViewRowaspx : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
gvDetails.Columns[4].Visible = false;
gvDetails.DataSource = this.getData();
gvDetails.DataBind();
}
private DataTable getData()
{
if (ViewState["Details"] != null)
return (DataTable)ViewState["Details"];
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Designation", typeof(string));
dt.Columns.Add("Department", typeof(string));
DataRow dr = dt.NewRow();
dr["UserId"] = 101;
dr["Name"] = "Zaheer";
dr["Designation"] = "Associate Technical Consultant";
dr["Department"] = ".Net";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 12;
dr["Name"] = "Anish";
dr["Designation"] = "Technical Consultant";
dr["Department"] = "CRM";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 113;
dr["Name"] = "Manish";
dr["Designation"] = "Navision Consultant";
dr["Department"] = "Navision";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 4;
dr["Name"] = "Ravish";
dr["Designation"] = "Tech Lead";
dr["Department"] = "CRM";
dt.Rows.Add(dr);
ViewState["Details"] = dt;
return dt;
}
// Below a new header having textbox in each cell is created and added to gridview.
// KeyPress event of textbox on each column is used to search data in respective column
// CssClass property is set for each TextBox with value "search_textbox" to apply the jQuery QuickSearch plugin client side using the jQuery CSS class selector.
protected void gvDetails_DataBound(object sender, EventArgs e)
{
GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
for (int i = 0; i < gvDetails.Columns.Count - 1; i++)
{
TableHeaderCell cell = new TableHeaderCell();
TextBox txtSearch = new TextBox();
txtSearch.Attributes["placeholder"] = gvDetails.Columns[i].HeaderText;
txtSearch.CssClass = "search_textbox";
cell.Controls.Add(txtSearch);
row.Controls.Add(cell);
}
gvDetails.HeaderRow.Parent.Controls.AddAt(1, row);
}
}
Link for quciksearch.js ::
Click here to get "QuickSearch.js" file. Just copy text and save file as "quicksearch.js"
Or, Visit this link::
https://github.com/riklomas/quicksearch/blob/master/jquery.quicksearch.js
dude...please provide quicksearch.js
ReplyDeletehttp://code.ohloh.net/file?fid=wDFv9M38tty3QK3iBh41ttwC59w&cid=1yoYKgxB7fA&s=&fp=298140&mp&projSelected=true#L0
DeleteHi, Is it possible to search in all the gridview columns with only one textbox
ReplyDeleteGoto this link, it will be helpful :: http://www.aspdotnet-suresh.com/2011/12/search-records-in-gridview-and.html
DeleteThanks for your help, I think that this is also searching in one column.
DeleteYou search all column add condition
DeleteHow do I connect this to my exiting SQL Table? Can you please pot the code snippet? Thanks and I appreciate your help.
ReplyDeleteI added a editing button to my gridview and when i click it the searchboxes that were created by the databound event disappear, how should i solved this issue?
ReplyDeletethanx in advance
not working on controls postback..!
ReplyDeleteNot working with gridview having paging..
ReplyDeleteQuickSearch is searching fine.. But if the Gridview is having paging, then it is only searching for the single Gridview page. is it able to search in all rows of Gridview beyond the paging?
ReplyDeletePlease Answer Durai question
DeleteThank You and that i have a super give: Full House Reno renovate my house
ReplyDelete