In this article I will explain with an example, how to use the RowCommand event in ASP.Net GridView with C# and VB.Net.
HTML Markup
The
HTML Markup consists of:
GridView – For displaying data.
Columns
The
GridView consists of two
TemplateField columns
TemplateField – Both TemplateField consists of ItemTemplate
The first ItemTemplate consist of
TextBox.
TextBox – For showing Name.
The Second ItemTemplate consist of Button.
Button – for control CommandArgument property and is bound to the Container.DataItemIndex property.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Name" ItemStyle-Width="150">
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150px" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Select" runat="server" CommandName="Select" CommandArgument="<%# Container.DataItemIndex%>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Binding the ASP.Net GridView control
Inside the
Page_Load event handler, an object of
DataTable is created.
Then, three columns are added to the
DataTable Columns collection using the
AddRange method.
An Array of objects of type DataColumn is specified which will hold the name and the optional parameter Data Type i.e. the Type of the column.
Once the schema is ready i.e. all the columns are defined, some rows have been added using the Rows.Add method.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] {
new DataColumn("Id"),
new DataColumn("Name"),
new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {
New DataColumn("Id"),
New DataColumn("Name"),
New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
gvCustomers.DataSource = dt
gvCustomers.DataBind()
End If
End Sub
Calling GridView RowCommand event on Button Click in ASP.Net
When the Select Button is clicked, the OnRowCommand event handler is executed. First the Button that was clicked is identified using the CommandName property of the GridViewCommandEventArgs object.
Then the row index is determined using the
CommandArgument property of
GridViewCommandEventArgs object and using the row index, the
GridView Row is determined.
The
TextBox control is referenced using the
FindControl method of the
GridView Row by passing the
ID of the control as parameter.
FindControl method returns the
TextBox as an object of Control class and hence it has to be type casted to its respective type in order to access its properties.
The value of
Name column is fetched from the
TextBox, while the value of Country column is fetched from the
GridView Cell based on the Column Index.
The
name and
country values are displayed using
JavaScript Alert message box.
C#
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
//Determine the RowIndex of the Row whose Button was clicked.
int rowIndex = Convert.ToInt32(e.CommandArgument);
//Reference the GridView Row.
GridViewRow row = gvCustomers.Rows[rowIndex];
//Fetch value of Name.
string name = (row.FindControl("txtName")as TextBox).Text;
//Fetch value of Country
string country = row.Cells[1].Text;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + name + "\\nCountry: " + country + "');", true);
}
}
VB.Net
Protected Sub GridView1_RowCommand(sender As Object, e As GridViewCommandEventArgs)
If e.CommandName = "Select" Then
'Determine the RowIndex of the Row whose Button was clicked.
Dim rowIndex As Integer = Convert.ToInt32(e.CommandArgument)
'Reference the GridView Row.
Dim row As GridViewRow = gvCustomers.Rows(rowIndex)
'Fetch value of Name.
Dim name As String = TryCast(row.FindControl("txtName"), TextBox).Text
'Fetch value of Country
Dim country As String = row.Cells(1).Text
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Name: " & name & "\nCountry: " & country + "');", True)
End If
End Sub
Screenshot
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads