Behold the Power of the DataGrid! - Data Binding
(Page 3 of 4 )
To get the DataGrid up and running, all we really need is a valid data source. By default, the DataGrid control will take the data, and spew out an exact representation in tabular format. Each record will be displayed in a unique row, and each field will have its own unique column. This can be accomplished in as little as three lines of code. For this example and the rest, I will omit the actual coding used to populate the dataset, which I'll show in the final example of the second article. Really the only omitted code is the data retrieval, which you should be familiar with by now after reading the ASP.NET basics on ASP Free.
<script language="VB" runat="server">
'=== omitted code use to fill a dataset called dsInventory
'=== databind to DataGrid called dgSocks
dgSocks.DataSource = dsInventory.Tables("socks")
dgSocks.DataBind()
</script>
<asp:DataGrid id="dgSocks" runat="server" />
Believe it or not, it's really that simple! We now have an automatically generated table (or grid) displaying all the data in the socks data table! Ooooh, the power. But now let's get into a bit of customization.
How Do I Look?
The first thing we've got to do is tell .NET to back off a little, because we want to get our hands a little dirty here. We do that by setting the AutoGenerateColumns to false. Then we get to work deciding in which order to display the columns, how we want them formatted, and even details such as the header appearance.
We need to work with a number of properties here for the sake of this tutorial; you can implement some or all of them as you see fit. We configure each desired column in the chosen order, by using sequential <BoundColumn> objects. We can go deeper, by adding and modifying properties within each <BoundColumn>, by using the <ItemStyle> property. The <HeaderStyle> and <AlternatingItemStyle> properties can be employed to change the grid header and the alternate row styles respectively. Here's the code:
<script language="VB" runat="server">
'=== omitted code use to fill a dataset called dsInventory
'=== databind to DataGrid called dgSocks
dgSocks.DataSource = dsInventory.Tables("socks")
dgSocks.DataBind()
</script>
<asp:DataGrid id="dgSocks" runat="server" AutoGenerateColumns="false"
width="400" cellPadding="2" Font-Size="10px">
<HeaderStyle BackColor="Salmon" Font-Bold="true" />
<Columns>
<asp:BoundColumn HeaderText="Sock Color" DataField="color" />
<asp:BoundColumn HeaderText="Price" DataField="price">
<ItemStyle HorizontalAlign="right" />
</asp:BoundColumn>
<Columns>
<AlternatingItemStyle BackColor="#CCCCCC" />
</asp:DataGrid>
If you want to get really fancy, you could even add DataFormatString="{0:c}" to the price to print it out in currency format! If you want more information on that, Microsoft has all the answers. But enough with styling, you can play around with that, let's move on to bigger and better things, namely sorting.
Next: Who Wears Sort Sorts? >>
More ASP.NET Articles
More By Justin Cook
/ 26 
