ASP.NET Data Controls Part 1: DataGrids

by Wei-Meng Lee
02/24/2003

One of the most powerful server controls in ASP.NET is no doubt the DataGrid control. The DataGrid control is a multi-column, data-bound ASP.NET server control. Using the DataGrid control, you can display records from a database using a variety of formats. You can also edit, update, and delete records from the database using the DataGrid control. In this first part of the ASP.NET server controls series, I will show you how to use the DataGrid control to develop compelling Web applications.

Using the DataGrid Control

Let's learn to use the DataGrid control by building a simple example using Visual Studio .NET. For this example, I will illustrate using an ASP.NET Web application.

In your default Web form, add a DataGrid control. To change the format of the DataGrid control, right-click on it and select Auto-Format.... Choose the scheme that you like, such as the one shown in Figure 1.

Figure 1. Selecting a scheme for the DataGrid control

Your DataGrid control should now look like this:

Figure 2. Applying a scheme to the DataGrid control

There are two ways in which you can configure the DataGrid control:

1. Using the Property Builder
2. Modifying the HTML codes manually

In this article, I will illustrate using the second method, allowing readers who are not using Visual Studio .NET to easily follow the discussions in this article.

To modify the HTML codes behind the DataGrid control, switch to code view. Pay attention to the section on the <asp:DataGrid> element:

   
<asp:DataGrid 
   id="DataGrid1" 
   style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 16px"     
   runat="server"
   BorderColor="#DEBA84" 
   BorderStyle="None" 
   CellSpacing="2" 
   BorderWidth="1px" 
   BackColor="#DEBA84"
   CellPadding="3">

   <SelectedItemStyle Font-Bold="True" 
                      ForeColor="White"
                      BackColor="#738A9C">
   </SelectedItemStyle>

   <ItemStyle ForeColor="#8C4510" 
              BackColor="#FFF7E7">
   </ItemStyle>

   <HeaderStyle Font-Bold="True" 
                ForeColor="White" 
                BackColor="#A55129">
   </HeaderStyle>

   <FooterStyle ForeColor="#8C4510" 
                BackColor="#F7DFB5">
   </FooterStyle>

   <PagerStyle HorizontalAlign="Center" 
               ForeColor="#8C4510"
               Mode="NumericPages">
   </PagerStyle>

</asp:DataGrid>
   

Modify the HTML codes for the DataGrid control as follows:

   
   <asp:DataGrid 
              DataKeyField="emp_id"
              AutoGenerateColumns="False" 
              id="DataGrid1" 
              runat="server"
              Width="397px" 
              Height="231px" 
              BorderStyle="None" 
              BorderWidth="1px" 
              BorderColor="#DEBA84" 
              BackColor="#DEBA84"
              CellPadding="3" 
              CellSpacing="2" 
              OnCancelCommand="cancel" 
              OnUpdateCommand="update" 
              OnEditCommand="edit"
              AllowPaging="True" 
              OnPageIndexChanged="changepage" 
              PageSize="4" 
              AllowSorting="True" 
              OnSortCommand="sort"
              OnDeleteCommand="Delete">

   <FOOTERSTYLE BackColor="#F7DFB5" ForeColor="#8C4510"></FOOTERSTYLE>

   <HEADERSTYLE BackColor="#A55129" ForeColor="White" 
                Font-Bold="True">
   </HEADERSTYLE>

   <PAGERSTYLE ForeColor="#8C4510" HorizontalAlign="Center" 
               Mode="NumericPages"></PAGERSTYLE>
   <SELECTEDITEMSTYLE BackColor="#738A9C" ForeColor="White" 
               Font-Bold="True"></SELECTEDITEMSTYLE>
   <ITEMSTYLE BackColor="#FFF7E7" ForeColor="#8C4510"></ITEMSTYLE>

   <COLUMNS>
      <asp:HyperLinkColumn 
           HeaderText="Employee ID"
           DataTextField="emp_id" 
           DataNavigateUrlFormatString="Webform1.aspx?emp_id={0}"
           DataNavigateUrlField="emp_id">
      </asp:HyperLinkColumn>

      <asp:EditCommandColumn 
           HeaderText="Edit" 
           EditText="Edit" 
           ButtonType="PushButton" 
           CancelText="Cancel" 
           UpdateText="Update">
      </asp:EditCommandColumn>

	<asp:BoundColumn 
           HeaderText="First Name" 
           DataField="fname" 
           SortExpression="ORDER BY fname">
      </asp:BoundColumn>

      <asp:BoundColumn 
           HeaderText="Last Name" 
           DataField="lname" 
           SortExpression="ORDER BY lname">
      </asp:BoundColumn>

      <asp:ButtonColumn 
           Text="Remove" 
           HeaderText="Delete" 
           ButtonType="PushButton" 
           CommandName="delete">
      </asp:ButtonColumn>

   </COLUMNS>

</asp:DataGrid>
   

After you have modified the code, your DataGrid should look like this (switch to design view):

Figure 3. The modified DataGrid control

To customize each column in the DataGrid control, I use the <columns> element. I will explain how each column is created in the following sections (use Figure 3 as a reference):

Employee ID Column

To create a hyperlink column, use the <asp:HyperLinkColumn> element:

   
      <asp:HyperLinkColumn 
           HeaderText="Employee ID"
           DataTextField="emp_id" 
           DataNavigateUrlFormatString="Webform1.aspx?emp_id={0}"
           DataNavigateUrlField="emp_id">
      </asp:HyperLinkColumn>
   

The HeaderText attribute specifies the column header text. The DataTextField attribute specifies the field (of the data source bound to this DataGrid control) whose value will be displayed in this column. The DataNavigateUrlFormatString attribute indicates the URL pointed to by this column. The "{0}" will be substituted with the value indicated by the data field specified in the DataNavigateUrlField attribute.

Pages: 1, 2, 3

Next Page