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.


Status 
ASP.NET Edit
Arrays Edit
Databases, Errors Edit
Arrays Edit
Arrays Edit
Databases, Queries Edit
FileSystemObject Edit
Session Object Edit
Email Edit
Strings Edit


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>
	 


[Return to the article]