How to see whether extendedDataTable is being reloaded?

[ibenjes]

Hi,

I have a problem with extendedDataTable. I am trying to avoid to have vertical scrollbars on the table and made the table horizontally scrollable

with

{code}.extdt-innerdiv { overflow-y: hidden; overflow-x: auto;  position:relative !important;  }{code}

The size of the table isn't specified in pixel but with:

{code}<rich:extendedDataTable
     id="celTable"
     tableState="#{userProfile.tableState}"
     value="#{events}"
     onRowMouseOver="tableRowColor=this.style.backgroundColor;this.style.backgroundColor=tableRowHighlight"
     onRowMouseOut="this.style.backgroundColor=tableRowColor"
     rowClasses="tableRowOdd, tableRowEven"
     var="c"
     noDataLabel="#{messages['event.search.none']}"
     rows="#{userProfile.eventRows}"
     width="100%"
     height="100%"
     styleClass="dataTable">{code}

100%. Now the trick to size the table correctly that all rows (e.g. 10) are being displayed without scrollbar is

{code}<div id="reRenderThisDivOnAjax">
     <rich:extendedDataTable ... >
     </rich:extendedDataTable>
     <!--  The script is called everytime the table is reloaded -->
     <script>
     jQuery('.extdt-content').height('100%');
     </script>
</div>{code}

The script is called every time that div is reloaded (e.g via Ajax). That works fine for when I update the content of the table via Ajax and do a reRender on the containing div, the table gets resized correctly but when the user changes the table ordering or hides a column etc the script isn't being called and the table ends up showing just one or two columns with a vertical scrollbar.

I've tried moving the script block into the <rich:extendedDataTable> with no success. I couldn't find any Javascript events which were fired when the table is reloaded.

Any idea on how to register a listener which is called everytime the content/layout of the table is changed?

Any help is appreciated.

Thanks

Immo

[ibenjes]

Okay I found a solution (probably not the cleanest but it works).

I have added an a4j:outputPanel to the page which is rendered after every ajax request on the page (note reRender on the extendedDataTable did not work for me, the script was never called in the div I reRendered).

{code}
<a:outputPanel id="tableHack" layout="inline" ajaxRendered="true">
<!--  The script is called everytime the table is reloaded via ajax-->
   <script>
       jQuery('.extdt-content').height('100%');
   </script>
</a:outputPanel>
{code}