1

I want to implement logic which will change the scrollHeight of a datatable when a particular Primefaces panel is toggled open or closed.

So far I have found that I may be able to use javascript and PF(panelWidget)... or use an ajax event handler to be able to know when the panel is toggled and react to it, but have not been able to work it out completely.

Here are the components I am working with:

<h:form id="form">
  <p:panel id="toggleable" header="Toggleable" toggleable="true" widgetVar="panel">

        <p:ajax event="toggle" update="list" />
  </p:panel>

  <p:datatable id="list" scrollable="true" scrollHeight="toggle?300:100">

  </p:datatable>
</h:form>
4
  • So basically when you toggle the panel open you want the datatable to be 300 in height, and when you toggle the panel to close you want the datatable to be 100 in height?
    – Gimby
    Commented Mar 10, 2016 at 9:06
  • I want change scroll height when panel are toggle Commented Mar 10, 2016 at 9:09
  • Thank you @BalusC, without you we would have solved the problem never Commented Mar 14, 2016 at 7:18
  • @Balusc I don't necessary agree, but I align with what you do on JSF questions :)
    – Gimby
    Commented Mar 14, 2016 at 8:33

1 Answer 1

1

I would like to post this as a comment but it is too long. Here is what I would try :

<h:form id="form">

  <p:panel id="toggleable" header="Toggleable" toggleable="true" collapsed="true" widgetVar="panel">
    <p:ajax 
      event="toggle" 
      update="form:list" 
      oncomplete="$(document.getElementById('form:list')).find('.ui-datatable-scrollable-body').height(PF('panel').cfg.collapsed ? 100 : 300);" />
  </p:panel>

  <p:dataTable id="list" scrollable="true" scrollHeight="100">

  </p:dataTable>
</h:form>

As you can see the JS in the oncomplete attribute is doing all the work. PF('panel').cfg.collapsed checks if the panel is collapsed or not and we set the .ui-datatable-scrollable-body height accordingly.

I tested it with PF 4.0 and it seems to work well for me. If you don't need to update the content of the dataTable you can get rid of update="form:list" and use onstart instead of oncomplete.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.