GridViewSelectedDataKey.aspx font size:
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>

<html>
<head>
<title>GridView SelectedDataKey Example</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<style type="text/css">
.desc {
   font:bold 11pt arial,verdana,sans-serif; background:khaki; 
   border:1px inset; padding:10; margin-bottom:10}
.features {
   font-size:9pt; background:#efefef;
   border:1px inset; padding-right:5; margin-bottom:10}
.specs {
   font-size:9pt; background:beige; 
   border:1px inset; padding-right:5}
</style>

<script language="C#" runat="server" src="fetchData_oledb.cs" />

<script language="C#" runat="server">
void Page_Load ( Object src, EventArgs e ) {
   if ( !IsPostBack ) {
      string query = "SELECT DISTINCT Type FROM Plans WHERE NOT Type=''";
      planTypes.DataSource = fetchData ( query, "plans" );
      planTypes.DataBind ( );
      getItems ( null, null );
   }
}

void getItems ( Object src, EventArgs e ) {
   string query = "SELECT top 10 PlanID, Model, Cost FROM Plans where Type='" + 
      planTypes.SelectedItem.Text + "' order by Cost desc";
   myGrid.DataSource = fetchData ( query, "plans" );
   myGrid.DataBind ( );
   // reset selection
   myGrid.SelectedIndex = -1;
}

void getSelected ( Object src, EventArgs e ) {
   string id = myGrid.SelectedDataKey.Value.ToString ( );
   string query = "Select* FROM Plans where PlanID = '" + id + "'";
   planDetails.DataSource = fetchData ( query, "plans" );
   planDetails.DataBind ( );
   ShowHidePanel ( null, null );
}

void ShowHidePanel ( Object src, EventArgs e ) {
   selectPanel.Visible = ! ( selectPanel.Visible );
   detailsPanel.Visible = ! ( detailsPanel.Visible );
}
</script>
</head>

<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>GridView <span class="hilite">SelectedDataKey</span> Example</h2></div>
<hr size=1 width=92%>

<div align="center">
<form runat="server">
<asp:panel id="selectPanel" runat="server">
   Select Design Type: <asp:dropdownlist id="planTypes" runat="server" 
      datatextfield="Type" onSelectedIndexChanged="getItems" autopostback />

   <p>

   <asp:gridview id="myGrid" runat="server"
      width=70% cellpadding=3 gridlines="horizontal"
      datakeynames="planid"
      autogeneratecolumns=false
      onSelectedIndexChanged="getSelected">

      <headerstyle backcolor="slategray" forecolor="khaki"
         font-name="Comic Sans MS" font-bold />

      <selectedrowstyle backcolor="lightgreen" />

      <columns>
         <asp:templatefield>
            <itemtemplate>
               <asp:imagebutton width=75 runat="server" commandname="select" 
                  imageurl='<%# Eval ( "PlanID", "~/shared/images/plans/thumbs/{0}.jpg" ) %>'
                  alt='<%# Eval ( "Model" ) %>' />
            </itemtemplate>
         </asp:templatefield>

         <asp:templatefield headertext="Choose your dream home">
            <itemtemplate>
               <asp:linkbutton runat="server" commandname="select" 
                  text='<%# Eval ( "Model" ) %>' />
            </itemtemplate>
         </asp:templatefield>

         <asp:boundfield headertext="Avg. Cost To Build"
            datafield="Cost"
            dataformatstring="{0:c}"
            itemstyle-horizontalalign="right" />
            
      </columns>

   </asp:gridview>

</asp:panel>

<asp:panel id="detailsPanel" visible=false runat="server">
   <div class="small"><asp:linkbutton onClick="ShowHidePanel" text="Back To List" runat="server" /></div>

   <p>

   <asp:formview id="planDetails" width=95% runat="server">
      <itemtemplate>
         <table width=100%>
         <tr valign="top">
            <td><div class="header"><h3 style="color:maroon"><%# Eval ( "Model" ) %></h2></div></td>
            <td align="right"><div class="header"><h2>Plan # <%# Eval ( "PlanID" ) %></h2></div></td></tr>
         </table>

         <table width=100% cellpadding=10 style="background:ddd; border:2px outset">
         <tr valign="top">
            <td align="center" width=290>
               <img width=290 runat="server" 
                  src='<%# Eval ( "PlanID", "~/shared/images/plans/{0}.jpg" ) %>'
                  alt='<%# Eval ( "Model" ) %>'
                  style="border:1px inset">
               <br>
               <table width=90% class="data" cellspacing=0 
                  style="font-size:8pt; text-align:center; border:1px inset">
               <tr><th><%# Eval ( "Design" ) %></th></tr>
               <tr><td><%# Eval ( "Area" ) %> ft<sup>2</sup>, <%# Eval ( "Bedrooms" ) %> Bedrooms, <%# Eval ( "Baths" ) %> Baths
                  <p>National Average Cost to Build: <br>
                  <b style="color:maroon"><%# Eval ( "Cost", "{0:c}" ) %></b></td></tr>
               </table>
            </td>
            <td>
               <div class="desc"><%# Eval ( "Description" ) %></div>
               <div class="features"><%# Eval ( "Features" ) %></div>
               <div class="specs"><%# Eval ( "Specs" ) %></div>
            </td></tr>
         </table>
      </itemtemplate>

   </asp:formview>

   <p>

   <div class="small"><asp:linkbutton onClick="ShowHidePanel" text="Back To List" runat="server" /></div>

</asp:panel>

</form>
</div>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>