Primefaces Panels inside OrderList

Question

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?

Are multiple panels with widgetVar supported inside orderedList? It seems that the javascript variable "panel" is used for all panels inside your list. You could check it out in firebug. — djmj, Mar 08 '12 at 16:39
I think @djmj is right. Why do you specify `widgetVar` attribute. Do you use it somewhere in javascript? — Mikita Belahlazau, Mar 08 '12 at 19:27
This happens even without `widgetWar`. I've got an answer on the primefaces forum "The problem is that all panels in the list get the same id so the toggling toggles all panels". But I don't know what should I use instead of panels — nikagra, Mar 09 '12 at 08:23

Fallup · Answer 1 · 2012-04-07T20:57:35.307

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.

Primefaces Panels inside OrderList

1 Answers1