GridView:
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" ShowFooter="True" AllowPaging="True" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:expandcollapse('<%# Eval("GridViewField") %>', 'one');">
<img id="img<%# Eval("GridViewField") %>" alt="Click to show/hide Details f or this Book No <%# Eval("GridViewField") %>"
width="9px" border="0" src="../Images/plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="GridViewField" HeaderText="Header Name" />
<asp:TemplateField ItemStyle-Width="1px">
<ItemTemplate>
<tr>
<td colspan="100%" style="height: 0px; padding: 0px">
<div id="div<%# Eval("GridViewField") %>" style="display: none; position: relative;left: 5px; overflow: auto; width: 99%; border: 0px">
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="true" CssClass="gridView"
AlternatingRowStyle-CssClass="gv_altRow" FooterStyle-CssClass="gv_footer" PagerStyle-CssClass="gv_pager" OnRowDataBound="gvDetails_RowDataBound"> </asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
<ItemStyle Width="1px"></ItemStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>
Javascript:
function expandcollapse(obj, row) {
var div = document.getElementById('div' + obj);
// var tr = document.getElementById('tr' + obj);
var img = document.getElementById('img' + obj);
if (div.style.display == "none") {
// tr.style.display = "block";
divName = obj;
div.style.display = "block";
if (row == 'alt') {
img.src = "../Images/minus.gif";
}
else {
img.src = "../Images/minus.gif";
}
img.alt = "Close to view other Challan";
}
else {
// tr.style.display = "none";
div.style.display = "none";
if (row == 'alt') {
img.src = "../Images/plus.gif";
}
else {
img.src = "../Images/plus.gif";
}
img.alt = "Expand to show Challan Products";
}
}
In C# or VB:
Bind data on grid view row data bound what you want.
No comments:
Post a Comment