Открыть gridview внутри поля шаблона gridview

Question

У меня есть кнопка изображения в поле шаблона сетки. Я хочу открыть другое gridview под строкой, в которой нажата кнопка «плюс», но моя проблема заключается в том, что внутреннее gridview открывается как столбец с представлением родительской сетки и не открывается ниже выбранной строки. Я пробовал различные методы проектирования, но все еще не работал. Я использую Jquery, чтобы открыть дочерний gridview на клике кнопки изображения. Ниже представлен дизайн моей сетки и кода для JQuery.

<div class="gridContentholder"> 
    <asp:GridView ID="grdsamplestock" runat="server" AlternatingRowStyle-CssClass="alt" 
       AutoGenerateColumns="False" CssClass="styleGrid" GridLines="None" OnSelectedIndexChanged="grdsamplestock_SelectedIndexChanged" 
       OnRowDataBound="grdsamplestock_RowDataBound" OnRowCreated="grdsamplestock_RowCreated"> 
      <AlternatingRowStyle CssClass="alt" /> 
      <Columns> 
       <asp:TemplateField> 
        <ItemTemplate> 
        <asp:HiddenField ID="hdnSampleStockMasterID" runat="server" Value='<%#Eval("SampleStockMasterID") %>' /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:BoundField HeaderText="DoctorName" DataField="DoctorName" /> 
        <asp:BoundField HeaderText="Comments" DataField="Comments" /> 
        <asp:BoundField HeaderText="TotalSampleStockQuantity" DataField="TotalSampleStockQuantity" /> 
        <asp:BoundField HeaderText="SampleDate" DataField="SampleDate" SortExpression="SampleDate" 
         DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" NullDisplayText="N/A" /> 
        <asp:TemplateField> 
         <ItemTemplate> 
          <a href="javascript:expandcollapse('div<%# Eval("SampleStockMasterID") %>', 'one');"> 
           <img id="imgdiv<%# Eval("SampleStockMasterID") %>" alt="Click to show/hide Orders for Customer <%# Eval("SampleStockMasterID") %>" 
            width="9px" border="0" src="../Images/plus.gif" /> 
          </a> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField> 
         <ItemTemplate> 
          <%--<asp:Panel ID="pnlInnerGrid" runat="server" >--%> 
          <tr style="display: none;" id="div<%# Eval("SampleStockMasterID") %>"> 
           <td colspan="5"> 

            <asp:GridView ID="grdItems" CssClass="styleGrid" PagerStyle-CssClass="pgr" runat="server" 
             AutoGenerateColumns="false" GridLines="None" OnRowCreated="grdItems_RowCreated" 
             AlternatingRowStyle-CssClass="alt" > 
             <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle> 
             <Columns> 
              <asp:BoundField HeaderText="Reference No" DataField="ReferenceNo" /> 
              <asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" /> 
              <asp:BoundField DataField="Specification" HeaderText="Specification" SortExpression="Specification" /> 
              <%-- <asp:BoundField DataField="StoreKeeparID" HeaderText="StoreKeeparID" SortExpression="StoreKeeparID" />--%> 
              <%--<asp:BoundField DataField="Name" HeaderText="StoreKeeper Name" SortExpression="Name" />--%> 
              <asp:BoundField DataField="WarehouseName" HeaderText="Warehouse" SortExpression="WarehouseNmae" /> 
              <asp:BoundField HeaderText="Expiry Date" DataField="ExpiryDate" DataFormatString="{0:d}" 
               HtmlEncode="false" /> 
              <asp:BoundField HeaderText="Lot No" DataField="LotNo" /> 
              <asp:TemplateField> 
               <ItemTemplate> 
                <asp:HiddenField ID="SampleStockTrsID" runat="server" Value='<%# Eval("SampleStockTrsID") %>' /> 
               </ItemTemplate> 
              </asp:TemplateField> 
             </Columns> 
            </asp:GridView> 

           </td> 
          </tr> 
          <%-- </asp:Panel>--%> 
         </ItemTemplate> 
        </asp:TemplateField> 
       </Columns> 
      </asp:GridView> 
    </div> 

// Код для JQuery.

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     //   var=$('div[id^="player_"]') 

    }); 
    function expandcollapse(obj, row) { 
     var div = document.getElementById(obj); 
     var img = document.getElementById('img' + obj); 
     if (div.style.display == "none") { 
      div.style.display = ""; 
      $(div).hide().show(1000); 
      if (row == 'alt') { 
       img.src = "../Images/minus.gif"; 
      } 
      else { 
       img.src = "../Images/minus.gif"; 
      } 
      img.alt = "Close to view other Sample Transaction"; 
     } 
     else { 
      $(div).hide(1000, function() { 
       div.style.display = "none"; 
      }); 
      if (row == 'alt') { 
       img.src = "../Images/plus.gif"; 
      } 
      else { 
       img.src = "../Images/plus.gif"; 
      } 
      img.alt = "Expand to show Available Stock"; 
     } 
    } 
</script> 

Answer 1

Я использовал это в одном из своих предыдущих проектов. Предоставление образца кода exect из моего проекта. Просто измените его в соответствии с вашими потребностями. Не стесняйтесь задавать вопросы.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemStyle BackColor="#C2D88B" Width="250px" /> 
      <ItemTemplate> 
       <div> 
        //Draw your table here by placing a html table 
       </div> 
       <div> 
        <p> 
         <asp:ListView ID="ListView1" runat="server"> 
          <ItemTemplate> 
           <asp:Label ID="Label1" runat="server" Text='<%# Eval("item_id") %>'></asp:Label> 
           <asp:Label ID="Label2" runat="server" Text='<%# Eval("quantity") %>'></asp:Label> 
          </ItemTemplate> 
          <ItemSeparatorTemplate> 
          <br />           
          </ItemSeparatorTemplate> 
         </asp:ListView> 
        </p> 
       </div> 
      </ItemTemplate> 
     </asp:TemplateField>     
    </Columns> 
</asp:GridView>