Displaying A Credit Card Bill

This live demo shows how to display a credit-card bill using a DataGrid. In a future live demo, we'll see how to add summary information to the DataGrid's footer, showing the sum of the Price column!

DescriptionDatePrice
AMAZON.COM5/15/2003$45.14
MOBILE GAS5/14/2003$25.08
VONS GROCERY STORE5/14/2003$67.23
BLOCKBUSTER ENTERTAINMENT5/15/2003$4.63
PIER 21 FURNITURE5/16/2003$187.11

Source Code 

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">

    Sub Page_Load(sender as Object, e as EventArgs)
         If Not Page.IsPostBack then
             BindData()
         End If
    End Sub
    
    
    Sub BindData()
		'Create the DataTable
		Dim dtTable as New DataTable
		dtTable.Columns.Add(New DataColumn(("Description"), GetType(String)))
		dtTable.Columns.Add(New DataColumn(("DatePurchased"), GetType(DateTime)))
		dtTable.Columns.Add(New DataColumn(("Price"), GetType(Single)))
		
		'Create some Rows
		Dim dr as DataRow
		dr = dtTable.NewRow()
		dr("Description") = "AMAZON.COM"
		dr("DatePurchased") = "05/15/2003"
		dr("Price") = 45.14
		dtTable.Rows.Add(dr)
		
		dr = dtTable.NewRow()
		dr("Description") = "MOBILE GAS"
		dr("DatePurchased") = "05/14/2003"
		dr("Price") = 25.08
		dtTable.Rows.Add(dr)

		dr = dtTable.NewRow()
		dr("Description") = "VONS GROCERY STORE"
		dr("DatePurchased") = "05/14/2003"
		dr("Price") = 67.23
		dtTable.Rows.Add(dr)

		dr = dtTable.NewRow()
		dr("Description") = "BLOCKBUSTER ENTERTAINMENT"
		dr("DatePurchased") = "05/15/2003"
		dr("Price") = 4.63
		dtTable.Rows.Add(dr)

		dr = dtTable.NewRow()
		dr("Description") = "PIER 21 FURNITURE"
		dr("DatePurchased") = "05/16/2003"
		dr("Price") = 187.11
		dtTable.Rows.Add(dr)


		'Now, bind the DataView to the DataGrid
		dgBill.DataSource = dtTable
		dgBill.DataBind()
	End Sub
</script>

<asp:DataGrid runat="server" id="dgBill" AutoGenerateColumns="False"
         Font-Name="Verdana" Font-Size="10pt" CellPadding="4"
         AlternatingItemStyle-BackColor="#eeeeee">
	  
  <HeaderStyle BackColor="Navy" ForeColor="White"
        Font-Size="14pt" Font-Bold="True" HorizontalAlign="Center" />
  <Columns>
    <asp:BoundColumn DataField="Description" HeaderText="Description" />
    <asp:BoundColumn DataField="DatePurchased" HeaderText="Date" 
             DataFormatString="{0:d}" />
    <asp:BoundColumn DataField="Price" HeaderText="Price"
             DataFormatString="{0:c}"
             ItemStyle-HorizontalAlign="Right" />
  </Columns>
</asp:DataGrid>

[Return to the FAQ...]