Searching in gridview on during typing in textbox (Like Autoconplete)
CodeBehind="Default.aspx.cs" Inherits="GridviewSearch._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#MainContent_txtSearch').keyup(function () {
$("#MainContent_GridView1 tr:has(td)").hide();
var iCounter = 0;
//Get the search box value
var sSearchTerm = $('#MainContent_txtSearch').val();
//if nothing is entered then show all the rows.
if (sSearchTerm.length == 0) {
$("#MainContent_GridView1 tr:has(td)").show();
// Reset the bacgroud color of previously searched data
$("#MainContent_GridView1 tr:has(td)").children().each(function () {
$(this).css('color', 'black');
}); return false;
} //Iterate through all the td.
$("#MainContent_GridView1 tr:has(td)").children().each(function () {
var cellText = $(this).text().toLowerCase();
//Check if data matches
if (cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) {
$(this).parent().show();
$(this).css('color', 'blue');
iCounter++; return true;
} else {
$(this).css('color', 'black');
return true;
}
});
$('#MainContent_Label1').text('Record(s) ' + iCounter + ' found.');
}
);
});</script>
<h2>
Welcome to ASP.NET! </h2>
<p>
To learn more about ASP.NET visit
</p>
<p>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="return false;" />
</p>
<p>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</p>
</asp:Content>
In jquery script i have used Main_Content word with every controls ID, Actually When I am using controls in side the content placeholder at run time every controls id will be concatinated with this word.
This is the page load even of code behind which is just binding my grid, customize it acordingly-
protected void Page_Load(object sender, EventArgs e)
{ if (!IsPostBack)
{ string connectionString = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection(connectionString);
SqlCommand cmd = new SqlCommand("Select * from Albums;", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
Label1.Text = "Record(s) " + dt.Rows.Count + " found.";
}
}
No comments:
Post a Comment