ASP.NET Data Controls Part 1: DataGrids
Pages: 1, 2, 3

Edit Column

To display the Edit column, I use the <asp:EditCommandColumn> element.

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

The HeaderText attribute specifies the column header text. The EditText attribute specifies the text to be displayed on the button itself. The ButtonType attribute specifies the type of button you want. Besides PushButton, you can also have LinkButton.

Figure 4. Using a PushButton for the Edit column

The CancelText and Update attributes specify the text of the buttons to display when the edit button is clicked:

Figure 5. Displaying the Update and Cancel button automatically

First Name and Last Name Columns

The First Name and Last Name columns are created using the <asp:BoundColumn> element and are bound to a data source.

   
      <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>
   

The HeaderText attribute specifies the column header text. The DataField attribute specifies the field (of the data source bound to this DataGrid control) whose value will be displayed in this column. The SortExpression attribute contains the expression that you can use to sort the columns when the header text is clicked:

Figure 6. Clicking on the hyperlink allows rows to be sorted

Delete Column

To implement the last column, I use the <asp:ButtonColumn> element.

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

The <asp:ButtonColumn> element is similar to <asp:EditCommandColumn>, except that it does not automatically generate the Update and Cancel buttons. The CommandName attribute identifies this button as a delete button. It corresponds to the OnDeleteCommand attribute in the <asp:DataGrid> element.

Combining All of the Parts

Note that I have also added a few additional attributes to the <asp:DataGrid> element:

   
<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_record">
   

Here are the important ones:

• DataKeyField="emp_id": The key for this entire DataGrid control is the field emp_id.
• OnCancelCommand="cancel": When the user clicks the Cancel button, invokes the cancel() method.
• OnUpdateCommand="update": When the user clicks the Update button, invokes the update() method.
• OnEditCommand="edit": When the user clicks the Edit button, invokes the edit() method.
• AllowPaging="True": Allows the DataGrid control to display records in multiple pages.
• OnPageIndexChanged="changepage": Invokes the changepage() method when the user clicks on a page number.
• PageSize="4": Sets the size of the page to 4
• AllowSorting="True": Allows the rows to be sorted.
• OnSortCommand="sort": Invokes the sort() method when rows are to be sorted.
• OnDeleteCommand="delete_record": Invokes the delete_record() method when the Delete button is clicked.

Completing the Sample

To complete the sample application, add the following controls, as shown in Figures 7 and 8:

Figure 7. Adding the various controls to the form

Figure 8. Adding another DataGrid control to the form

You also need to add a SqlDataAdapter control to your project. Configure the data adapter to connect to the local SQL Server 2000 database. I use the Employee table from the Pubs database.

Figure 9. Adding a SqlDataAdapter to the project

Pages: 1, 2, 3

Next Page