'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 |