DataGrid Demo with a Real-World Button Event Handler Scenario
This demo shows how to display summary data in each row of the DataGrid, along with a Details button that,
when clicked, displays extra information about the selected data item.
Source Code
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
If Not Page.IsPostBack then
BindData()
End If
End Sub
Sub BindData()
'1. Create a connection
Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))
'2. Create the command object, passing in the SQL string
Const strSQL as String = "sp_Popularity"
Dim myCommand as New SqlCommand(strSQL, myConnection)
'Set the datagrid's datasource to the datareader and databind
myConnection.Open()
dgPopularFAQs.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
dgPopularFAQs.DataBind()
End Sub
Sub dispDetails(sender as Object, e As DataGridCommandEventArgs)
Dim FAQID as Integer = Convert.ToInt32(e.Item.Cells(1).Text)
'Get information about the particular FAQ
Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))
'2. Create the command object, passing in the SQL string
Dim strSQL as String = "spGetFAQ"
Dim myCommand as New SqlCommand(strSQL, myConnection)
myCommand.CommandType = CommandType.StoredProcedure
' Add Parameters to SPROC
Dim parameterFAQId as New SqlParameter("@FAQID", SqlDbType.Int, 4)
parameterFAQId.Value = FAQID
myCommand.Parameters.Add(parameterFAQId)
'Set the datagrid's datasource to the datareader and databind
myConnection.Open()
dgFAQDetails.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
dgFAQDetails.DataBind()
dgFAQDetails.Visible = True 'Make the FAQ Details DataGrid visible
End Sub
</script>
<form runat="server">
<asp:DataGrid runat="server" id="dgFAQDetails"
BackColor="#eeeeee" Width="90%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False"
Visible="False">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:BoundColumn DataField="CatName" HeaderText="Category Name" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
<asp:BoundColumn DataField="ViewCount" DataFormatString="{0:#,###}"
HeaderText="Views" ItemStyle-HorizontalAlign="Center" />
<asp:BoundColumn DataField="SubmittedByName" HeaderText="Author" />
<asp:BoundColumn DataField="SubmittedByEmail" HeaderText="Author's Email" />
<asp:BoundColumn DataField="DateEntered" HeaderText="Date Added"
DataFormatString="{0:MM-dd-yyyy}" />
</Columns>
</asp:datagrid>
<p>
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False"
OnItemCommand="dispDetails">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" ButtonType="PushButton" />
<asp:BoundColumn DataField="FAQID" Visible="False" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>