CODEWITHSUNDEEP
javajsfprimefacespanel
nikagra
nikagra

Reputation: 843

Primefaces Panels inside OrderList

I'd like to implement reordering of list elements using p:orderList and p:panel components. Initially there was a POJOs in list, but problem occurs even with a list of strings.

There is my bean:

public class BackingBean {

    private List<String> list;

    public void addDate() {
        list.add(new Date().toString());
    }    

    // Getters and setters...
}

My page source:

<p:orderList id="videos" value="#{bean.list}" var="date" itemValue="#{date}"
    controlsLocation="none">
    <p:column >
        <p:panel header="#{date}" toggleable="true" toggleSpeed="500">
            FC Barcelona is one of only three clubs...
        </p:panel>
    </p:column>
</p:orderList>

The problem is that every time I toggle one of the panels, all panels are minimized and maximized a few times, i.e. if there are three elements in the list, than all panels will be maximized/minimized three times. Am I wrong?

Upvotes: 3

Views: 2256

Answers (1)

Fallup
Fallup

Reputation: 2427

Well, depends if you really need the reordering functionality. If you can afford to go without it, I would try ui:repeat instead of p:orderList. It generates original id for every div so you will be able to toggle just one panel at the time. Hope it helps

EDIT: I made a custom "toggler" so you can toggle your panels even in p:orderList separately.

        <p:orderList id="videos" value="#{yourBean.list}" var="dataItem" itemValue="#{dataItem}"
                     controlsLocation="none">
            <p:column>
                <p:panel id="togglePanel">
                        <f:facet name="header">
                            <h:outputText value="#{dataItem}" />
                            <p:commandButton value="+" onclick="showToggle(this)" style="float: right;"/>
                            <p:commandButton value="-" onclick="hideToggle(this)" style="float: right;"/>
                            <div style="clear: both"/>
                        </f:facet>
                    <div>
                        FC Barcelona is one of only three clubs...
                    </div>
                </p:panel>
            </p:column>
        </p:orderList>

And the simple script :

<script type="text/javascript"> 

function hideToggle(param) {  
    jQuery(param).closest("div").next().slideUp('slow',null);     
}  
function showToggle(param) {  
    jQuery(param).closest("div").next().slideDown('slow',null);     
}

</script>

Maybe there is a nicer solution but I believe you get the point. Hope it helped.

Upvotes: 2

Related Questions