The Below Script Is for Making Child Gridview Collapse Or Extend

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

scripttype="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

divid="Div1"style="overflow: auto; width: 98%; height: 180px">

//Adding Parent GridView inside a Div Tag

asp:GridViewID="GrdViewParent"runat="server"AutoGenerateColumns="false"

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

HeaderStyleHorizontalAlign="Left"CssClass="GridHeader" />

RowStyleCssClass="GridRowStyle"HorizontalAlign="Left"/>

AlternatingRowStyleCssClass="GridAlternateRowStyle"/>

Columns

asp:BoundFieldDataField="Category"HeaderText="Category Name"/>

asp:BoundFieldDataField="SubCategory"HeaderText="SubCategory Name"/>

asp:TemplateFieldHeaderText="Questions"HeaderStyle-HorizontalAlign="Center">

ItemTemplate

<!-- Animated collapsible panel, with separate CSS and JavaScript -->

divstyle="width:430px;">

div

divstyle="height:20px; cursor: pointer;" onclick="togglePannelStatus(this.nextSibling)">

<!—To show an Image for the Inner whether it is extended for collapsed-->

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

divstyle="float: right; vertical-align: middle"> imgsrc="../Images/expand.gif"width="13"height="14"border="0"

alt="Show/Hide"title="Show/Hide"/> </div

</div

divstyle="display:none">

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

divid="Div1"style="overflow: auto; width: 425; height: 80px">

//Adding Child GridView inside a Div Tag

asp:GridViewID="GrdViewChild"runat="server"AutoGenerateColumns="false"DataKeyNames="QuestionId" Width="403"height="75px">

HeaderStyleHorizontalAlign="Left"CssClass="GridHeader" />

Columns

asp:BoundFieldDataField="QuestionId"HeaderText="QuestionId"Visible="false"/>

asp:BoundFieldDataField="QsnDesc"HeaderText="Question"ItemStyle-Width="385"ItemStyle-HorizontalAlign="Left" />

asp:TemplateFieldHeaderText="Select"HeaderStyle-HorizontalAlign="Center">

ItemTemplate

asp:CheckBoxID="chk"runat="server"/>

</ItemTemplate

</asp:TemplateField

</Columns

</asp:GridView

</div

</div

</div

</div

</ItemTemplate

HeaderStyleHorizontalAlign="Center"</HeaderStyle

</asp:TemplateField

</Columns

</asp:GridView

</div

Code Behind

protectedvoid Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

CategoriesManual();

}

}

privatevoid 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

protectedvoid 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();

}

}

}

}