Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

Highlight Search Text In Search Result In A Grid View In ASP.NET

Viewed:  1144 
Posted On:  29/01/2015 09:08:28 
How we can make highlight search text in Grid View Search Result? 

In this article I am going to explain how we can highlight our search keyword in search result in a Grid View.

Below is my Data Table from which I am fetching records.


Image 1.

Data in my Table.


Image 2.

My aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HighlightSearchText.aspx.cs" Inherits="HighlightSearchTextInGridView.HighlightSearchText" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <title>Highlighting Search Keyword in result</title>
    <form id="form1" runat="server">
            <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
                    <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue;">Enter Name To Search #:
                        <asp:TextBox ID="txtSearch" runat="server" />
                        <asp:Button ID="Button1" Text="Search" runat="server" OnClick="Search_Click" /></td>
                    <td style="text-align: left;">
                        <asp:GridView ID="GridViewStudent" runat="server" AutoGenerateColumns="False" AllowPaging="True" Width="100%"
                            OnRowDataBound="GridViewStudent_OnRowDataBound" OnPageIndexChanging="GridViewStudent_OnPageIndexChanging"
                            BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" GridLines="Both">
                                <asp:BoundField DataField="Name" HeaderText="Student Name" />
                                <asp:BoundField DataField="Class" HeaderText="Class" />
                                <asp:BoundField DataField="EnrollYear" HeaderText="Enroll Year" />
                                <asp:BoundField DataField="City" HeaderText="City" />
                                <asp:BoundField DataField="Country" HeaderText="Country" />
                            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
                            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
                            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
                            <RowStyle BackColor="White" ForeColor="#003399" />
                            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                            <SortedAscendingCellStyle BackColor="#EDF6F6" />
                            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
                            <SortedDescendingCellStyle BackColor="#D6DFDF" />
                            <SortedDescendingHeaderStyle BackColor="#002876" />

My aspx.cs code:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; 

namespace HighlightSearchTextInGridView
    public partial class HighlightSearchText : System.Web.UI.Page
        SqlDataAdapter da;
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        protected void Page_Load(object sender, EventArgs e)
            if (!Page.IsPostBack)
        protected void Search_Click(object sender, EventArgs e)
        private void BindGrid()
            SqlConnection con = new SqlConnection();
            ds = new DataSet();
            con.ConnectionString = @"Data Source=MYPC\SqlServer2k8; Initial Catalog=SchoolManagement; Integrated Security=true;";
            SqlCommand cmd = new SqlCommand("SELECT *  FROM Student WHERE Name Like '%" + txtSearch.Text + "%'", con);
            da = new SqlDataAdapter(cmd);
            if (ds.Tables[0].Rows.Count > 0)
                GridViewStudent.DataSource = ds.Tables[0];
        protected void GridViewStudent_OnPageIndexChanging(object sender, GridViewPageEventArgs e)
            GridViewStudent.PageIndex = e.NewPageIndex;
        protected void GridViewStudent_OnRowDataBound(object sender, GridViewRowEventArgs e)
            if (e.Row.RowType == DataControlRowType.DataRow)
                e.Row.Cells[0].Text = Regex.Replace(e.Row.Cells[0].Text, txtSearch.Text.Trim(), delegate(Match match)
                    return string.Format("<span style = 'background-color:green; color:white;'>{0}</span>", match.Value);
                }, RegexOptions.IgnoreCase);

Now Run the application:


Image 3.


Image 4.


Image 5.

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us