Error dataScroller - jsf

Question

I am creating xhtml page with datascroller in another datascroller . the error that in the second datascrolle always doesn't show any thing.
this in index.xhtml
<p:dataScroller value="#{ideeBean.idees}" var="in" chunkSize="10" mode="inline" scrollHeight="500"
>
<f:facet name="header">
Les Idées
</f:facet>
<h:panelGrid columns="2" style="width:100%" columnClasses="logo,detail">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="1" cellpadding="5">
<h:outputText value="#{msg['idee.titre']}" />
<h:outputText value="#{in.titre}" style="font-weight: bold"/>
<h:outputText value="#{msg['idee.description']}" />
<h:outputText value="#{in.description}" style="font-weight: bold"/>
<h:outputText value="#{msg['idee.theme']}" />
<h:outputText value="#{in.theme}" style="font-weight: bold"/>
<h:outputText value="#{msg['idee.type']}" />
<h:outputText value="#{in.type}" style="font-weight: bold"/>
<!-- ***************************comments******************** -->
<p:dataScroller value="#{avisBean.avisl}" var="a" chunkSize="10" mode="inline" scrollHeight="500">
<f:facet name="header">
commentaires
</f:facet>
<h:panelGrid columns="2" style="width:100%" columnClasses="logo,detail" >
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<!-- <f:facet name="loader"> -->
<!-- <p:commandButton type="button" value="More" icon="ui-icon-circle-triangle-s"/> -->
<!-- </f:facet> -->
<p:outputPanel>
<h:panelGrid columns="1" cellpadding="5">
<h:outputText value="Commentaire:" />
<h:outputText value="ggg" style="font-weight: bold"/>
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:dataScroller>
<!-- ***************************************** -->
<h:inputText id="comment" value="#{avisBean.avis.commentaire}" />
<p:commandButton value="commenter" icon="ui-icon-check" action="#{avisBean.addAvis(in)}" />
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:dataScroller>
and this is the result of the code
enter image description here