'Highlight row when single selection with a command component

Based on the primefaces documentation:

Single Selection with a Command Component This method is implemented with a command component such as commandLink or commandButton. Selected row can be set to a server side instance by passing as a parameter if you are using EL 2.2 or using f:setPropertyActionListener.

<p:dataTable var="car" value="#{carBean.cars}">
    <p:column>
        <p:commandButton value="Select">
            <f:setPropertyActionListener value="#{car}"
            target="#{carBean.selectedCar}" />
        </p:commandButton>
    </p:column>
    ...columns
</p:dataTable>

I need the row get highlighted when I press the button without selecting the row directly

This is my code:

<p:dataTable
    rowKey="${xxx.y1}-${xxx.y2}"
    selection="${managedBean.selectedRow}"
    selectionMode="single"
    value="#{managedBean.listOfBeans}" var="xxx">

    <p:column>
        <p:commandButton action="${managedBean.saveSomethingInDB}"
            update="vvvComponent">
            <f:setPropertyActionListener value="#{currentRow}"
                target="#{managedBean.selectedRow}" />
        </p:commandButton>
    </p:column>
</p:dataTable>


Solution 1:[1]

I solved it in this way:

<p:dataTable
    rowKey="${xxx.y1}-${xxx.y2}"
    selection="${managedBean.selectedRow}"
    selectionMode="single"
    value="#{managedBean.listOfBeans}" var="xxx">

    <p:column>
        <p:commandButton action="${managedBean.saveSomethingInDB}" onclick="highlightRow(jQuery(this));"
            update="vvvComponent">
            <f:setPropertyActionListener value="#{currentRow}"
                target="#{managedBean.selectedRow}" />
        </p:commandButton>
    </p:column>
</p:dataTable>

function highlightRow(commandButton) {
    $('.ui-state-highlight').removeClass('ui-state-highlight');
    commandButton.closest('table').closest('tr').addClass('ui-state-highlight');
}

Solution 2:[2]

Your code works for me.

thanks to the propertyActionListener, the row is highlighted when I press the button

<f:setPropertyActionListener value="#{currentRow}"
            target="#{managedBean.selectedRow}" />

Solution 3:[3]

i know its too late but this works

 <p:commandButton action="${managedBean.saveSomethingInDB}" onclick="$('.ui-state-highlight').removeClass('ui-state-highlight');PF('tableWidgetVar').selectRow($(this).parents('tr:first').addClass('ui-state-highlight'));" >
                <f:setPropertyActionListener value="#{currentRow}"
                    target="#{managedBean.selectedRow}" />
            </p:commandButton>

and this way u dont need to selection or select mode on datatable

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John Alexander Betts
Solution 2 rancesvinto
Solution 3 Mohammed ABOUZID