In this article I will explain with an example, how to select
GridView row without using select button in
ASP.Net.
Note: For more information on
GridView, please refer my articles:
How to change GridView Row Color on MouseOver in ASP.Net
HTML Markup
The
HTML Markup consists of following controls:
GridView – For displaying data.
Columns
The
GridView consists of two
BoundField columns.
LinkButton - Dummy LinkButton.
<asp:GridView ID="gvCustomers" HeaderStyle-BackColor="#3AC0F2"
runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound" OnSelectedIndexChanged="OnSelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
Namespaces
You will need to import the following namespaces
C#
using System.Data;
using System.Drawing;
VB.Net
Imports System.Data
Imports System.Drawing
Binding the GridView
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", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country", typeof(string))});
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", GetType(Integer)),
New DataColumn("Name", GetType(String)),
New DataColumn("Country", GetType(String))})
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
Select GridView Row without Select Button in ASP.Net
Inside the
OnRowDataBound event handler, for each
GridView Row a
JavaScript click event handler is attached using the
onclick attribute.
The
GetPostBackClientHyperlink method accepts the
GridView instance as well as the command with the Row Index of the Row.
Note: GetPostBackClientHyperlink when rendered this gets converted to the JavaScript __doPostBack method that we were discussing earlier.
Here the above makes each
GridView Row clickable and also it executes the
OnSelectedIndexChanged event handler (discussed below) when clicked.
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvCustomers, "Select$" + e.Row.RowIndex);
e.Row.ToolTip = "Click to select this row.";
}
}
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes("onclick") = Page.ClientScript.GetPostBackClientHyperlink(gvCustomers, "Select$" & e.Row.RowIndex)
e.Row.ToolTip = "Click to select this row."
End If
End Sub
Changing color using OnSelectedIndexChanged event handler
Inside the
OnSelectedIndexChanged event handler, The
GridView Row is clicked when event is triggered.
Here any
GridView row is clicked the background color of the Selected
GridView Row is changed.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
foreach (GridViewRow row in gvCustomers.Rows)
{
if (row.RowIndex == gvCustomers.SelectedIndex)
{
row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
row.ToolTip = string.Empty;
}
else
{
row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
row.ToolTip = "Click to select this row.";
}
}
}
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
For Each row As GridViewRow In gvCustomers.Rows
If row.RowIndex = gvCustomers.SelectedIndex Then
row.BackColor = ColorTranslator.FromHtml("#A1DCF2")
row.ToolTip = String.Empty
Else
row.BackColor = ColorTranslator.FromHtml("#FFFFFF")
row.ToolTip = "Click to select this row."
End If
Next
End Sub
Screenshot
Handling the Event Validation Error
Since we are attaching the event directly to the
GridView Row which by default does not have any
OnClick event, you might land into the following error.
Invalid postback or callback argument. Event validation is enabled using <pagesenableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use theClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
To resolve the above error, you must set the property EnableEventValidation = "false"
in the @Page Directive as shown below
Demo
Downloads