ASP.Net Web Developer Guide |
||||||||
|
||||||||
Sitemap : Content in Chapter 1 |
Content in Chapter 2 |
Content in Chapter 3 |
||||||||
|
||||||||
Tuesday, March 28, 2006
Displaying Formatted Data with Styles
In this example, we will illustrate how to format and style the contents of a DataGrid.We will also demonstrate how to lay out the columns in a different order other than the original order of the columns in the data source.The runtime view of the application is shown in Figure 3.78.The complete code is shown in Figure 3.79. Please notice that our SQL statement for the data extraction procedure is “SELECT ProductID, ProductName, Price FROM Products WHERE Price > 40 ORDER BY Price”.That means the data table “dtProducts” will contain three columns exactly in that order. However, the sequence of the columns displayed in the data grid is ProductId, Price and ProductName. Furthermore, we have formatted the Price field.We have also changed the captions in the column headings.
Figure 3.78 Displaying Formatted Data with Styles
First, we have to set the AutoGenerateColumn property to False to suppress the automatic generation of the columns in the DataGrid.The DataGrid has a <Column> collection property. Inside the <Column> tag, we can include the column names of the desired columns using the <BoundColumn> property.We do not have to necessarily include all of the columns, and we can list the columns in the desired order.The necessary formatting instructions for a column can be specified inside the <BoundColumn> tag.We can also include the <ItemStyle> property of a <BoundColumn> object to specify the alignment of the text. For example, we have formatted the Price column as follows:
<asp:BoundColumn HeaderText="Unit Price" DataField="price"
DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right"/>
</asp:BoundColumn>
We have used the <HeaderStyle> property to define the look of the header. Finally, the <AlternatingItemStyle> property has been used to display the rows in alternating background colors.The complete code for this application is shown in Figure 3.79
Figure 3.79 DataGrid2.aspx
<!— Chapter3/DataGrid2.aspx —>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html><head></head>
<script language="VB" Debug="true" runat="server">
Sub Page_Load(Source As Object, E As EventArgs)
If Not IsPostBack Then
bindListControl
End If
End Sub
Sub bindListControl()
Dim myConn As OleDbConnection
Dim myOleDbAdapter As OleDbDataAdapter
Dim myDataSet As New DataSet
Dim connStr, sqlStr As String
connStr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\Products.mdb"
sqlStr="SELECT ProductId, ProductName, Price " _
+ " FROM Products WHERE Price > 40 ORDER BY Price"
myConn= New OleDbConnection(connStr)
myConn.Open()
myOleDbAdapter =New OleDbDataAdapter(sqlStr,myConn)
myOleDbAdapter.Fill(myDataSet,"dtProducts")
DataGrid1.DataSource=myDataSet.Tables("dtProducts")
DataGrid1.DataBind()
myConn.Close()
End Sub
</script>
<asp:DataGrid runat="server" id="DataGrid1" AutoGenerateColumns="false"
Width="75%" BackColor="White" BorderWidth="1px" BorderStyle="Solid"
CellPadding="2" CellSpacing="0" BorderColor="Salmon"
Font-Name="Verdana" Font-Size="8pt">
<HeaderStyle Font-Size="8" Font-Names="Arial" Font-Bold="True"
BackColor="Yellow" HorizontalAlign="center">
</HeaderStyle>
<Columns>
<asp:BoundColumn HeaderText="Product ID" DataField="ProductId" >
<ItemStyle HorizontalAlign="Right"/>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Unit Price" DataField="price"
DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right"/>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Description" DataField="ProductName">
<ItemStyle Width="130"/>
</asp:BoundColumn>
</Columns>
<AlternatingItemStyle BackColor="Beige"/>
</asp:DataGrid>
</center></body></html>
Figure 3.78 Displaying Formatted Data with Styles
First, we have to set the AutoGenerateColumn property to False to suppress the automatic generation of the columns in the DataGrid.The DataGrid has a <Column> collection property. Inside the <Column> tag, we can include the column names of the desired columns using the <BoundColumn> property.We do not have to necessarily include all of the columns, and we can list the columns in the desired order.The necessary formatting instructions for a column can be specified inside the <BoundColumn> tag.We can also include the <ItemStyle> property of a <BoundColumn> object to specify the alignment of the text. For example, we have formatted the Price column as follows:
<asp:BoundColumn HeaderText="Unit Price" DataField="price"
DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right"/>
</asp:BoundColumn>
We have used the <HeaderStyle> property to define the look of the header. Finally, the <AlternatingItemStyle> property has been used to display the rows in alternating background colors.The complete code for this application is shown in Figure 3.79
Figure 3.79 DataGrid2.aspx
<!— Chapter3/DataGrid2.aspx —>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html><head></head>
<script language="VB" Debug="true" runat="server">
Sub Page_Load(Source As Object, E As EventArgs)
If Not IsPostBack Then
bindListControl
End If
End Sub
Sub bindListControl()
Dim myConn As OleDbConnection
Dim myOleDbAdapter As OleDbDataAdapter
Dim myDataSet As New DataSet
Dim connStr, sqlStr As String
connStr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\Products.mdb"
sqlStr="SELECT ProductId, ProductName, Price " _
+ " FROM Products WHERE Price > 40 ORDER BY Price"
myConn= New OleDbConnection(connStr)
myConn.Open()
myOleDbAdapter =New OleDbDataAdapter(sqlStr,myConn)
myOleDbAdapter.Fill(myDataSet,"dtProducts")
DataGrid1.DataSource=myDataSet.Tables("dtProducts")
DataGrid1.DataBind()
myConn.Close()
End Sub
</script>
<asp:DataGrid runat="server" id="DataGrid1" AutoGenerateColumns="false"
Width="75%" BackColor="White" BorderWidth="1px" BorderStyle="Solid"
CellPadding="2" CellSpacing="0" BorderColor="Salmon"
Font-Name="Verdana" Font-Size="8pt">
<HeaderStyle Font-Size="8" Font-Names="Arial" Font-Bold="True"
BackColor="Yellow" HorizontalAlign="center">
</HeaderStyle>
<Columns>
<asp:BoundColumn HeaderText="Product ID" DataField="ProductId" >
<ItemStyle HorizontalAlign="Right"/>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Unit Price" DataField="price"
DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right"/>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Description" DataField="ProductName">
<ItemStyle Width="130"/>
</asp:BoundColumn>
</Columns>
<AlternatingItemStyle BackColor="Beige"/>
</asp:DataGrid>
</center></body></html>
posted by Mr.Q at 9:48 PM
0 Comments:
Post a Comment
<< Home