Using Commandfield element in a DetailsView control

The DetailsView control includes command buttons which allow the user to insert, edit and delete data. We can use CommandField element in the DetailsView control to get more control over the appearance of the buttons. We specify the command buttons to be displayed using the CommandField element.

Note: The CommandField is displayed as a column in the gridView control, whereas the CommandField is displayed as a row in the DetailsView control.

The CommandField element attributes allow us to specify the text to be displayed by the button.

The ButtonType property of CommandField element specifies the type of button to be displayed. The valid options are Button, Link or Image. By default, the CommandField uses LinkButtons, and can be customized by using CommandField's ButtonType property.

We can specify the caption to be displayed by the cancel button using the CancelText property. Similarly, for delete button, DeleteText and Edit button, EditText and Insert button, InsertText property.

A single CommandField element can be used to display more than one button. As shown in the below code, we use a single CommanField element to display two buttons - Delete and Edit. The CommandField element ButtonType property is set as 'Button', so these controls are displayed as buttons. This code demonstrates how we can add command buttons to a DetailsView control by using CommandField element to update and delete data.

<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" />
    </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 below code demonstrates how we can add three command buttons to a DetailsView control by using a single CommandField element to update, insert and delete data.

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

How to access DetailsView CommandField in DataBound event of the DetailsView control

To Access DetailsView CommandField programmatically, we need to write the following code in the DataBound event of the DetailsView control.

protected void DetailsView1_DataBound(object sender, EventArgs e)
{
   Button btnobj = (Button)(DetailsView1.Rows[3].Cells[0].Controls[0]);
   ((System.Web.UI.WebControls.Button)(btnobj)).Text= "my edit button";
}

Observe the screen shot which is given below. Buttons are displayed in the fourth row and the index starts from zero. The value of the index in the Controls[0], depends on the button's position relative to other buttons displayed by the CommandField element. In this example, we have displayed three buttons using CommandField - the first button is the Edit button, second button is the Delete button and third button is New button.

Use index of 0 to access the first button in the CommandField. To access the Delete button, use the index of 2. The reason for using an index of 2 is because one LiteralControl is added between the edit button and the delete button.