上述范例利用点选使用者姓名的方式，来呈现该使用者所购买过的东西，这样的使用者接口还不够美观及直觉。接下来我们利用图示以来表示被点选到的字段为何，并将被点选到的字段以蓝底白字显示，如下图所示：
<%@Import Namespace=System.Data%>
<%@Import Namespace=System.Data.ADO%>
<html>
<Form Runat="Server">
<ASP:DataGrid Id="dgA" AllowPaging="True" PageSize="5"
OnPageIndexChanged="dgA_PageChg" Runat="Server"
PagerStyle-Mode="NumericPages" BorderColor="#808080"
HeaderStyle-Font-Names="Courier New"
HeaderStyle-BackColor="#D1DCEB"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
AutoGenerateColumns="False"
OnItemCommand="dgA_ICmd"
alternatingitemstyle-backcolor="#ffff99">
<Property Name="PagerStyle">
<ASP:DataGridPagerStyle
HorizontalAlign="Center" BackColor="Gainsboro"
PageButtonCount="4" Mode="NumericPages"/></Property>
<Property Name="AlternatingItemStyle">
<ASP:TableItemStyle ForeColor="Black"
BackColor="Gainsboro"/></Property>
<Property Name="SelectedItemStyle">
<ASP:TableItemStyle ForeColor="White" BackColor="Blue"
Font-Bold="True"/></Property>
<Property Name="ItemStyle">
<ASP:TableItemStyle ForeColor="#000040"/></Property>
<Property Name="HeaderStyle">
<ASP:TableItemStyle Font-Names="Courier New" Font-Bold="True"
HorizontalAlign="Center"
BackColor="#D1DCEB"/></Property>
<Property Name="Columns">
<ASP:ButtonColumn Text="<Img Border=0 Src=select.gif>" HeaderText="选
择"
ItemStyle-HorizontalAlign="Center"/>
<ASP:BoundColumn DataField="UserName" HeaderText="姓名"/>
<ASP:BoundColumn DataField="UserTel" HeaderText="电话"/>
<ASP:BoundColumn DataField="UserAdd" HeaderText="住址"/>
<ASP:BoundColumn DataField="UserEmail" HeaderText="电邮"/>
</Property>
</ASP:DataGrid><p>
<ASP:DataGrid Id="dgB" Runat="Server"
PagerStyle-Mode="NumericPages" BorderColor="#808080"
HeaderStyle-Font-Names="Courier New"
HeaderStyle-BackColor="#D1DCEB"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
AutoGenerateColumns="False" backcolor="Transparent" >
<Property Name="PagerStyle">
<ASP:DataGridPagerStyle Mode="NumericPages"/>
</Property>
<Property Name="AlternatingItemStyle">
<ASP:TableItemStyle ForeColor="Black" BackColor="Gainsboro"/>
</Property>
<Property Name="ItemStyle">
<ASP:TableItemStyle ForeColor="#000040" BackColor="White"/>
</Property>
<Property Name="HeaderStyle">
<ASP:TableItemStyle Font-Names="新细明体" Font-Bold="True"
HorizontalAlign="Center" BackColor="#D1DCEB"/>
</Property>
<Property Name="Columns">
<ASP:BoundColumn DataField="OrderDate" HeaderText="日期"
DataFormatString="{0:d}"/>
<ASP:BoundColumn DataField="ProductName" HeaderText="产品名称"/>
<ASP:BoundColumn DataField="UnitPrice" HeaderText="单价"
DataFormatString="NT${0:N0}"/>
<ASP:BoundColumn DataField="Quantity" HeaderText="数量"/>
<ASP:BoundColumn DataField="Total" HeaderText="小计"
DataFormatString="NT${0:N0}"/>
</Property>
</ASP:DataGrid>
</Form>
<ASP:Label Id="Label1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Dim dscA As ADODataSetCommand=New ADODataSetCommand("Select * From
Members", _
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source=C:InetPubwwwrootCRCh08MyWeb.Mdb")
Dim dsDataSet As DataSet=New DataSet
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False Then
dscA.SelectCommand.CommandText="Select * From Members"
dscA.FillDataSet(dsDataSet, "Members")
dgA.DataSource=dsDataSet.Tables("Members").DefaultView
dgA.DataBind()
End If
DgA.SelectedIndex=-1
Label1.Text="您目前没有点选任何记录."
End Sub
Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
dscA.FillDataSet(dsDataSet, "Members")
dgA.DataSource=dsDataSet.Tables("Members").DefaultView
dgA.DataBind()
dgB.Visible=False
End Sub
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
If e.Item.ItemIndex>-1 Then
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
dgA.SelectedIndex=e.Item.ItemIndex
Dim dgiA As DataGridItem=dgA.SelectedItem
Dim celSel As TableCell = dgiA.Controls(0)
celSel.Text="<Img Border=0 Src=open.gif>"
dscA.FillDataSet(dsDataSet, "Members")
dscA.SelectCommand.CommandText="Select * From Orders Where
UserId='" & _
dsDataSet.Tables("Members").Rows(shtR)("UserId") & "'"
dscA.FillDataSet(dsDataSet, "Orders")
dgB.DataSource=dsDataSet.Tables("Orders").DefaultView
dgB.DataBind()
dgB.Visible=True
Label1.Text="总共有" & dsDataSet.Tables("Orders").Rows.Count & "
笔记录"
Else
DgA.SelectedIndex=-1
End If
End Sub
</SCRIPT>
</html>
上述程序代码中，我们定义了SelectedItemStyle 属性，并设定其前景色为白色、背景色为蓝色，以及字型为粗体；如下程序代码范例所示：
<Property Name="SelectedItemStyle">
<ASP:TableItemStyle ForeColor="White" BackColor="Blue"
Font-Bold="True"/></Property>
然后我们增加一个ButtonColumn 字段，并设定其Text 属性为「"<Img Border=0Src=select.gif>"」，这样的结果会让字段显示图钉的影像，如下程序代码片段所示：
<Property Name="Columns">
<ASP:ButtonColumn Text="<Img Border=0 Src=select.gif>" HeaderText="选
择"
ItemStyle-HorizontalAlign="Center"/>
<ASP:BoundColumn DataField="UserName" HeaderText="姓名"/>
<ASP:BoundColumn DataField="UserTel" HeaderText="电话"/>
<ASP:BoundColumn DataField="UserAdd" HeaderText="住址"/>
<ASP:BoundColumn DataField="UserEmail" HeaderText="电邮"/>
</Property>
接下来就要处理使用者点选图形的动作了。我们设定OnItemCommand 属性为dgA_ICmd，所以当使用者点选图形时便执行下列程序：
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
If e.Item.ItemIndex>-1 Then
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
dgA.SelectedIndex=e.Item.ItemIndex
Dim dgiA As DataGridItem=dgA.SelectedItem
Dim celSel As TableCell = dgiA.Controls(0)
celSel.Text="<Img Border=0 Src=open.gif>"
dscA.FillDataSet(dsDataSet, "Members")
dscA.SelectCommand.CommandText="Select * From Orders Where
UserId='" & _
dsDataSet.Tables("Members").Rows(shtR)("UserId") & "'"
dscA.FillDataSet(dsDataSet, "Orders")
dgB.DataSource=dsDataSet.Tables("Orders").DefaultView
dgB.DataBind()
dgB.Visible=True
Label1.Text="总共有" & dsDataSet.Tables("Orders").Rows.Count & "
笔记录"
End If
End Sub
上述程序代码先判断触发这个事件时，使用者是否有点选一个项目；倘若点选了任何一个项目，就将dgA 这个DataGrid Web 控件的SelectedIndex 属性设为被点选的项目；接下来的三行程序将图钉改成钉住的影像：
Dim dgiA As DataGridItem=dgA.SelectedItem
Dim celSel As TableCell = dgiA.Controls(0)
celSel.Text="<Img Border=0 Src=open.gif>"
上述程序代码片段第一行宣告一个DataGridItem 对象变量dgiA，并指向被选到的DataGridItem参考；然后取回被点选项目中的第一个控件，也就是显示图钉影像的第一个字段，并将其Text属性改成被钉下去的图形「open.gif」。
