Friday, 10 October 2014

Search GridView records (data) on TextBox KeyPress using jQuery in ASP.NET using C#/VB.NET

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.

When I search with EMP Name then its showing the corresponding records.

When I search with EMP ID then its showing the corresponding records.
You can download the code by clicking on the below Download image. 


"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."

4 comments:

  1. Hi Thanks a lot..
    its 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.

    ReplyDelete
    Replies
    1. Hi Sarvesh Nemalikanti,

      Add 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

      Delete
  2. 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.

    ReplyDelete
  3. can we filter the data of first page from the last page??????

    ReplyDelete

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.