-
1. Re: Using an extendedDataTable at 100% width (with resizing of parent div)
bleathem Aug 28, 2013 4:13 PM (in response to ibenjes)1 of 1 people found this helpfulThe EDT's javascript resize listeners should resize the EDT when the size of the viewport is changed. Can you debug the javascript and see if the resize event is correctly being observed? What happens if you manual invoke the updateLayout method from the browser console?
-
2. Re: Re: Using an extendedDataTable at 100% width (with resizing of parent div)
ibenjes Aug 30, 2013 10:46 AM (in response to bleathem)Hi Brian,
thanks for your tip, that got me a bit closer.
I had some other functions that were called on window resize which seemed to interfere with the updating of the extendedDataTable layout. Once I've changed that changing the browser window would change the extendedDataTable as well.
However if you have the table in a div and only that div changes its size the EDT is not being updated.
I have a little test page. If you click on 'Big' it will change the parent div of the first table to 1000px but (at least for me) the EDT is not being resized. When you click on 'Update Layout' it works okay. When you change the browser width the second EDT is updated correctly.
The backing bean 'textBeajust returns a list of Strings.
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a="http://richfaces.org/a4j" xmlns:s="http://jboss.org/schema/seam/taglib" xmlns:rich="http://richfaces.org/rich"> <f:view> <h:head> </h:head> <h:body> <s:div> <script type="text/javascript">//<![CDATA[ function layoutChange(){ #{rich:component('testtable')}.updateLayout(); } function small(){ jQuery('.tabcontainer').width(200); } function big(){ jQuery('.tabcontainer').width(1000); } // ]]></script> <a onclick="layoutChange()">Update Layout</a> <a onclick="small()">Small</a> <a onclick="big()">Big</a> <s:div styleClass="tabcontainer" style="width:200px;"> <rich:extendedDataTable id="testtable" value="#{testBean.cars}" var="car" style="width:100%" width="100%"> <rich:column width="500"> #{car} </rich:column> <rich:column width="500"> #{car} </rich:column> <rich:column width="200"> #{car} </rich:column> <rich:column width="200"> #{car} </rich:column> <rich:column width="200"> #{car} </rich:column> <rich:column width="1000"> #{car} </rich:column> </rich:extendedDataTable> </s:div> <s:div style="width:100%"> <rich:extendedDataTable id="testtable2" value="#{testBean.cars}" var="car" style="width:100%" width="100%"> <rich:column width="500"> #{car} </rich:column> <rich:column width="500"> #{car} </rich:column> <rich:column width="200"> #{car} </rich:column> <rich:column width="200"> #{car} </rich:column> <rich:column width="200"> #{car} </rich:column> <rich:column width="1000"> #{car} </rich:column> </rich:extendedDataTable> </s:div> </s:div> </h:body> </f:view> </ui:composition>
-
3. Re: Re: Using an extendedDataTable at 100% width (with resizing of parent div)
bleathem Aug 30, 2013 1:00 PM (in response to ibenjes)I've fixed an issue in the upcoming 4.3.4 where the resizeListener of the EDT wasn't playing nicely with other resizeListeners (RF-13117).
As for changing size with an arbitrary resize - for you can register your own listener to the parent's resize using jQuery.on - have the callback invoke the EDT's updateLayout. Longer term, you can file a feature request in jira asking for the EDT to respond to parent resize events.
-
4. Re: Re: Using an extendedDataTable at 100% width (with resizing of parent div)
ibenjes Sep 2, 2013 8:11 AM (in response to bleathem)Hi Brian,
I've tried to register a callback on the parent div with
jQuery('.tabcontainer').resize(function() {...});
and with
jQuery('.tabcontainer').on('resize',function(){});
but both don't seem to work.
I've seen that there is a plug-in 'jquery resize' to enable resize events on divs and not only the main window (http://benalman.com/projects/jquery-resize-plugin/) but that looks old. Is that plug-in still needed in jQuery 1.8.3?
-
5. Re: Using an extendedDataTable at 100% width (with resizing of parent div)
bleathem Sep 3, 2013 5:54 PM (in response to ibenjes)The jQuery docs http://api.jquery.com/resize/ indicate that indeed the resize event is only triggered when the window size changes. You'll have to find some other means of listening to div resize events. Perhaps the library you are using to resize the div fires an event that you can listen to? Otherwise a quick google search shows a lot of possible solution on stackoverflow.com.