How would you format Gridview in Asp.Net

GridView Examples for ASP.NET 2.0: Formatting it in .net for beginners  

Fortunately, all of these tasks are easy to accomplish with the GridView, most of which can be accomplished through the Design view without a line of code. There's even an Auto Format wizard to help improve the aesthetics of the GridView for folks like me who have no artistic skills. In this section we'll look at how to format the GridView through properties that can be set through the Designer, how to format based upon the actual data bound to the GridView, and how to use skins to alter the appearance of the GridView.

Examining the GridView's Aesthetic Properties

Like the DataGrid in ASP.NET 1.x, the GridView contains a wealth of properties that can be set to gussy up the appearance of the GridView. Properties such as BackColor, Font, and ForeColor allow you to dictate the aesthetics for the entire GridView. You can also specify aesthetic settings specific to particular parts of the GridView through the HeaderStyle, RowStyle, AlternatingRowStyle, FooterStyle, and other properties. Additionally, styles can be set on a column-by-column basis, as well.

If you are an artistic person you can likely put together proper colors and styles that will provide the end user with an eye-pleasing GridView. If you are like me, though, the good news is that the GridView can be Auto Formatted to a variety of well put together styles. To take advantage of the Auto Formatting, simply click the Auto Format link in the GridView's Smart Tag, which will display the Auto Format dialog box (shown in Figure 1).

Figure 1

The Auto Format wizard only applies various colors designs to the GridView. If you want to adjust the GridView column appearances—such as formatting the data as a currency or center-aligning the data—simply click the Edit Columns link from the GridView's Smart Tag. This will display a dialog box listing all of the GridView's columns and their properties (see Figure 2).

Figure 2

The lower left-hand corner lists the columns in the GridView. From this dialog box you can adjust the ordering of the columns or remove or add columns altogether. To reorder the columns in the GridView, click on a column and then click on the up or down arrow to adjust its position in the column list. To remove a column from the GridView, select the column then click the X button to delete it.
When you click on one of the columns, its properties are listed in the pane on the right. From the ItemStyle property you can set formatting properties for the items of the column, such as how the data should be horizontally aligned, or if the data should be displayed in a bold font. You can change the text that appears in the header of the column through the HeaderText property. To format the data in the columns, use the DataFormatString property, setting it to {0:format string}. For example, to have the UnitPrice column formatted as a currency, I set the DataFormatString property to {0:c}.

Figure 3 shows a screenshot of a formatted GridView displaying data from the Products table. Notice that the text in the headers has been changed from their default values to more user-friendly values. The GridView has also been given some color (I used the Brown Sugar option in the Auto Format dialog box), the Price/Unit and Units In Stock columns' data is right-aligned, and the Price/Unit column's data has been formatted as a currency.

Figure 3

Changing the GridView's aesthetic properties through the Designer simply sets the declarative syntax to the appropriate values. The complete declarative syntax for the page is shown here:"DataSourceMode="DataReader"     

Skinning the GridView

Two of the neat new features in ASP.NET 2.0 are Themes and Skins. A Skin is a file that defines the visual appearance of a particular control. You can create a Skin file for the GridView control that defines the look of the GridView for different SkinIDs. A Theme is a collection of Skins.

In order to start using Themes you must create a folder in the /app_themes directory of your Web application. Inside this directory, add a new folder for each Theme you want to create. In the download accompanying this article, there's a single folder in the /app_themes directory, GridViewTheme. Adding Skins to a Theme is as simple as adding a new file named WebControlToBeSkinned.skin in the Theme's directory (to provide a Skin for the GridView, name the file GridView.skin). The Skin file should contain declarative syntax specifying the aesthetic markup for the GridView for various SkinIDs. As the file GridView.skin shows, I have created a default markup and a markup for two SkinIDs: Professional and Fun.

The default markup is listed at the top, and indicates that the GridView should be displayed with the Arial font. The next two sections indicate the markup that should be used for the SkinIDs Professional and Fun. For Professional, the Verdana font is used with a CellPadding of 4 and a dark gray header background with white text. Each alternating row color's background is set to a light gray. For Fun, the Comic Sans MS font is used, with a larger font size and a brownish background.

Finally, to Skin a GridView, simply add the Theme to use in the @Page directive and then set the GridView's SkinID appropriately. The following page specifies the Theme in the @Page directive and then displays three GridViews: one with no SkinID specified, one with the Professional SkinID, and one with the Fun SkinID.

Figure 4 shows a screenshot of this page when viewed through a browser. Notice that the aesthetic formatting is applied to the three GridViews even though the corresponding settings aren't in the ASP.NET page's declarative syntax. Rather, the settings are being dynamically imported from the GridView Skin file for the specified Theme.

Figure 4

Formatting the GridView Based on the Underlying Data

In the two previous examples the GridView's formatting was specified statically. There are times, however, where you might want to alter the formatting based on the data in the GridView. For example, when listing product information you might want to draw the user's eye to products that are out of stock. One way to accomplish this would be to change the background color of those rows with a Units In Stock value of 0.

To accomplish this we need to inspect the data of each of the rows of the GridView and alter the row's BackColor property if the Units In Stock is 0. The GridView offers a RowDataBound event that fires once for each row after the row has been created and bound to the corresponding record of data from the data source control. We can create an event handler for this event that checks to see if Units In Stock is 0 and, if it is, set the BackColor property of the GridView row to Yellow.

To create an event handler for the GridView's RowDataBound event, go to the Design view, click on the GridView, and go to the Properties pane. From the Properties pane, click on the lightning bolt; this will list the GridView's events. Then, in the RowDataBound line, type in the name of the event handler you want to create (I named my event handler productsGridView_RowDataBound). Finally, enter in the following code into the event handler:

products GridView_RowDataBound Event Handler (Visual Basic)

Sub productsGridView_RowDataBound(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

If e.Row.RowType = DataControlRowType.DataRow Then
   'determine the value of the UnitsInStock field
   Dim unitsInStock As Integer =  _
     Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, _
     "UnitsInStock"))
   If unitsInStock = 0 Then
       ' color the background of the row yellow
       e.Row.BackColor = Drawing.Color.Yellow
   End If
End If
End Sub

productsGridView_RowDataBound Event Handler (C#)

void productsGridView_RowDataBound(object sender,GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
         // determine the value of the UnitsInStock field
         int unitsInStock = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem,"UnitsInStock"));
        if (unitsInStock == 0)
             // color the background of the row yellow
            e.Row.BackColor = Color.Yellow;
    }
}

The event handler starts by checking to see if we are working with a DataRow. Realize that the GridView's RowDataBound event handler fires for each of the rows being created, including the HeaderRow. However, the HeaderRow doesn't have a Units In Stock column with data associated with it, so we are only interested in working with DataRows. The UnitsInStock field from the data bound to the GridView row is obtained through a DataBinder.Eval() call, passing in the data bound to the GridView row (e.Row.DataItem) and the name of the field whose value we are interested in. Finally, a check is made to see if there are zero units in stock. If so, the 
BackColor property of the row is set to Yellow.

Figure 5 shows a screenshot of this example when viewed through a browser. Note that rows with zero units in stock are highlighted yellow.

Figure 5