Using Button columns in GridView

Using Button columns in GridView

http://www.ezzylearning.com/tutorial.aspx?tid=5066444

GridView control is one of the most powerful controls in ASP.NET 2.0. This control displays database records in typical tabular form, and provides features such as Sorting, Paging, Selection and Editing without writing a single line of code. It also has many different types of fields (columns) such as hyperlinks, images, checkboxes etc.

In the following tutorial, I will show you different techniques you can use to display command buttons in GridView.  For this tutorial I am using Microsoft famous sample database Northwind. I am displayingProducts table in the GridView. Also make sure you are setting GridView DataKeyFields property to the Primary Key column of the Product Table such as ProductID. GridView control RowCommand event will give you the ProductID of the product from the GridView Rows when user will click any of the button in the GridView.

Here is the code of GridView control. 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
   BorderColor="#336699" BorderStyle="Solid" BorderWidth="2px"
   CellPadding="4" DataKeyNames="ProductID"
   DataSourceID="SqlDataSource1" ForeColor="#333333">
               
   <Columns>

      <asp:BoundField DataField="ProductID"  HeaderText="ProductID"
         SortExpression="ProductID" />

      <asp:ButtonField ButtonType="link" CommandName="ProductName"
         DataTextField="ProductName" HeaderText="Name"
         SortExpression="ProductName" />

      <asp:ButtonField ButtonType="button" CommandName="MoreDetail"
         HeaderText="More Details" Text="More Details" />

      <asp:ButtonField ButtonType="Link" CommandName="ViewCategory"
         HeaderText="View Category" Text="View Category" />

      <asp:ButtonField ButtonType="Image" CommandName="BuyNow"
         HeaderText="Buy Now" ImageUrl="buynow.gif" />

      <asp:ButtonField DataTextField="UnitsInStock" HeaderText="Stock"
         ButtonType="button" DataTextFormatString="{0} Items"
         CommandName="Stock" />                       

   </Columns>
               
</asp:GridView>

To handle click event of the buttons in GridView you need to handle RowCommand event of the GridView control. Following code will show you how you can get RowIndex, ProductID and CommandName of the button when user click any button in the GridView. 

VB.NET

Protected Sub GridView1_RowCommand(ByVal sender As Object,
   ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs)
   Handles GridView1.RowCommand
  
   Dim currentCommand As String = e.CommandName
   Dim currentRowIndex As Integer = Int32.Parse(e.CommandArgument.ToString())
   Dim ProductID As String = GridView1.DataKeys(currentRowIndex).Value  
  
   Label1.Text = "Command: " & currentCommand
   Label2.Text = "Row Index: " & currentRowIndex.ToString
   Label3.Text = "Product ID: " & ProductID
End Sub

C#

protected void GridView1_RowCommand(object sender,
   System.Web.UI.WebControls.GridViewCommandEventArgs e)
{
   
   string currentCommand = e.CommandName;
   int currentRowIndex = Int32.Parse(e.CommandArgument.ToString());
   string ProductID = GridView1.DataKeys[currentRowIndex].Value;
   
   Label1.Text = "Command: " + currentCommand;
   Label2.Text = "Row Index: " + currentRowIndex.ToString;
   Label3.Text = "Product ID: " + ProductID;    
}