ASP.Net GridView: Perform Search in multiple columns in Quicksearch plugin

Hi tcpancard9393,

I will get back to you soon.

tcpancard9393 says:

How can I perform search in combination of more than one search column

How you want to perform the search functionality?

Do you want to search with only one TextBox or each header TextBox will look for data in all columns?

Please explain in details.

I want to perform a individual column search on a gridviews but filtered rows are shown as per input text of all columns or combination of columns search using jQuery Quicksearch plugin.

Hi tcpancard9393,

Refer below code.

HTML

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="100" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="quicksearch.js"></script>
<script type="text/javascript">
    $(function () {
        $('.search_textbox').each(function (i) {
            $('.search_textbox').removeAttr('placeholder');
            $(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
                'testQuery': function (query, txt, row) {
                    return (($(row).children(":eq(0)").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1)
                        || ($(row).children(":eq(1)").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1)
                        || ($(row).children(":eq(2)").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1));
                }
            });
        });
    });
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void OnDataBound(object sender, EventArgs e)
{
    GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
    for (int i = 0; i < GridView1.Columns.Count; i++)
    {
        TableHeaderCell cell = new TableHeaderCell();
        TextBox txtSearch = new TextBox();
        txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
        txtSearch.CssClass = "search_textbox";
        cell.Controls.Add(txtSearch);
        row.Controls.Add(cell);
    }
    GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Id", GetType(Integer)),
                            New DataColumn("Name", GetType(String)),
                            New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
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 GridView1.Columns.Count - 1
        Dim cell As New TableHeaderCell()
        Dim txtSearch As New TextBox()
        txtSearch.Attributes("placeholder") = GridView1.Columns(i).HeaderText
        txtSearch.CssClass = "search_textbox"
        cell.Controls.Add(txtSearch)
        row.Controls.Add(cell)
    Next
    GridView1.HeaderRow.Parent.Controls.AddAt(1, row)
End Sub

Screenshot

Hi tcpancard9393,

Did you get the solution from above sample code?