0

I have a problem with JSF. I try to keep the row expansion open after an update, but it keeps collapsing.

I want to change the panel content in the expanded row and reply button is pressed and also keep the row in the dataTable expanded.

If I can resolve this issue it will be nice. I also used partiallySubmit property to update only some components with ajax, not all.

I provide the code here:

    <p:dataTable id="topicDataTable" value="#{index.topics}" var="topic"
        rowIndexVar="row" rowKey="#{topic.id}" style="border:none;"
        onExpandStart="getExpandedRow()">
        <!--    expandedRow="#{true}" -->
        <p:column style="border-style:none;">
            <p style="padding-left: 50px; font-size: 8px;">
                <br />
            </p>
            <p style="font-size: 18px;">#{topic.title}</p>
            <p style="font-size: 8px;">#{topic.displayedCreatedOn}</p>
        </p:column>

        <p:column style="width:2%; border-style:none;">
            <p:rowToggler />
        </p:column>

        <p:rowExpansion style="border:none;">

            <p style="font-size: 16px;">
                <br />
            </p>

            <div style="padding-left: 30px;">
                <h:form id="replyForm" style="width:100%">
                    <p:panel id="repeatPanel">
                        <p:scrollPanel id="scrollPanel"
                            style="padding-left:50px;max-height:300px; overflow-y: auto;"
                            mode="native">


                            <p:repeat id="repeatComponent" value="#{topic.messages}"
                                var="reply">

                                <!-- rowIndexVar="row" -->
                                <div style="padding-left: 30px; font-size: 14px;">
                                    <p style="font-size: 14px; color: black;">#{reply.createdBy}</p>
                                    <p style="font-size: 8px; line-height: 12px">

                                        #{reply.displayedCreatedOn}</p>

                                    <p style="font-size: 4px;">
                                        <br />
                                    </p>
                                    <p
                                        style="color: rgba(0, 0, 0, .5); white-space: pre-wrap; font-size: 14px;">#{reply.text}</p>
                                </div>

                                <p style="padding-left: 50px; font-size: 16px;">
                                    <br />
                                </p>

                            </p:repeat>


                        </p:scrollPanel>



                        <!--    <h:form id="replyForm" style="width:100%"> -->
                        <p>
                            <p:inputTextarea id="replyArea" binding="#{replyInput}"
                                required="true" requiredMessage="The reply should not be empty"
                                style="vertical-align: middle; width:99.3%; " />
                        </p>
                        <p>
                            <p:message for="replyArea" style="color:red; font-size: 14px; " />
                        </p>
                        <p style="font-size: 8px;">
                            <br />
                        </p>
                        <p>
                            <p:commandButton value="Reply"
                                style="font-size: 12px; float:right; vertical-align:right;"
                                partialSubmit="true" actionListener="#{index.updateMessages}"
                                process="@form" update="replyForm:repeatPanel"
                                onstart="saveScrollPos()" oncomplete="getScrollPos()">
                                <!--     process="@form topicaDataTable:#{row}:repeatPanel"" -->
                                <f:attribute name="rowId" value="#{row}" />

                            </p:commandButton>

                        </p>
                        <p style="padding-left: 50px; font-size: 8px;">
                            <br />
                        </p>
                        <!--    </h:form> -->

                    </p:panel>
                </h:form>

            </div>

            <p style="padding-left: 50px; font-size: 16px;">
                <br />
            </p>

        </p:rowExpansion>
    </p:dataTable>
rim444
  • 1
  • 1
  • 4
  • Do you have nested forms? Please check that – Kukeltje Jan 19 '18 at 12:01
  • No, I don't have, only what I showed. – rim444 Jan 19 '18 at 13:18
  • This cannot be the only thing you have. Would for 1000% sure not work... You need at least also a body and `h:head`... And please correct the title, take parts of the first sentence and replace it with that, that is the real problem. And then it is a duplicate of https://stackoverflow.com/questions/20612612/how-to-keep-primefaces-rowexpansion-open – Kukeltje Jan 20 '18 at 08:43
  • Possible duplicate of [How to keep primefaces rowexpansion open?](https://stackoverflow.com/questions/20612612/how-to-keep-primefaces-rowexpansion-open) – Kukeltje Jan 20 '18 at 08:45
  • I don't want to have all the rows expanded by default. I just want to keep their state (opened/collapsed) after the button is pressed. – rim444 Jan 20 '18 at 14:50
  • So you did not actually read the answer in the duplicate? – Kukeltje Jan 20 '18 at 14:53
  • I improved it a little, so it might be clear now... Please read again (it was effectively all in there, you just focussed to much on the 'all' and did not interpret de solution (where EL is used) – Kukeltje Jan 20 '18 at 15:22

0 Answers0