Searching Inside the GridView Control

I was browsing the asp.net forums when I found a very interesting question. The question was how to search in a GridView control. If you think about it is a common practice to search the items in the database but when the items are already displayed in the GridView then why not search the GridView instead of making an expensive trip to the database. In this article I will demonstrate how to search in a GridView control.

Introduction:

I was browsing the asp.net forums when I found a very interesting question. The question was how to search in a GridView control. If you think about it is a common practice to search the items in the database but when the items are already displayed in the GridView then why not search the GridView instead of making an expensive trip to the database. In this article I will demonstrate how to search in a GridView control.

Populating the GridView Control:

Before I begin the article I would like to thank Dimitrios Markatos for his article "Highlighting Search Keywords in a DataGrid Web Control" which formed the basic for this article.

Okay, let's begin with populating the GridView Control. The BindData method given below is used to populate the GridView.

private void BindData()
    {
        string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true";
        SqlConnection myConnection = new SqlConnection(connectionString);
        SqlDataAdapter ad = new SqlDataAdapter("SELECT ProductID, ProductName FROM Products", myConnection);

        DataSet ds = new DataSet();
        ad.Fill(ds);

        GridView1.DataSource = ds;
        GridView1.DataBind();
    }

The above code uses the SqlDataAdapter to populate the DataSet and finally binds the DataSet to the GridView control.

Creating the Search Box:

The search box is no more then a simple TextBox. Check out the HTML code given below:

Enter Search String: <asp:TextBox ID="txtSearch" runat="server" />

Creating the HighlighText Method:

The next task is to create the HighlighText method which is responsible for highlighting the search text inside the GridView control.

protected string HighlightText(string searchWord,string inputText)
    {

        Regex expression = new Regex(searchWord.Replace(" ", "|"), RegexOptions.IgnoreCase);

        return expression.Replace(inputText, new MatchEvaluator(ReplaceKeywords));
    }

HighlighText takes two parameters which are searchWord and inputText. The searchWord is the text that we type in the search text box and the inputText contains the text which is being searched for the text. As, you can see in the above code that I am taking the help of the ReplaceKeywords method which is defined below:

public string ReplaceKeywords(Match m)
    {
        return "<span class='highlight'>" + m.Value + "</span>";
    }

The ReplaceKeywords method appends a style to the searched text and returns it to the calling method.

Configuring the GridView Control:

The last thing that you need to do is to configure the GridView control so that it uses the HighlightText method. Take a look at the code below in which I have used the HighlightText method on the "Product Name" column. The searchString is a protected class level string variable which contains the searchText inputted by the user in the search TextBox.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

        <Columns>

        <asp:TemplateField HeaderText="Product Name">
        <ItemTemplate>
       <%# HighlightText(searchString, (string) Eval("ProductName")) %>
        </ItemTemplate>

        </asp:TemplateField>

        </Columns>


        </asp:GridView>

Now,run the application and type something in the search TextBox and press the search button. As, soon as you press the button the GridView "ProductName" column will be searched for the search keyword and if it finds the search word it highlights it using the "highlight" css class.

Happy programming!

UPDATE: Many users ask me that how they can persist the search results while the GridView is in paging mode. This can easily be accomplished and I have explained the solution in my blog entry. Please check out the post by clicking the link below:

http://aspadvice.com/blogs/azamsharp/archive/2006/11/09/Searching-in-GridView-With-Paging-Enabled.aspx