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

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

Article:
Viewed:  1043 
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.

1.png

Image 1.

Data in my Table.

2.png

Image 2.

My aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HighlightSearchText.aspx.cs" Inherits="HighlightSearchTextInGridView.HighlightSearchText" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Highlighting Search Keyword in result</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
                <tr>
                    <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>
                </tr>
                <tr>
                    <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">
                            <Columns>
                                <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" />
                            </Columns>
                            <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" />
                        </asp:GridView>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
 

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)
            {
                BindGrid();
            }
        }
 
        protected void Search_Click(object sender, EventArgs e)
        {
            this.BindGrid();
        }
 
        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);
            da.Fill(ds);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
 
            if (ds.Tables[0].Rows.Count > 0)
            {
                GridViewStudent.DataSource = ds.Tables[0];
                GridViewStudent.DataBind();
            }
        }
 
        protected void GridViewStudent_OnPageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            GridViewStudent.PageIndex = e.NewPageIndex;
            BindGrid();
        }
 
        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:

3.png

Image 3.

4.png

Image 4.

5.png

Image 5.

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