I am facing an issue with a JavaScript function that is used to expand and collapse a child gridview inside its parent gridview. My problem arises when I try to retrieve the value of a specific cell in the current row of the parent gridview, or even just its row index. Despite my efforts, I have been unsuccessful in getting the desired result, as I keep retrieving the value or row index of the current row in the child gridview.
Below is the snippet of my aspx code with the JavaScript function:
<script language="javascript" type="text/javascript">
function toggleDiv(divname)
{
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none")
{
div.style.display = "inline";
img.src = "minus.gif";
}
else
{
div.style.display = "none";
img.src = "plus.gif";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<input id="Hidden1" type="hidden" runat="server" value="" />
<asp:GridView ID="gvOrders" runat="server" DataKeyNames="OrderID" Width="750px" AutoGenerateColumns="False" OnRowDataBound="gvOrders_RowDataBound" GridLines="None"
BorderStyle="Solid" BorderWidth="3px" BorderColor="Blue" style="z-index: 100; left: 126px; position: absolute; top: 96px" BackColor="White" OnRowCommand="gvOrders_RowCommand"
OnSelectedIndexChanged="gvOrders_SelectedIndexChanged">
<RowStyle BackColor="#E1E1E1" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="LightBlue" Font-Bold="True" ForeColor="Black" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="JavaScript:toggleDiv('div<%# Eval("OrderID") %>');">
<img id="imgdiv<%# Eval("OrderID") %>" width="9px" src="plus.gif" alt =""/>
</a>
</ItemTemplate>
<ItemStyle Width="20px" />
<ControlStyle BackColor="Black" />
</asp:TemplateField>
// Rest of the GridView code
In my code behind, I have the following function:
protected void gvChildGrid_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView gv = (GridView)gvOrders.Rows[e.NewEditIndex].FindControl("gvChildGrid");
GridViewRow parentRow = (GridViewRow)gv.Parent.Parent;
int indexRow = int.Parse(parentRow.RowIndex.ToString().Trim()); //gvOrders.Rows[e.NewEditIndex].Cells[1].Text.ToString().Trim());
//int indexRow = parentRow.RowIndex;
I have tried various methods such as using hidden fields and evaluating variables in the gridview template field, but none have yielded the desired results so far. As the expand/collapse functionality is handled using JavaScript, I am struggling to access the parent gridview through conventional methods like _IndexChanged or _RowCommand.
To make debugging easier, I included the code snippet in the _RowEditing method, even though I am aware that e pertains to the child gridview. The commented out lines are attempts that either failed or retrieved the current row of the child gridview.
Admittedly, I am relatively new to C# programming, and I suspect that I may be overlooking something obvious. However, despite my best efforts, I have been unable to pinpoint the issue.