Using buttonfield in a DetailsView control

The ButtonField element displays the value of a data item as a button in the DetailsView control. In the previous article - DetailsView commandfield we have demonstrated how to use CommandField element to display standard buttons like delete, edit, and new in the DetailsView control.

Even though, both the CommandField element and ButtonField element display buttons, they are used in different situations. A CommandField element is used when we need to display standard buttons whereas ButtonField element is used to display a data item as a button.

Both the CommandField element and ButtonField elements cause postback to the server and inform the DetailsView control to do specific commands.

The below code demonstrates how to use a CommandField element in a DetailsView control.

<asp:DetailsView ID="DetailsView1" runat="server"  AutoGenerateRows="true"
DataKeyNames="Code" 
OnDataBound="DetailsView1_DataBound"
DataSourceID="MyDataSource" >
<Fields>
  <asp:CommandField  ButtonType="Button"  ShowDeleteButton="true"	
  DeleteText="Delete Record" 
  ShowEditButton="true"   EditText="Edit Record"
  ShowInsertButton="true"  InsertText="Insert Record" />
</Fields>
</asp:DetailsView>

<asp:SqlDataSource ID="MyDataSource"  
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT * FROM Sample" 
UpdateCommand="Update SAMPLE SET Name=@Name,
description=@description Where Code=@Code"
DeleteCommand="Delete SAMPLE Where Code=@Code" 
InsertCommand="Insert SAMPLE(Code,Name,description) 
VALUES(@Code,@Name,@description)"
runat="server"/>

The above code displays Edit, Delete and Insert buttons. When the user presses the Edit button, the DetailsView control switches to Edit Mode and facilitates data modification.

When the user presses the Insert button in the DetailsView control, the DataSource control's InsertCommand is executed and DetailsView control raises Item_Inserting and Item_Inserted events. After this, the DetailsView control is returned to DefaultMode.

When the user presses the Delete button in the DetailsView control, the DataSource control's DeleteCommand is executed and DetailsView control raises Item_Deleting and Item_Deleted events. To make normal buttons perform like CommandField buttons, we set the button commandName property to Predefined commands like Edit or Delete or Insert. For example, to make a normal button perform an edit operation, we set commandName property of the button to "Edit" as shown below.

<asp:Button Id="button1" commandName="Edit" runat="server"/>

We can place such a button inside a TemplateField of the DetailsView control and by doing so we can customize the button's appearance. We can also attach a client side script to a button. Now we will see the advantages of using buttonfield in DetailsView control.

Like a commandfield, a buttonfield is placed inside the field element of the detailsView control as shown below. In the below code, we have placed a ButtonField with CommandName="Add Account" after the <BoundField> elements.

<asp:DetailsView ID="DetailsView1" runat="server"   
AllowPaging="true" DataKeyNames="AccountCode" 
DataSourceID="SqlDataSource1"    AutoGenerateRows="false" 
OnItemCommand="AccountsDetailView_ItemCommand"
runat="server">
<Fields>
   <asp:BoundField  DataField="AccountCode" HeaderText="Code" />
   <asp:BoundField  DataField="AccountName" HeaderText="Name" />
   <asp:ButtonField CommandName="Add" Text="Add Account" />
</Fields>
</asp:DetailsView>
<br />
<asp:Label ID="Message" ForeColor="Red" runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 				
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT AccountCode, AccountName FROM AccountsTable">
</asp:SqlDataSource>

The ButtonField element displays buttons in a row in the DetailsView control. When a user clicks on a button in the detailsView control, the control raises the ItemCommand event. We can set the caption of the button using the Text property as shown above.

The following code example demonstrates how to use the ItemCommand event handler to handle a button click in a DetailsView control. Using this event handler, we can access the ButtonField in DetailsView control.

When the user clicks the Add Account button, the account name is displayed.

Steps:

To determine the button which is clicked, the CommandName property is used. A DetailsView CommandEventArgs object is passed to the AccountsDetailView_ItemCommand event handler to determine the command name (Add) of the button clicked.

Get the row that contains the account name which is to be displayed. The required account name is in the second row of the DetailsView control and index 1 indicates the second row.

After retrieving the row, we need to retrieve the appropriate cell. The required account name is in the second cell of the row and index 1 indicates the second cell.

protected void AccountsDetailView_ItemCommand(Object sender, DetailsViewCommandEventArgs e)
{
if (e.CommandName == "Add")
{
DetailsViewRow row = DetailsView1.Rows[1];
String name = row.Cells[1].Text;
}
}