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


Comments

  1. dude...please provide quicksearch.js

    ReplyDelete
    Replies
    1. http://code.ohloh.net/file?fid=wDFv9M38tty3QK3iBh41ttwC59w&cid=1yoYKgxB7fA&s=&fp=298140&mp&projSelected=true#L0

      Delete
  2. Hi, Is it possible to search in all the gridview columns with only one textbox

    ReplyDelete
    Replies
    1. Goto this link, it will be helpful :: http://www.aspdotnet-suresh.com/2011/12/search-records-in-gridview-and.html

      Delete
    2. Thanks for your help, I think that this is also searching in one column.

      Delete
    3. You search all column add condition

      Delete
  3. How do I connect this to my exiting SQL Table? Can you please pot the code snippet? Thanks and I appreciate your help.

    ReplyDelete
  4. I 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?

    thanx in advance

    ReplyDelete
  5. not working on controls postback..!

    ReplyDelete
  6. Not working with gridview having paging..

    ReplyDelete
  7. QuickSearch 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?

    ReplyDelete

Post a Comment

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image