C# Get the row index of a GridView by clicking a cell

Question

I have this GridView:

<asp:GridView ID="gvTabelaTeste" runat="server" AutoGenerateColumns="false" CssClass="w3-table w3-striped w3-white w3-hoverable w3-centered" OnRowDataBound="gvTabelaTeste_RowDataBound">
  <Columns>
    <asp:BoundField DataField="Status" HeaderText="Status"/>
    <asp:BoundField DataField="Atividade" HeaderText="Atividade"/>
    <asp:BoundField DataField="Analista" HeaderText="Analista"/>
    <asp:BoundField DataField="DtInicial" HeaderText="Data de abertura"/>
    <asp:BoundField DataField="DtFinal" HeaderText="Data de validade"/>
  </Columns>
</asp:GridView>

and this two divs:

<div id="light" class="white_content">
  <h6 style="background-color: lightgray; margin-bottom: 0; margin-top: 0; text-align: center;"><strong>Escolher nova data de validade</strong></h6>
  <asp:Calendar ID="Calendario" runat="server" OnSelectionChanged="Calendario_SelectionChanged"></asp:Calendar>
</div>
<div id="fade" class="black_overlay"></div>

I put this code on RowDataBound event from the GridView:

e.Row.Cells[4].Attributes["onclick"] = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';";

So, when I click on the cell 4 of every row, it changes the style display of the divs, to make it similar to a popup. Inside the div I have a Calendar, that contains this code on SelectionChanged event:

gvTabelaTeste.Rows[/*here should be the row index*/].Cells[4].Text = Calendario.SelectedDate.ToShortDateString();

What I'm trying to do is change the text of the clicked cell to the selected date on the calendar, but the problem is that I can't get the index of the row of the cell that was clicked.

How can I do that? I've tried different methods, but until now no one worked for me.

Answer 1

The how to get the rowIndex has been answered here: WPF- How to get selected row index in datagrid?

See if this fits your needs.

Answer 2

I believe you shoud first "select" row in a GridView. After that it is easy.

Html

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CalendarApp._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    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:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
</asp:Content>

Code behind

    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");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex);
            e.Row.ToolTip = "Click to select this row.";
        }
    }

    protected void OnSelectedIndexChanged(object sender, EventArgs e)
    {
        selectedIndex = GridView1.SelectedIndex;
        foreach (GridViewRow row in GridView1.Rows)
        {
            if (row.RowIndex == GridView1.SelectedIndex)
            {
                row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
                row.ToolTip = string.Empty;
            }
            else
            {
                row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
                row.ToolTip = "Click to select this row.";
            }
        }
    }

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        GridView1.Rows[GridView1.SelectedIndex].Cells[0].Text = Calendar1.SelectedDate.ToString("d");
    }

Borrowed and adapted for you from: https://www.aspsnippets.com/Articles/Selecting-GridView-Row-by-clicking-anywhere-on-the-Row.aspx