Description:
My requirement is, i have the webpage with
search textbox and gridview. While typing text in the textbox, gridview should
filter and it should display the relevant searched textbox record.
I have used keyup() event with DOM,
it will searches the gridview data and filters out the unrelated data and
displays only the matches record with the input search values.
In keyup() method, I am calling AJAX method
to retrieve data based on the input search values. AJAX method will return the relevant
data that will bind with gridview using JQuery.
While calling AJAX method through JQuery,
the method should be static and it should be web method.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtSearchgrid').keyup(function () {
var input = $('#txtSearchgrid').val();
$("#Gridview1").empty();
$.ajax({
type: "POST",
url: "Gridviewsearch.aspx/GetRecords",
data: "{'input': '" + input + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function successcall(response) {
for (var i = 0; i <
response.d.length; i++) {
$("#Gridview1").append("<tr>" + "<td>" + response.d[i].Id + " </td>" + "<td>" +
response.d[i].Name + "
</td>" + "<td>" +
response.d[i].Age + "</td>" + "</tr>");
}
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Gridview Search:
<asp:TextBox ID="txtSearchgrid" runat="server" />
<hr />
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Age" HeaderText="Age" />
</Columns>
</asp:GridView>
<br />
<div>
</div>
</div>
</form>
</body>
</html>
Code-Behind:
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection
con = new SqlConnection("Data Source=----;Initial Catalog=dbname;User ID=uid;Password=pwd;");
SqlCommand cmd = new SqlCommand("select
* from tablename", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
Gridview1.DataSource = ds;
Gridview1.DataBind();
}
[System.Web.Services.WebMethod]
public static clsTable[] GetRecords(string input)
{
List<clsTable> obj = new List<clsTable>();
DataTable dt = new DataTable();
string UserStatus = string.Empty;
SqlConnection con = new SqlConnection("Data
Source=----;Initial Catalog=dbname;User ID=uid;Password=pwd;");
con.Open();
SqlCommand cmd = new SqlCommand("select
* from tablename where Name like '" +
input + "%'", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
clsTable ClsObj = null;
foreach (DataRow tblerow in dt.Rows)
{
ClsObj = new clsTable();
ClsObj.Id = Convert.ToInt32(tblerow["Id"]);
ClsObj.Name = tblerow["Name"].ToString();
ClsObj.Age = Convert.ToInt32(tblerow["Age"]);
obj.Add(ClsObj);
}
return obj.ToArray();
}
public class clsTable
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
Search records in gridview using Jquery , How to
search gridview records on textbox keypress using Jquery , Search gridview
records while typing in textbox, Jquery gridview search . How to search
contents of gridview using Jquery, Search inside gridview using Jquery
0 comments:
Post a Comment