Question

I have an .ascx control inside la page. In that control, I have a GridView with expandable content. So far so good. My problem started when I tried to create Expand all/Collapse All buttons. For some reason, I have to put the Javascript functions in the .aspx page, otherwise they can’t be found.

How can I retreive the gridview data from the control? I want to call my expandOne function for each row, but I can’t acces the rows. expandOne works fine on one row.

var gvObject = document.getElementById('GridView1'); 

is null.

var gvObject = $('GridView1');

gives something that is not a grid (gvObject.rows is null) and gvObject.length == 0

var grid = document.getElementById('<%=GridView1.ClientID %>');

will crash (‘GridView1’ doesn’t exist in the current context).

.

Here is the HTML

<asp:GridView ID="GridView1" runat="server" AllowPaging="false" AutoGenerateColumns="False" ShowHeader="false">
<Columns>
  <asp:TemplateField>
      <ItemTemplate>
          <a href="javascript:collapseExpand('Job-<%# Eval("Index") %>');" >
          <img id="imageJob-<%# Eval("Index") %>"  alt="Click to show/hide orders"  border="0" src="../images/plus.png" /></a>
      </ItemTemplate>
  </asp:TemplateField>
  <asp:BoundField DataField="TitleCnt" />

  <asp:TemplateField>
      <ItemTemplate>
          <tr><td colspan="100%">
              <div id="Job-<%# Eval("Index") %>" style="display:none; left:25px;" class="answer">
                <asp:Label Text="Some content" runat="server"></asp:Label>
              </div>
          </td></tr>
      </ItemTemplate>
  </asp:TemplateField>
</Columns>
</asp:GridView>

and the javascript

function expandOne(obj) {
    var gvObject = document.getElementById(obj);
    var imageID = document.getElementById('image' + obj);
    gvObject.style.display = "inline";
    imageID.src = "../images/moins.png";
}

function ExpandAll() {
    var gvMaster = $('GridView1');
    for (i = 0; i < gvMaster.rows.length; i++) {
        expandOne('Job' + i);
    }
}

Thanks a lot.

Answer 1

If you are using .Net 4, you can set set the GridView’s ClientIDMode="Static". This will result in a table on the client where the id property is “GridView1”. Then this should get you the table:

var gvObject = document.getElementById('GridView1');

And your jQuery selection will work too, but you have to include the # character:

var gvObject = $('#GridView1');

For info on the ClientIDMode, see http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx