Tag Archives: primefaces

Primefaces DataTable sorting with Ajax request

pf_datatable_sort
You can be noticed when apply ajax request datatable sorting doesn’t work. This can when you are using for ex. a dialog with datatable inside.
I’m using PrimeFaces 3.4.2 version and found solution at http://stackoverflow.com/a/14376094.
So, here it is:

1. Button opens dialog:

<p:commandButton update=":form:selectedItems" 
    oncomplete="details.show(); selectedItemsWidget.sort($(PrimeFaces.escapeClientId('#{p:component('selectedItemName')}')), 'ASCENDING')">
        <f:setPropertyActionListener value="#{item}" target="#{SomeBean.selected}" />
</p:commandButton>

2. In dialog:

<p:hotkey bind="esc" handler="details.hide()"/>
<p:dialog id="dialog" header="Items" widgetVar="details" modal="true" showEffect="fade" hideEffect="fade" width="700"
          onShow="$('#Form\\:dialog_title').focus();">
    <p:dataTable id="selectedItems" widgetVar="selectedItemsWidget" value="#{SomeBean.selected.items}" var="item">
        <p:column id="selectedItemName" headerText="Name" sortBy="#{item.name}">
            <h:outputText value="#{item.name}"/>
        </p:column>

        <p:column headerText="Type" sortBy="#{item.itemType}">
            <h:outputText value="#{item.itemType}"/>
        </p:column>

        <p:column headerText="Status" sortBy="#{item.status}">
            <h:outputText value="#{item.status}"/>
        </p:column>
    </p:dataTable>
</p:dialog>

So, the solution is call sorting yourself:

selectedItemsWidget.sort($(PrimeFaces.escapeClientId('#{p:component('selectedItemName')}')), 'ASCENDING')

Great hack, thanx truemmer!

Using PrimeFaces SelectOneButton in JSF with ajax

selonebut
You are probably deal with SelectOneButton in PrimeFaces.
And as you can note, it actually doesn’t work correctly (in my case up to 3.4.2 version)!
So, to survive use next:

<h:form id="myForm">
    <p:selectOneButton value="#{MyBean.var}">
        <p:ajax event="change" update="@form" />
        <f:selectItem itemLabel="lable One" itemValue="1" />
        <f:selectItem itemLabel="lable Two" itemValue="2" />
        <f:selectItem itemLabel="lable Three" itemValue="3" />
    </p:selectOneButton>
</h:form>

And here you can see the hack:

<p:ajax event="change" update="@form" />

Now it works perfect!

And one more check: the CSS style for active button presents?

.ui-buttonset .ui-state-active {background-color: red;}

Resource loading order in JSF 2 and PrimeFaces 3.x

dister-mechanic
To override primefaces style use next in h:head tag:


  
    
    
    
  
  
    
  
  
    
    
  

And it works fine, instead of using this:


  
  

See also, http://blog.primefaces.org/?p=1433