Link to home
Start Free TrialLog in
Avatar of winstalla
winstallaFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Highlight Search Terms in ASPX GridView

OK. There are probably better ways to present this data.
However, it works, so that will do! :)
Occasionally, a search term brings up multiple results that have that specific term in it, and I was wondering if the search term could be highlighted in the GridView.
e.g. if a person searched for Laptop, every time the word Laptop appeared in a search result it was highlighted.
My code is below. Please don't laugh!
    <form id="form1" runat="server">
                    <asp:TextBox ID="Search" runat="server" Width="200px" CssClass="textbox" AutoPostBack="true"></asp:TextBox>
                    <asp:Button ID="btnSearch" runat="server" Text="Search Hardware Records" />
                    <br />
            <div class="fullBox">
                <h1>Search Results</h1>
                <div class="text">
                    <asp:Label ID="errorMsg" runat="server"></asp:Label>
                    <asp:GridView ID="Results" runat="server"
                        DataSourceID="SearchStaff" GridLines="Both" ShowHeaderWhenEmpty="True"
                        CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AllowSorting="True" CellPadding="4" ForeColor="#333333">
                        <AlternatingRowStyle CssClass="alt" BackColor="White" ForeColor="#284775"></AlternatingRowStyle>
    SortExpression="ID" />
	<asp:BoundField DataField="Opened" HeaderText="Forename" 
                                SortExpression="Opened" />
                         <asp:BoundField DataField="Username" HeaderText="Surname" 
                                SortExpression="Username" />
                            <asp:BoundField DataField="Due" HeaderText="Make" 
                                SortExpression="Due" />
                            <asp:BoundField DataField="ICT" HeaderText="Serial" 
                                SortExpression="ICT" />
                            <asp:BoundField DataField="Details" HeaderText="Location" 
                                SortExpression="Details" />
			<asp:BoundField DataField="1" HeaderText="Model" 
                                SortExpression="1" />
                            <asp:BoundField DataField="2" HeaderText="Type" 
                                SortExpression="2" />
                            <asp:BoundField DataField="Acquired" HeaderText="Acquired" 
                                SortExpression="Acquired" DataFormatString="{0:d MMMM yyyy}" />
                            <asp:BoundField DataField="Expires" HeaderText="Expires" 
                                SortExpression="Expires" DataFormatString="{0:d MMMM yyyy}" />
                            <asp:BoundField DataField="Comments" HeaderText="Comments" 
                                SortExpression="Comments" />
                            <asp:CheckBoxField DataField="Retired" HeaderText="Retired" 
                                SortExpression="Retired" />
                        <EditRowStyle BackColor="#999999" />
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle CssClass="pgr" BackColor="#284775" ForeColor="White" HorizontalAlign="Center"></PagerStyle>
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#E9E7E2" />
                        <SortedAscendingHeaderStyle BackColor="#506C8C" />
                        <SortedDescendingCellStyle BackColor="#FFFDF8" />
                        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                    <asp:AccessDataSource ID="SearchStaff" runat="server"
                        SelectCommand="SELECT [ID] AS ID, [Forename] AS Opened, [Username] AS Username, [Make] AS Due, [Model] AS 1, [Serial] AS ICT, [Location] AS Details, [Acquired] AS Acquired, [Expires] AS Expires, [Comments] AS Comments, [Retired] AS Retired, [Type] AS 2 FROM [Requests] WHERE (([Forename] LIKE '%' + ? + '%') OR ([Username] LIKE '%' + ? + '%') OR ([Make] LIKE '%' + ? + '%') OR ([Model] LIKE '%' + ? + '%') OR ([Comments] LIKE '%' + ? + '%') OR ([Serial] LIKE '%' + ? + '%') OR ([Location] LIKE '%' + ? + '%') OR ([Type] LIKE '%' + ? + '%')) ORDER BY [ID]">
                            <asp:ControlParameter ControlID="Search" Name="Opened" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="Username" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="ICT" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="Due" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="1" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="Details" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="Comments" PropertyName="Text" 
                                Type="String" />
                            <asp:ControlParameter ControlID="Search" Name="2" PropertyName="Text" 
                                Type="String" />

Open in new window

Avatar of Tom Beck
Tom Beck
Flag of United States of America image

What matters is how you handle the search button click event. When the end user types in a search term and clicks the search button you want to re-bind the data to the gridview so you can manipulate the text it contains in RowDataBound. Something like this:
        protected void btnSearch_Click(object sender, EventArgs e)

        protected void Results_RowDataBound(object sender, GridViewRowEventArgs e)
            //be sure to sanitize the input before proceeding (code not shown).
            String searchTerm = this.Search.Text;
            if (searchTerm != "")
                if (e.Row.RowType == DataControlRowType.DataRow)
                    DataRow dr = ((DataRowView)e.Row.DataItem).Row;
                    string cellTxt = dr[2].ToString(); //Change to your database table column index
                    if (cellTxt.Contains(searchTerm))
                        string tempStr = cellTxt.Substring(0, cellTxt.IndexOf(searchTerm));
                        tempStr += "<span style=\"color:red\">" + searchTerm + "</span>";
                        tempStr += cellTxt.Substring(cellTxt.IndexOf(searchTerm) + searchTerm.Length);
                        e.Row.Cells[1].Text = tempStr; //Change to your GridView column index


Open in new window

Avatar of winstalla


Thank you for that. I think I get it.

However, I'm still finding my way around ASP.NET and, moreover, this script was written by another person (now departed) who also didn't know ASP.NET very well!

I get the idea behind the answer code - mostly. But I don't understand the phrase be sure to sanitize the input before proceeding and since the code for this is not shown, I'm not sure what I should be doing here.

Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Indeed. I think, having read again about this sort of thing, that worrying about highlighting text is probably not that high on the agenda at the moment! I'll look into better security for the data and worry about this sort of thing later! Thanks!