rich:collapsibleSubTable and h:selectBooleanCheckbox value issue

[spectotechnologies]

Hi,

I was using a multi-level table to select items from differents groups built with rich:dataTable and rich:collapsibleSubTable but in the actionListener the checkboxes in subTable level doesn't get right values. This issue is since the RichFaces 3.3.3 to RichFaces 4.0.0 upgrade. I've changed the code to use c:forEach with rich:dataTable and it seems to work fine now but I would be glad to use power of RichFaces!

See the attachment for the codes examples, note that the second solution is a drop in replacement that works, no changes on managed beans or other code in page.

Thank you,

Alexandre.

[andrey.sisoyev]

Hi!

Have the same problem. Tested for code

...

<h:form>

    <rich:dataTable value="#{tableBean.testData}" var="testDataRow">

        <f:facet name="header">

            <rich:columnGroup>

                <rich:column>col1</rich:column>

                <rich:column>col2</rich:column>

            </rich:columnGroup>

        </f:facet>

        <rich:column>SUPER: #{testDataRow.first.first}</rich:column>

        <rich:column><h:selectBooleanCheckbox value="#{testDataRow.first.second}"/></rich:column>

        <rich:collapsibleSubTable value="#{testDataRow.second}" var="testDataSubRow">

                <rich:column>   SUB: #{testDataSubRow.first}</rich:column>

                <rich:column><h:selectBooleanCheckbox value="#{testDataSubRow.second}"/></rich:column>

        </rich:collapsibleSubTable>

    </rich:dataTable>

    <h:commandButton label="submot"/>

</h:form>

...

, on submit is updates checkboxes of dataTable rows, but won't update subTable's ones.

There seems to be a bug in APPLY VALUES JSF phase, when using checkbox in the collapsibleSubTable.

Thus, in RF4 there's no equivalent for the 3.3.3 <rich:subTable>, unless it was read-only.

[andrey.sisoyev]

Here's a working workaround, that ajaxifies form input.

<h:form>

    <rich:dataTable rowKeyVar="rowIndex" ...>

        <rich:collapsibleSubTable rowKeyVar="subRowIndex" ...>

            <rich:column>

                <a4j:jsFunction name="workaroundUpdate#{rowIndex}#{subRowIndex}"

                                status="sink"

                                onbegin="javascript:disableCommitButton()"

                                oncomplete="javascript:enableCommitButton()">

                    <a4j:param name="newValue" assignTo="#{subRow.field}"/>

                </a4j:jsFunction>

                <h:selectBooleanCheckbox value="#{subRow.field}" onchange="workaroundUpdate#{rowIndex}#{subRowIndex}(this.checked)"/>

            </rich:column>

        </rich:collapsibleSubTable>

    </rich:dataTable>

    <script type="text/javascript">

        disableCommitButton = function(){#{rich:element('CommitButton')}.disabled=true;}

        enableCommitButton  = function(){#{rich:element('CommitButton')}.disabled=false;}

    </script>

    <a4j:status id="sink"/>

    <h:commandButton id="CommitButton" .../>

</h:form>

Not sure if disabling/enabling commit button is really needed - I added it for the thread safetiness. If RF/JSF serializes a4j and form submit events, then it's not needed.

[andrey.sisoyev]

It's harder with h:inputText (working workaround):

<h:form>

    <rich:dataTable rowKeyVar="rowIndex" ...>

        <rich:collapsibleSubTable rowKeyVar="subRowIndex" ...>

            <rich:column>

                <a4j:jsFunction name="workaroundUpdate#{rowIndex}#{subRowIndex}" status="sink" onbegin="javascript:onFieldUpdateBegin('#{rowIndex}#{subRowIndex}')" oncomplete="javascript:onFieldUpdateComplete('#{rowIndex}#{subRowIndex}')">

                    <a4j:param name="newValue" assignTo="#{subRow.field}"/>

                </a4j:jsFunction>

                <h:inputText value="#{subRow.field}"

                    onchange="workaroundUpdate#{rowIndex}#{subRowIndex}(this.value)"

                    onfocus="javascript:enterField(this.value, '#{rowIndex}#{subRowIndex}');"

                    onblur="javascript:leaveField(this.value, '#{rowIndex}#{subRowIndex}');"/>

            </rich:column>

        </rich:collapsibleSubTable>

    </rich:dataTable>

    <a4j:status id="sink"/>

    <h:commandButton id="saveButton" .../>

    <br/>

    <h:outputText id="unfocusHint" value="#{msg.unfocus_hint}" styleClass="grayLittleHint" style="text-align:center;"/> <!-- (leave the input field - the button will become enabled) -->

    <script type="text/javascript">

        curField = null;

        fieldBeingUpdated = null;

        disableSaveButton = function(){#{rich:element('saveButton')}.disabled=true;};

        enableSaveButton  = function(){#{rich:element('saveButton')}.disabled=false;};

        showUnfocusHint = function(){#{rich:element('unfocusHint')}.style.display='block';};

        hideUnfocusHint = function(){#{rich:element('unfocusHint')}.style.display='none';};

        enterField = function(curVal,field) {

            curField = field;

            disableSaveButton();showUnfocusHint();

        };

        leaveField = function(curVal,field) {

            if((field == curField || curField == null) &amp;&amp; fieldBeingUpdated == null) {

               enableSaveButton();hideUnfocusHint();

               curField = null;

            }

        };

        onFieldUpdateBegin = function(field) {

            fieldBeingUpdated = field;

            disableSaveButton(); showUnfocusHint();

        };

        onFieldUpdateComplete = function(field) {

            if(field == curField || curField == null) {

                fieldBeingUpdated = null;

                enableSaveButton(); hideUnfocusHint();

            }

            if(field == fieldBeingUpdated) {

                fieldBeingUpdated = null;

            }

        };

        hideUnfocusHint();

    </script>

</h:form>