Customizing the Columns in a Grid in .NET

Creating GS1 - 12 in .NET Customizing the Columns in a Grid

depends on the type of data: If the data is a bit type, then the column will be a CheckBoxField Otherwise, the column will be a BoundField Each field gets a tag inside the GridView control s tag Here s how the GridView control s code looked after I chose its data source and clicked Refresh Schema:

<asp:GridView ID= GridView1 runat= server AutoGenerateColumns= False DataKeyNames= ContactID DataSourceID= SqlDataSource1 > <Columns> <asp:BoundField DataField= ContactID HeaderText= ContactID InsertVisible= False ReadOnly= True SortExpression= ContactID /> <asp:CheckBoxField DataField= NameStyle HeaderText= NameStyle SortExpression= NameStyle /> <asp:BoundField DataField= Title HeaderText= Title SortExpression= Title /> <asp:BoundField DataField= FirstName HeaderText= FirstName SortExpression= FirstName /> <asp:BoundField DataField= MiddleName HeaderText= MiddleName SortExpression= MiddleName /> <asp:BoundField DataField= LastName HeaderText= LastName SortExpression= LastName /> <asp:BoundField DataField= Suffix HeaderText= Suffix SortExpression= Suffix /> <asp:BoundField DataField= EmailAddress HeaderText= EmailAddress SortExpression= EmailAddress /> <asp:BoundField DataField= EmailPromotion HeaderText= EmailPromotion SortExpression= EmailPromotion /> <asp:BoundField DataField= Phone HeaderText= Phone SortExpression= Phone /> <asp:BoundField DataField= PasswordHash HeaderText= PasswordHash SortExpression= PasswordHash /> <asp:BoundField DataField= PasswordSalt HeaderText= PasswordSalt SortExpression= PasswordSalt /> <asp:BoundField DataField= AdditionalContactInfo HeaderText= AdditionalContactInfo SortExpression= AdditionalContactInfo /> <asp:BoundField DataField= rowguid HeaderText= rowguid SortExpression= rowguid /> <asp:BoundField DataField= ModifiedDate HeaderText= ModifiedDate SortExpression= ModifiedDate /> </Columns> </asp:GridView>

You can see there s a whole bunch of tags Most of them are BoundField tags, except for the second one, which is a CheckBoxField tag Each tag corresponds to a column in the data, and you can see the name of the column by the DataField property Notice also that the very first BoundField tag, for ContactID, has a property of ReadOnly set to True The reason for making this column read-only is the column is the primary key in the table,

and you don t want to be modifying that column if you turn on the edit capabilities of the GridView control If you like, you can open the aspx page in the browser, although it s not particularly interesting So I m going to go ahead and have some fun with these columns In the sections that follow I ll demonstrate some ways you can format your data with the Fields dialog box

Probably the easiest thing you can do with the Fields dialog box is specify the headers for your columns When you click a field in the Selected Fields box, you can go over to the BoundField Properties box on the right Inside that box is a property called HeaderText, as shown in Figure 3-14

To change the header, simply type your text for that property The text appears as a header in the rendered HTML

The BoundField type simply takes the text that s in the data column and displays it on the Web page in the grid s column Okay, you can get fancy if you want by sending the text through the StringFormat function Note, however, that you don t actually call the Format function yourself; the GridView control does that for you All you do is specify the format string in the DataFormatString column, putting in a {0} in your format string where you want the text from the data to appear The {0} represents the location in

the string where you want the data to appear; then, when the grid control creates the HTML page, the grid will replace the {0} with the string that s in the database For example, suppose your text field contains the string 200 Main St and you make the format string read Address: {0} Cincinnati, OH Then your text ultimately renders in the browser as

In other words, the string {0} was replaced with the data, which was 200 Main St resulting in the aformentioned string That s not all that terribly useful; but where this concept shines is in formatting other types of data such as numbers and dates If, for example, your data column contains a date and you want this to appear as $123, you can use this format string:

{0:c}