Surface Panels inside OrderList

I would like to implement reordering of list items using p: orderList and p: panel components. Originally there was a POJO list, but the 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:

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


The problem is that every time I switch one of the panels, all the panels are minimized and maximized several times, i.e. if there are three items in the list, then all panels will be maximized / minimized three times. I am wrong?


source to share

1 answer

Ok, it depends if you really want the reordering function. If you can afford without it, I would try ui: repeat instead of p: orderList. It generates an initial id for each div, so you can only switch one panel at a time. Hope it helps.

EDIT: I created a custom "toggler" so that you can switch between panels even in p: orderList separately.

        <p:orderList id="videos" value="#{yourBean.list}" var="dataItem" itemValue="#{dataItem}"
                <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"/>
                        FC Barcelona is one of only three clubs...


And a simple script:

<script type="text/javascript"> 

function hideToggle(param) {  
function showToggle(param) {  



Perhaps there is a nicer solution, but I believe you get the idea. Hope this helped.



All Articles