How to change primefaces databtable sort icons

Question

I have a tab view , inside the each tab view I have a data table.

this is my code snippet:

<p:tabView orientation="left" id="myTabs" activeIndex="#{myBean.currentTabIndex}" dynamic="true" cache="false">
        <p:ajax event="tabChange" immediate="true" update="@form" listener="#{myBean.onTabChange}" />
            <p:tab id="vehicleTab"
                <ui:include src="/components/vehicle.xhtml" />
            </p:tab>
        ----------- other tabs --------------
    </p:tabView>

And vehicles.xhtml is :

<p:dataTable id="myTable"  var="v" value="#{myBean.vehicles}"   rowIndexVar="rowIndex">
        <p:ajax event="sort" listener="#{myBean.sort}" />
        <p:column id="vehicleid" sortBy="#{myBean.object}"  sortFunction="#{myBean.sortVehicles}">
            <h:outputText value="v.id" />
        </p:column>
        <p:column id="type" sortBy="#{myBean.object}" sortFunction="#{myBean.sortVehicles}">
            <h:outputText value="v.typ" />
        </p:column>
        //other columns
    <p:dataTable

If you observe, sortBy attribute has same for all the columns, v.object this v.object has sorting related metadata to sort.

When I clicked on the column, sorting is working fine, sort icons are showing correctly. But, if I navigate to another tab and back to the vehicle tab sorting is there but all icons are showing same either desc or asc previous sort icons.

When I debug the code, I observed that,the datatable renderer' class decode method is invoked if I click on column for sorting;

@Override public void decode(FacesContext context, UIComponent component) { }

Inside this method

DataTableFeature

class has decode method it's taking the sorting column, sorting function from context parameters which are provided by framework.

After this method execution completed then

@Override public void encodeEnd(FacesContext context, UIComponent component) throws IOException{}

this method is invoked and sorting icons are prepared.

But when I switch the tab and back, the decode method is not getting invoked directly encodeEnd method is invoked, preparing sorting icons same for all columns.

This was the earlier implementation, is there any way to solve this issue without changing the sortBy attribute?

Melloware Melloware · Accepted Answer · 2018-07-16T14:15:17

I think this is similar to this: p:datatable loses sort column and order after ajax refresh

Because a tabView change if you are using real TabView are actually AJAX requests every time you change the tab.

How to change primefaces databtable sort icons

1 Answers