GridviewClickableRow

How to implement clickable rows in gridview in asp.net

Spread the love

Hello, in this article, I will be explaining how to create an asp.net gridview control with clickable rows.

1. Create a new website and let’s name it GridviewClickableRow
CreateNewWebsite_ClickableGrid

2. Select Asp.Net Empty Website and provide the name for the website (in our case, GridviewClickableRow)
ProvideProjectName_GridviewClickableRow

3. Add new web form (let’s name it Default.aspx).AddNewWebForm_NestedGrids

4. Add the following code in aspx page (default.aspx)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Label ID="lbselected" runat="server" />
        <asp:GridView ID="grd" AutoGenerateColumns="true" OnRowDataBound="grd_RowDataBound" 
            OnSelectedIndexChanged="grd_SelectedIndexChanged" runat="server">
 
        </asp:GridView>
        <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
    </form>
</body>
</html>

5. Add the following code in code behind (default.aspx.cs)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack == false)
        {
            GrdBind();
        }
    }
    protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(grd, "Select$" + e.Row.RowIndex);
            e.Row.ToolTip = "Click to select this row.";
        }
    }
 
    protected void grd_SelectedIndexChanged(object sender, EventArgs e)
    {
        foreach (GridViewRow row in grd.Rows)
        {
            if (row.RowIndex == grd.SelectedIndex)
            {
                lbselected.Text = row.Cells[1].Text;
                row.BackColor = System.Drawing.Color.Silver;
                row.ToolTip = string.Empty;
            }
            else
            {
                row.BackColor = System.Drawing.Color.White;
                row.ToolTip = "Click to select this row.";
            }
        }
    }
 
    private void GrdBind()
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = "server=SUNNY-PC\\SQLEXPRESS;database=AspSkills;integrated security=true;";
        SqlCommand cmd = new SqlCommand("select * from country_tbl",con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        cmd.Dispose();
        grd.DataSource = ds;
        grd.DataBind();
    }
}

6. Run the project and you should see gridview with clickable rows, as shown below:
GridviewClickableRow


Leave a Reply

Your email address will not be published. Required fields are marked *