Add text highlighting in ASP.NET 2.0 GridView

I built an ASP.NET 2.0 web application [for the company I work for] that streamlined the deployment process to our production environment. It processed, tracked, archived, and notified automatically on each step of the deployment process.

So with that in mind, I’ll be showing you how to add text highlighting in a GridView; for example, a Date & Time column (i.e., red=overdue, green=still OK), which, at work, presented to the the technical group if a deployment was late or not. =0)

Here’s a screenshot:

Fig. 1.1 – Text highlighting in ASP.NET 2.0 GridView

Text highlighting in ASP.NET GridView

Adding this feature is quite easy. The first thing you’ll need to do is add a RowDataBound event in the GridView code:

<font size="2"><span style="color: #0000ff">&lt;</span><span style="color: #a31515">asp</span><span style="color: #0000ff">:</span><span style="color: #a31515">GridView</span> <span style="color: #ff0000">OnRowDataBound</span><span style="color: #0000ff">="GridView_RowDataBound"&gt;</span></font>

The second thing is add an ASP label within an ASP template field, like so:
<font size="2"><span style="color: #0000ff">&lt;</span><span style="color: #a31515">asp</span><span style="color: #0000ff">:</span><span style="color: #a31515">TemplateField</span> <span style="color: #ff0000">HeaderText</span><span style="color: #0000ff">="Date &amp; Time"</span>

            <span style="color: #ff0000">SortExpression</span></font><font size="2"><span style="color: #0000ff">="TargetDateTime"&gt;

</span>    <span style="color: #0000ff">&lt;</span><span style="color: #a31515">ItemTemplate</span></font><font size="2"><span style="color: #0000ff">&gt;

</span>        <span style="color: #0000ff">&lt;</span><span style="color: #a31515">asp</span><span style="color: #0000ff">:</span><span style="color: #a31515">Label</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="lblTargetDateTime"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span>

                <span style="color: #ff0000">Text</span><span style="color: #0000ff">='</span><span style="background: #ffee62 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial">&lt;%</span># Eval("TargetDateTime") <span style="background: #ffee62 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial">%&gt;<span style="color: #0000ff"></span>'</span> </font><font size="2"><span style="color: #0000ff">/&gt;

</span>    <span style="color: #0000ff">&lt;/</span><span style="color: #a31515">ItemTemplate</span></font><font size="2"><span style="color: #0000ff">&gt;

</span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">asp</span><span style="color: #0000ff">:</span><span style="color: #a31515">TemplateField</span><span style="color: #0000ff">&gt;</span></font>

Pretty simple so far, ‘ey?  Now, to the last bread-and-butter step, the code-behind file:

<font size="2"><span style="color: #0000ff">using</span> System.Drawing;</font><font size="2">
</font><span style="color: #0000ff"><font size="2">private</font></span><font size="2"> <span style="color: #0000ff">void</span> GridView_RowDataBound(<span style="color: #0000ff">object</span> sender,

        <span style="color: #2b91af">GridViewRowEventArgs</span> e)

{

    </font><font size="2"><span style="color: #008000">// Find control to add text highlighting

</span>    <span style="color: #0000ff">if</span> (e.Row.RowType == <span style="color: #2b91af">DataControlRowType</span>.DataRow)

    {

        </font><font size="2"><span style="color: #008000">// Create Label datatype then cast and assign control

</span>        <span style="color: #2b91af">Label</span> dateTimeType =

            (<span style="color: #2b91af">Label</span>)e.Row.FindControl(<span style="color: #a31515">"lblTargetDateTime"</span>);</font>

<font size="2">
</font><font size="2">        </font><font size="2"><span style="color: #008000">// Instantiate new DateTime object

</span>        <span style="color: #2b91af">DateTime</span> dateTime = <span style="color: #0000ff">new</span> <span style="color: #2b91af">DateTime</span>();

        dateTime = <span style="color: #2b91af">Convert</span>.ToDateTime(dateTimeType.Text);</font>

<font size="2">
</font><font size="2">        </font><font size="2"><span style="color: #008000">// Set coloring based on date and time

</span>        <span style="color: #0000ff">if</span> (<span style="color: #2b91af">DateTime</span>.Compare(dateTime, <span style="color: #2b91af">DateTime</span>.Today) &gt;= 0)

            dateTimeType.BackColor = Color.LawnGreen;

        </font><font size="2"><span style="color: #0000ff">else

</span>            dateTimeType.BackColor = Color.Red;

    }

}</font>

That’s it! Using text highlighting in your GridView not only makes it look “pretty,” but also emphasizes a record’s importance based on colors.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.