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}"
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 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
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}"
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 a 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>
Perhaps there is a nicer solution, but I believe you get the idea. Hope this helped.
source to share