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
No comments:
Post a Comment