ExtendedDataTable dynamic height and JIRA Bug RF-7488

[hechegoyen]

(This is a long item since it's a prior private discussion)

Hi, my requirements include creating an Item Collection Table control (refer to attached picture) where a user would perform to basic operations:

"+" Key - Would add Rows to the table

"-" Key - Would remove a "selected" row from the table

The table height needs to be dynamic in that it would increase as the user adds rows (with a custom limit, say n-rows) and it would decrease when removing rows.

I'm currently using RichFaces 3.3.3 Final to develop a prototype for this.  I am using the ExtendedDataTable control since it seems to have everything I need (Row Selection).

As I started using the ExtendedDataTable control I found that the Table height was not dynamic as the regular dataTable control.  I also found that in JIRA Bug RF-7488 an issue that seems to point to this problem is still outstanding: https://jira.jboss.org/browse/RF-7488

Could you please recommend a way (a workaround) I can implement to achieve the behavior above within the 3.3.3 Final framework?  If you could provide an example (or multiple if more than one way) I would appreciate it, since I've been looking for a solution without avail.

As a reference, I already looked at community comments:

https://jira.jboss.org/browse/RF-7488

https://jira.jboss.org/browse/RF-4871

what I saw as explained in https://jira.jboss.org/browse/RF-7488, following the directions from Bob Shanahan, the result was as in attached "Item Table Using directions from RF-7488.JPG", where scrollers are added to the entire table (including header and footer)instead of having the table height increase/decrease as items are added.

Then, I tried the following on my own:

<style type="text/css" >

.extdt-table-layout

{

height: auto;

}

</style>

The results are in "ItemCollectionTableControl - Using extdt-table-layout - height - auto.JPG".  This doesn't actually get me there either since even though the scrollers are added to the table item elements (leaving out header and footer, which looks nicer), the table height behavior is still not like that of dataTable.

Do you have any other suggestions as to what to try?  It sounds like a CSS solution might be the way, but I'm not sure what elements to manipulate and what properties.

I'm also attaching my source code (BusMgmtControlsTest.zip) so that you see how I'm trying to use the extendedDataTable and CSS.  Hector.

[nbelaevski]

Hector,

What browsers should be supported?

[ilya_shaikovsky]

except comments in these issues - I could also propose you to checkout the RF-4.x samples and try out extendedDataTable there without height definition. In 4.x table - able to stretch to the content in this case. So you will be able to explore how this was made.

[hechegoyen]

Nick, Both IE and FireFox

[nbelaevski]

What IE versions?

[hechegoyen]

Nick, IE 7 and 8

[nbelaevski]

How about using max-height CSS property then: http://msdn.microsoft.com/en-us/library/ms530809(VS.85).aspx ? It's supported since IE7 but MSDN says that it's working in strict mode only.

[hechegoyen]

Nick, forgive me if I'm misunderstanding, but what we'd like to happen is that the Table size increases automatically (starting from size 0 rows) as new items are added.  You can see this in files (attached above at the beginning of my discussion):

ItemCollectionTableControl - Our Specification.JPG

ItemCollectionTableControl - Our Specification after a single item is added.JPG

so, I'm not sure how I would use max-height CSS property.  The documentation says that if no max-height is desired that it should not be set ("If the height of the containing block is not explicitly set, then the element has no maximum height and the maxHeight property is interpreted as 0%.").  I believe that's what I've been doing because I have not used it yet.  Hector.

[nbelaevski]

What I meant to say is that if you set max-height, then element height will grow until some extent and then start giving scroll when maximum height exceeds.

Take a look at test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container {
position: absolute; 
border: 1px solid navy; 
overflow: auto; 
max-height: 100px;
}
 
.block {
border: 1px solid red;
height: 20px;
width: 200px;
}
</style>
</head>
 
<body>
<div style="top: 40px;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
 
<div style="top: 240px;">
<div></div>
</div>
</body>
</html>
 

[hechegoyen]

Nick, I tried your suggestion but it did not do what I expected as I explained before.  Your sample code did not use the styles anywhere so I was not able to see what you meant.  Below is the code I'm trying to modify to have the effect.  If you could tell me where I should inject the styles you suggest and any other modifications I'd appreciate it.

{code:xml} 

<
html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<
head>
<
style type="text/css">
</
style>
</
head>
<
body>
<
a4j:form>
<
rich:extendedDataTable
value="#{capitalsBean.capitals}" var="cap" id="notSoSimpletable"
width="220px" height="200px" rows="6"
selectionMode="single"
selection="#{capitalsBean.selection}" >
<
f:facet name="header">
<
rich:columnGroup>
<
rich:column colspan="2" >
<
h:outputText value="Item Collection Table Example"/>
</
rich:column>
<
rich:column breakBefore="true">
<
h:outputText value="State Name"/>
</
rich:column>
<
rich:column>
<
h:outputText value="State Capital"/>
</
rich:column>
</
rich:columnGroup>
</
f:facet>
<
rich:column>
<
h:selectOneMenu label="Capital States - "
id="capitalStatesMnu" value="#{cap.state}"
required="true">
<
f:selectItems value="#{capitalsBean.capitalStatePossibleOptions}"/>
</
h:selectOneMenu>
</
rich:column>
<
rich:column>
<
h:selectOneMenu label="Capital Names - "
id="capitalNamesMnu" value="#{cap.name}"
required="true">
<
f:selectItems value="#{capitalsBean.capitalNamePossibleOptions}"/>
</
h:selectOneMenu>
</
rich:column>
<
f:facet name="footer">
<
rich:columnGroup>
<
rich:column colspan="2" >
<
a4j:commandButton action="#{capitalsBean.addRow}" value=" + " reRender="notSoSimpletable" />
<
a4j:commandButton action="#{capitalsBean.removeRow}" value=" - " reRender="notSoSimpletable" />
</
rich:column>
</
rich:columnGroup>
</
f:facet>
</
rich:extendedDataTable>
</
a4j:form>
</
body>
</
html>
 {code}

[nbelaevski]

Hi Hector,

Here is what I got as possible workaround:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:rich="http://richfaces.org/rich"

xmlns:a4j="http://richfaces.org/a4j">

<f:view contentType="text/html">

<head>

<style type="text/css">

.rich-extdt-maindiv {

height: auto !important;

}

.rich-extdt-maindiv, .extdt-innerdiv {

position: relative !important;

}

.extdt-outerdiv {

height: auto !important;

overflow: visible !important;

}

.extdt-content {

height: auto !important;

max-height: 200px;

}

</style>

</head>

<body>

<script type="text/javascript">

ExtendedDataTable.DataTable.prototype.OnWindowResize = function() {};

</script>

        <h:form>

            <rich:extendedDataTable id="users" value="#{forum5Bean.lotOfData}" var="user"

                width="300px" rows="4" reRender="datascroller">

                <f:facet name="header">

                    <h:outputText value="Users List" />

                </f:facet>

                <rich:column sortBy="#{userName}">

                    <f:facet name="header">

                        <h:outputText value="User Name" />

                    </f:facet>

                    <h:outputText value="#{user}" />

                </rich:column>

                <f:facet name="footer">

                    <rich:datascroller id="datascroller" for="users"

                        selectedStyle="font-weight:bold" />

                </f:facet>

            </rich:extendedDataTable>

        </h:form>

</h:form>

</body>

</f:view>

</html>

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:rich="http://richfaces.org/rich"
     xmlns:a4j="http://richfaces.org/a4j">

<f:view contentType="text/html">
     <head>
          <style type="text/css">
          .rich-extdt-maindiv {
               height: auto !important;
          }
          
          .rich-extdt-maindiv, .extdt-innerdiv {
               position: relative !important;
          }
          
          .extdt-outerdiv {
               height: auto !important;
               overflow: visible !important;
          }
          
          .extdt-content {
               height: auto !important;
               max-height: 200px;
          }
          </style>
     </head>

     <body>
          <script type="text/javascript">
          ExtendedDataTable.DataTable.prototype.OnWindowResize = function() {};
          </script>

        <h:form>
            <rich:extendedDataTable id="users" value="#{forum5Bean.lotOfData}" var="user"
                width="300px" rows="4" reRender="datascroller">
                <f:facet name="header">
                    <h:outputText value="Users List" />
                </f:facet>
                <rich:column sortBy="#{userName}">
                    <f:facet name="header">
                        <h:outputText value="User Name" />
                    </f:facet>
                    <h:outputText value="#{user}" />
                </rich:column>
                <f:facet name="footer">
                    <rich:datascroller id="datascroller" for="users"
                        selectedStyle="font-weight:bold" />
                </f:facet>
            </rich:extendedDataTable>
        </h:form>
     </h:form>

     </body>
</f:view>
</html>

Table height is controlled by max height.

Also I had to switch off table reflowing in JavaScript because it caused infinite loop in IE7. This will disable setting size in percents.