Adding button fields to a GridView control

We have seen how to use element to display select, edit and delete buttons in a GridView control. However, if we wish to provide buttons which perform additional custom functionalities, we use the element in a GridView control. In the below example, we have used the ButtonField element to add Details button in a row of GridView control. The element displays the button as a link or a button or an Image.

Steps to create a column are:
The first step is to declare a GridView control and set the AutoGenerateColumns property to ‘false’ and set the event handler for the RowCommand event.

Create element for each column we want to display data as a text. Create to display customized button.

When we click on the Details button, the GridView controls row command event is raised. In this example, the event RowCommand is handled by the GridView1_RowCommand event.

The following code example demonstrates how to use ButtonField to display a custom command button in a row of GridView control. In the below code, we set the ButtonType property of ButtonField to “button” and CommandName and Text as “Details”.


<asp:GridView ID="GridView1"  DataSourceId="MyDataSource" 
DataKeyNames="AccountCode,AccountName" ShowFooter="true" AutoGenerateColumns="false"
AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" 
OnRowCommand="GridView1_RowCommand" 
runat="server">
<Columns>
	<asp:BoundField  DataField="AccountCode" HeaderText="Account Code" />
    <asp:BoundField  DataField="AccountName" HeaderText="Account Name" />
	<asp:BoundField  DataField="AccountDescription" HeaderText="Description" />
	<asp:buttonfield  buttontype="button" Text="Details" commandname="Details"  />
</Columns>
</asp:GridView>
           
<asp:SqlDataSource ID="MyDataSource"  
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"

SelectCommand="SELECT AccountsTable.AccountCode,AccountsTable.AccountName,
AccountsTable.AccountDescription FROM AccountsTable"  
UpdateCommand="Update AccountsTable SET AccountName=@AccountName,
AccountDescription=@AccountDescription Where AccountCode=@AccountCode" 
DeleteCommand="Delete AccountsTable Where AccountCode=@AccountCode" 
runat="server"/>

In the RowCommand event, we can access the values of a cell using DataKeys property of GridView control.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        int index = Int32.Parse((string)e.CommandArgument);
        string Code = (string)GridView1.DataKeys[index].Values["AccountCode"];
        string Name = (string)GridView1.DataKeys[index].Values["AccountName"];
    }