Как можно развернуть / свернуть вложенный GridView, встроенный в элемент div, при нажатии кнопки ImageButton?

Question

Для следующего кода

<asp:GridView runat="server" ID="gvCustomers" ...
...
 <Columns>
   <asp:TemplateField>
     <HeaderTemplate>
     </HeaderTemplate>
     <ItemTemplate>
       <asp:ImageButton runat="server" ID="ITimgExpand" ImageUrl="~/Images/Common/expand.gif" CommandName="Select" />
     </ItemTemplate>
   </asp:TemplateField>
   ...
   <asp:TemplateField>
     <ItemTemplate>
      </td></tr>
        <tr>
           <td colspan="3">
              <div id="document_<%# Eval("RENTER_ID") %>" style="margin:10; display: none; position: relative">
                  <asp:GridView ID="gvDocuments" runat="server" ...
                  ...  

Как развернуть / свернуть div, который включает вложенный GridView, при нажатии ITimgExpand ImageButton?

Answer 1

Добавьте следующую функцию javascript:

function togglePanel(divId){
  if (document.getElementById){
    var container = document.getElementById(divId);
    if (container.style.display =='none'){
      container.style.display = 'block';    
    }else{
      container.style.display ='none';
    }    
  }
}

Затем ваш ImageButton вызовет функцию, передающую идентификатор

<asp:imagebutton id="ImgBtn" runat="server" onclientclick="togglePanel('document_<%# Eval("RENTER_ID") %>')" />

Answer 2

Используйте для этого функцию Jquery hide.

http://jqueryui.com/demos/hide/#default