Change the color of the selected row of a grid view in asp.net c#

Question

I have a grid view to display a list of messages. Every row has a view button on click of which the further details of message can be seen in pop up box.

Now i want to change the color of the row once the message is read ie gray. Initially the color of the messages in the grid view will also differ.The read messages rows color should differ from unread. And once read the color will change permanently. Newly added rows messages which are unread must be of color(red) and read once another(gray).

    <asp:GridView CssClass="myGridStyle" class="gridview"  ID="showmsg" runat="server" AutoGenerateColumns="false" Width="970px"
            AlternatingRowStyle-BackColor = "#e6e6e6"   DataKeyNames ="mesg_id" GridLines="none">
            <Columns >
                  <asp:TemplateField ItemStyle-Width="150px"  ItemStyle-Height="30" HeaderStyle-HorizontalAlign="center"  HeaderText="From">
                <ItemTemplate  >
                 <asp:Label ID="lblfname"  align="center"  runat="server" Text='<%#Eval( "from_name") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField ItemStyle-Width="150px"  ItemStyle-Height="30" HeaderStyle-HorizontalAlign="center" HeaderText="Date">
                <ItemTemplate >
                 <asp:Label ID="lbldate" align="center"  runat="server" Text='<%#Eval( "sent_date","{0:M-dd-yyyy}") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>   

                <asp:TemplateField ItemStyle-Width="350px"   ItemStyle-Height="30" HeaderStyle-HorizontalAlign="center" HeaderText="Subject">
                <ItemTemplate>
                 <asp:Label ID="lblsub"  align="center" runat="server" Text='<%#Eval( "subject") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>   
                  <asp:TemplateField HeaderText=""  ItemStyle-Height="30" ItemStyle-Width="60px" >   
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkView"  align="center" Font-Size="14px" font-family="calibri" Text="View"  OnClick="lnkEdit_Click" runat="server"></asp:LinkButton>
                    </ItemTemplate>
              </asp:TemplateField>                       
     </Columns>  
            <emptydatatemplate>  <div style="text-align:center;font-weight:bold">You have not recieved any messages</div> 
           </emptydatatemplate>           
            <HeaderStyle BackColor="#929292" ForeColor="White"  />
            <RowStyle />
        </asp:GridView>
    <br/><br/><br/>    <asp:Button ID="btnShowPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>       
</td></tr>
</table></asp:Panel>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="269px" Width="400px" style="display:none" >
<table width="100%" style="border:Solid 3px gray; width:100%; height:100%;" cellpadding="0" cellspacing="0" >
<tr style="background-color: gray">
<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">Message Details</td>
</tr>
<tr>
<td align="left" class="style1" >
 <div >  &nbsp;&nbsp; From:</div>
</td>
<td class="style2">
<asp:Label ID="lblfrom" runat="server" Font-Size="20px"></asp:Label>
</td>
</tr>
<tr>
<td align="left" class="style3">
<div>  &nbsp;&nbsp; Message:</div>
</td>
<td class="style4">
<asp:Label ID="lblmsg" runat="server" Font-Size="20px"></asp:Label>
</td>
</tr>

<tr>
<td class="style5">
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="OK" Width="60px" />
</td>
</tr>
</table>

Please suggest what must be done.

Answer 1

You would have to store which messages have been read somewhere.

If this is done server side and considering the fact you are doing a postback when the 'lnkView' LinkButton is clicked you could use OnRowDataBound and set the color of the row there using the stored 'read' flag.

protected void GridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if(read)
    {
         e.Row.BackColor = System.Drawing.Color.Red;
    }
    else
    {
        e.Row.BackColor = System.Drawing.Color.Blue;
    }
}