An Extensive Examination of the DataGrid Web Control: Part 2, Part 2

By Scott Mitchell

---

Read Part 1

---

In Part 1 of this part of the article series, we examined how to set display properties for the DataGrid Web control and how to use styles to specify dislay settings for the header, footer, item, and alternating item. All of these techniques either specify the display settings for the entire DataGrid, or for the rows of a DataGrid. But what if we want to specify the display settings for the columns of a DataGrid? This is not a difficult task - read on to learn more!

Specifying what Columns Should Appear

By default the DataGrid created a column in the HTML table for every column returned by the SQL query. There are times, though, when you may only wish to show a subset of these columns in the DataGrid. For example, in my ongoing live demo series, I've been showing the most popular ASPFAQs.com FAQs by calling the sp_Popularity stored procedure, which includes the FAQID column. Perhaps in my DataGrid I don't want to display this column.

If you don't want to display all of the columns from the database query in the DataGrid, you have to explicitly specify all of the columns you do wish to include. The first step is to set the DataGrid's AutoGenerateColumns property to False. Once you've done this, you need to specify the columns to show using the BoundColumn Web controls like so:

<asp:DataGrid runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundColumn DataField="DatabaseColumnName1" ... /> <asp:BoundColumn DataField="DatabaseColumnName2" ... /> ... <asp:BoundColumn DataField="DatabaseColumnNameN" ... /> </Columns> </asp:datagrid>

For each column that you wish to display you need to specify an <asp:BoundColumn ... /> tag with the DataField property specifying the database column to display. All of these BoundColumn tags need to appear between the Column tags. (There is a way to specify these bound columns programmatically, but it's really ugly and requires tons of code!) Note that only those columns specified by BoundColumn tags will appear in the DataGrid and they will appear in the order you specify them!

The nice thing about these BoundColumn controls is that they contain some formatting properties, such as:

• HeaderText - Specifies the text that should appear in the column's header.
• FooterText - Specifies the text that should appear in the column's footer. (Remember to set ShowFooter to True if you want to display a footer in your DataGrid!)
• HeaderStyle / FooterStyle / ItemStyle - Contains all of the properties that the DataGrid's styles did. Useful for centering columns, specifying fore/background color, etc.
• DataFormatString - Specifies formatting instructions. (See the live demo for some examples; refer to the docs for a full listing of format specifications.)

Let's see how we can use the BoundColumn tags to further enhance the live demo examples. As I said before, we want to not show the FAQID or FAQCategoryID columns, and we'd like to perform formatting for the number column (ViewCount), as well as the date/time column (DateEntered). Furthermore, we'd like to have numeric columns have their values centered. This can all be accomplished in just a few simple lines of easy-to-read and easy-to-understand format specification code:

<asp:DataGrid runat="server" id="dgPopularFAQs" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Name="Verdana" CellPadding="4" Font-Size="10pt" AutoGenerateColumns="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>

[View a live demo!]

As you can see in the live demo, the above code creates only the specified columns and applies the specified formatting. Note that the DataFormatString property looks a bit funny. It should always look like: {0:format string}. The {0:...} specifies to format the first argument (the value of the particular column returned by the DataReader) using the format string specified by .... In my example I used the format string #,### to format a number with commas after every three digits, and MM-dd-yyyy to format the date/time field to show the month, day, and year. Review the docs for more information on formatting strings.

Conclusion

Take a moment to look at the first live demo (what we started with when kicking off this article) and what we ended up with. A pretty impressive improvement! Note that all of these stylistic and UI enhancements were done without writing a single line of code - we just set a few properties in the Web control tag! In fact, if you are using an editor like Visual Studio .NET, you can specify these formatting options by just clicking some buttons, checking some checkboxes, and choosing some items from listboxes. Just imagine the amount of bloated code we'd need to write to achieve the same look and feel in classic ASP. That thought alone should make you fall in love with ASP.NET, if you're not already.

Happy Programming!

By Scott Mitchell