Sunday, January 13, 2013

Grid View Under Grid View in asp.net



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