Example: Set Tables to Open in Collapsed State

By default, the "total record count" is collapsed and the "table rows" are expanded in table panels when a page containing the table panel is first displayed.  This is accomplished via the ‘display’ property in the Style attribute, e.g.:

<table id="CollapsibleRegionTotalRecords" style="display:none;" cellspacing="0" cellpadding="0" border="0">

     (total record count)

</table>

<table id="CollapsibleRegion" style="display:block;" cellspacing="0" cellpadding="0" border="0" class="master_table">

     (table rows)

</table>

The style specification "display:none" tells the browser not to show it, while "display:block" means show the entire table as a unit/block.

To reverse the default setting ("total record count" shown, "table rows" collapsed), just swap the style attributes via the Tag Properties dialog (Right-click, Styles, Table…), e.g.:

<table id="CollapsibleRegionTotalRecords" style="display:block;" cellspacing="0" cellpadding="0" border="0">

     (total record count)

</table>

<table id="CollapsibleRegion" style="display:none;" cellspacing="0" cellpadding="0" border="0" class="master_table">

table rows)

</table>

The HTML in a specific page, e.g., ShowCustomersTable.aspx, can be modified as shown above to simultaneously show the TotalRecords and hide the table rows for a specific table displayed on the page.

Finally, the "expand/collapsed" icon (that little plus and minus sign graphic) should be swapped as well. So originally, it is:

<td class="dialogHeaderExpandCollapseIcon" valign="middle">

     <a href="#" onClick="toggleExpandCollapse(this);">

          <img id="ExpandCollapseIcon" src="../Images/DialogHeaderIconCollapse.gif" border="0"></a>

</td>

The reversed default setting ("total record count" shown, "table rows" collapsed) should then use the opposite icon:

<td class="dialogHeaderExpandCollapseIcon" valign="middle">

     <a href="#" onClick="toggleExpandCollapse(this);">

          <img id="ExpandCollapseIcon" src="../Images/DialogHeaderIconExpand.gif" border="0"></a>

</td>

See Also

Configuring Cell, Row and Table Styles