How to disable a Main Edit button only when No Rows Selected? #211
-
Please reference this reproducer. Following the Datatable CRUD example, I have recreated this functionality in a screen which looks a little more like our application's CRUD screen. Unlike the example, we use a main "Edit" button on the same row as our "Create" button. I've been having all kinds of "fun" attempting to get this new button to disable only when no row is selected, the way the main "Delete" button does. Copying the "disabled=" property from the Delete button causes the main Edit button to be disabled full-time. (When I select a row, the button remains disabled.) Can someone here steer me to a fix? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
It looks like the selection ajax events of the table itself aren't updating all the buttons needed, which would lead to the behavior you're describing. An easy solution would be to leverage the Observer in PrimeFaces: https://www.primefaces.org/showcase/ui/ajax/observer.xhtml?jfwid=5ba9f Just need to switch the ajax events in the table to: <p:ajax event="rowSelectCheckbox" update="@obs(selection-changed)" /> Then, any component that needs to update based on selection changing would just need </p:commandButton>
<p:commandButton id="btnEditCityInfo" value="Edit"
icon="pi pi-pencil" actionListener="#{cityInfoController.openEdit}"
update=":dialogs:manage-cityInfo" disabled="#{!cityInfoController.hasSelectedRow()}"
styleClass="edit-button ui-button-success" process="@this">
<f:setPropertyActionListener value="#{cityInfoController.selected}" target="#{cityInfoController.selected}" />
<p:resetInput target=":dialogs:manage-cityInfo" />
<p:autoUpdate on="selection-changed"/>
</p:commandButton> |
Beta Was this translation helpful? Give feedback.
It looks like the selection ajax events of the table itself aren't updating all the buttons needed, which would lead to the behavior you're describing. An easy solution would be to leverage the Observer in PrimeFaces: https://www.primefaces.org/showcase/ui/ajax/observer.xhtml?jfwid=5ba9f
Just need to switch the ajax events in the table to:
Then, any component that needs to update based on selection changing would just need
<p:autoUpdate on="selection-changed"/>
: