//The below script is for making child gridview collapse or extend

<script type="text/javascript" language="javascript">

// not animated collapse/expand
function togglePannelStatus(content)
{
var expand = (content.style.display=="none");
content.style.display = (expand ? "block" : "none");
toggleChevronIcon(content);
}

// current animated collapsible panel content

var currentContent = null;

function togglePannelAnimatedStatus(content, interval, step)

{
// wait for another animated expand/collapse action to end
if (currentContent==null)
{
currentContent = content;
var expand = (content.style.display=="none");
if (expand)
content.style.display = "block";
var max_height = content.offsetHeight;

var step_height = step + (expand ? 0 : -max_height);

toggleChevronIcon(content);

// schedule first animated collapse/expand event

content.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ interval + "," + step
+ "," + max_height + "," + step_height + ")", interval);
}
}
function togglePannelAnimatingStatus(interval,
step, max_height, step_height)
{
var step_height_abs = Math.abs(step_height);

// schedule next animated collapse/expand event

if (step_height_abs>=step && step_height_abs<=(max_height-step))
{
step_height += step;
currentContent.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ interval + "," + step+ "," + max_height + "," +
step_height + ")", interval);
}
// animated expand/collapse done
else
{
if (step_height_abs<step)
currentContent.style.display = "none";
currentContent.style.height = "";
currentContent = null;
}
 }
</script>
// change chevron icon into either collapse or expand
function toggleChevronIcon(content)
{
var chevron = content.parentNode
.firstChild.childNodes[1].childNodes[0];
var expand = (chevron.src.indexOf("expand.gif")>0);
chevron.src = chevron.src
.split(expand ? "expand.gif" : "collapse.gif")
.join(expand ? "collapse.gif" : "expand.gif");
}
</script>

//Adding Div Tag above a Parent GridView, for scrollbars

<div id="Div1" style="overflow: auto; width: 98%; height: 180px">

//Adding Parent GridView inside a Div Tag

<asp:GridView ID="GrdViewParent" runat="server"

AutoGenerateColumns="false"
onrowdatabound="GrdViewParent_RowDataBound" Width="608px" Height="105px"
onrowcommand="GrdViewParent_RowCommand">

<HeaderStyle HorizontalAlign="Left" CssClass="GridHeader" />

<RowStyle CssClass="GridRowStyle" HorizontalAlign="Left" />

<AlternatingRowStyle CssClass="GridAlternateRowStyle" />

<Columns>

<asp:BoundField DataField="Category" HeaderText="Category Name"/>

<asp:BoundField DataField="SubCategory" HeaderText="SubCategory Name"/>

<asp:TemplateField HeaderText="Questions" HeaderStyle-

HorizontalAlign="Center">

<ItemTemplate>

<!-- Animated collapsible panel, with separate CSS and JavaScript -->
<div style="width:430px;">
<div>
<div style="height:20px; cursor: pointer;"
onclick="togglePannelStatus(this.nextSibling)">
<!—To show an Image for the Inner whether it is extended for
collapsed-->

<div style="float: left">View Questions</div>

<div style="float: right; vertical-align: middle">

<img src="../Images/expand.gif" width="13" height="14" border="0"
alt="Show/Hide" title="Show/Hide" />
</div>
 </div>
<div style="display:none">
//Adding Div Tag above a Child GridView, for scrollbars

<div id="Div1" style="overflow: auto; width: 425; height: 80px">

//Adding Child GridView inside a Div Tag

<asp:GridView ID="GrdViewChild" runat="server"

AutoGenerateColumns="false" DataKeyNames="QuestionId" Width="403"
height="75px">

<HeaderStyle HorizontalAlign="Left" CssClass="GridHeader"

/>
<Columns>

<asp:BoundField DataField="QuestionId" HeaderText="QuestionId"

Visible="false"/>

<asp:BoundField DataField="QsnDesc" HeaderText="Question" ItemStyle-

Width="385" ItemStyle-HorizontalAlign="Left" />

<asp:TemplateField HeaderText="Select" HeaderStyle-

HorizontalAlign="Center">

<ItemTemplate>

<asp:CheckBox ID="chk" runat="server" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>
</div>
</div>
</div>

</ItemTemplate>
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

Code Behind

protected void Page_Load(object sender, EventArgs e)

{
if (!Page.IsPostBack)
 {
CategoriesManual();
}
}
private void CategoriesManual()
{
DataSet ds = SqlHelper.ExecuteDataset(sCon,
"Ps_WFM_GetCatNSCatList");

if (ds.Tables.Count > 0)
{
if (ds.Tables[0].Rows.Count > 0)
{
GrdViewParent.DataSource = ds.Tables[0];
GrdViewParent.DataBind();
}
}
}

//RowDataBound

protected void GrdViewParent_RowDataBound(object sender,

GridViewRowEventArgs e)
{
if (e.Row.RowIndex != -1)
{
int index = e.Row.RowIndex;

string sCatId =
GrdViewParent.DataKeys[index].Values["CategoryId"].ToString();
string sSubCatId =
GrdViewParent.DataKeys[index].Values["SubCategoryId"].ToString();

//Binding Data to child gridview

DataSet ds = SqlHelper.ExecuteDataset(sCon, "Ps_WFM_GetCatNSCatQsnList",
sCatId, sSubCatId);

if (ds.Tables.Count > 0)
{
if (ds.Tables[0].Rows.Count > 0)
{
GridView Grd = (GridView)
(e.Row.Cells[2].FindControl("GrdViewChild"));
Grd.DataSource = ds.Tables[0];
Grd.DataBind();
}
}
}
}