I just started learning JSF and PrimeFaces, and I'm having a hard time trying to get PrimeFaces' datatable to work. I have a checkbox-based selection mechanism (more than one row can be selected at the same time), so that clicking on the "Delete selected users" button triggers a method call to the backing bean to delete the corresponding users from the database.
The problem is that the selected rows are not stored in the backing bean's selectedUsers array, and I can't understand why, since my code is exactly the same as the one hosted on PrimeFaces' ShowCase. As a consequence, the button successfully triggers the confirmation dialog, but no user ever gets deleted from the system. Does anyone have any advice?
Thank you in advance!
xhtml file
<h:form id="tableForm">
<p:dataTable id="userList" var="user" value="#{userListBean.userList}"
selection="#{userListBean.selectedUsers}" rowKey="#{user.username}">
<f:facet name="header">User list</f:facet>
<p:column selectionMode="multiple" style="width:2%"/>
<!-- data columns here, working just fine -->
<f:facet name="footer">
<p:commandButton value="Delete selected users" icon="ui-icon-trash" action="#{userListBean.deleteSelectedUsers()}">
<p:confirm header="Deletion confirmation" message="Are you sure you want to delete #{fn:length(userListBean.selectedUsers)} users?" icon="ui-icon-alert" />
</p:commandButton>
Registered users: #{fn:length(userListBean.userList)}
</f:facet>
</p:dataTable>
<p:confirmDialog global="true" showEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:form>
Backing Bean
(userMgr handles persistence on the server, it should have nothing to do with my issue)
#ManagedBean(name="userListBean")
#ViewScoped
public class UserListBean {
#EJB
private UserManager userMgr;
private List<UserDTO> userList;
private UserDTO[] selectedUsers;
public UserListBean() {
}
public void deleteSelectedUsers() {
for(UserDTO u : selectedUsers)
userMgr.deleteUser(u.getUsername());
setUserList(userMgr.retrieveAllUsersDTO());
}
public List<UserDTO> getUserList() {
if(userList == null)
setUserList(userMgr.retrieveAllUsersDTO());
return userList;
}
public void setUserList(List<UserDTO> userList) {
this.userList = userList;
}
public List<UserDTO> retrieveUserList() {
return userMgr.retrieveAllUsersDTO();
}
public UserDTO[] getSelectedUsers() {
return selectedUsers;
}
public void setSelectedUsers(UserDTO[] selectedUsers) {
this.selectedUsers = selectedUsers;
}
}
(As a side question: the #{fn:length(userListBean.selectedUsers)} EL expression always returns 0. I used to think it was because of the broken selection mechanism, but could it be because the array is still empty when the confirmation dialog is rendered?)
You need to activate event rowSelect by adding <p:ajax event="rowSelect"/> to dataTable.
Related
Hi i tried the following functionality using primefaces.
In my xhtml i have a input field which takes input and saves into db.After completion of save i display the saved data in data table of primefaces.
Upto now works fine.now i add single selection to datatable .when user click on the row i update the same input column with selected data.
For this i use the following code
<h:form id="form">
<p:growl id="messages" />
<p:panel id="panel" header="Currency">
<h:panelGrid columns="2" id="currencyGrid">
<p:outputLabel value="Currency :"/>
<p:inputText value="#{currencyBean.currencyMaster.currDesc}"/>
</h:panelGrid>
<p:commandButton value="Add" action="#{currencyBean.saveCurrency}"
update="currencytable">
</p:commandButton>
<p:dataTable id="currencytable" var="cur"
value="#{currencyBean.currencyList}" widgetVar="dlg"
selection="#{currencyBean.currencyMaster}"
selectionMode="single" rowKey="#{cur.currId}">
<p:ajax event="rowSelect" listener="#{currencyBean.onRowSelect}"
update=":form:currencyGrid" />
<p:column headerText="ID" style="font-size:12px;">
<h:outputText value="#{cur.currId}" />
</p:column>
<p:column headerText="Description" style="font-size:12px;">
<h:outputText value="#{cur.currDesc}" />
</p:column>
</p:dataTable>
</h:form>
And My Bean code is:
#managedBean
#viewScoped
#component
public class CurrencyBean implements Serializable{
private static final long serialVersionUID = 1L;
#Autowired
private CurrencyMaster currencyMaster;
private List<CurrencyMaster> currencyList;
public CurrencyMaster getCurrencyMaster() {
return currencyMaster;
}
public void setCurrencyMaster(CurrencyMaster currencyMaster) {
this.currencyMaster = currencyMaster;
}
public void saveCurrency(){
try{
currencyService.saveCurrency(currencyMaster);
}catch(Exception e){
e.printStackTrace();
}
}
#PostConstruct
public void currencyList(){
setCurrencyList(currencyService.getCurrencyList());
}
public void onRowSelect(SelectEvent event) {}
public void onRowUnselect(UnselectEvent event) {}
}
So when i click on currrencytable row the input field populated properly and update operation also.
The problem is when i directly enter the data into input column my globalMaster property is going to be null.
And the following error is occured;
attempt to create saveOrUpdate event with null entity
I change the scopes of the bean but i did not find the solution.
And i find more solutions for the above exception but my problem is the new values are does not set to currencymaster.
Is there any mistake i done in this context.please guide me..
I'm using Spring Web Flow and JSF-2.
The fact is strange and incomprehensible to me.
I have a main page, a typical index.
And I have and actionView with some filters (filtering will be made with an ajax calling) and a table for displaying the results according to filter info.
The back bean for this action is definied as #ViewScoped.
If, at first, I navigate to index after filtering some data and then, later, I return to the action view I don't expect to found the last search displayed, I expect an empty view, but the filters are not empty and data result is filtered.
Why? If I'm defining a #ViewScope is due to I expect the back bean information has to be deleted when I change the view (and index is another view in my case) but I must be making some mistake.
Here is my code:
My parent-flow (simpifying):
<view-state id="index" view="../index.xhtml" redirect="true" popup="true"/>
<view-state id="action1Flow" view="flowRedirect:action1-flow" />
<global-transitions>
<transition on="home" to="index" />
<transition on="action1" to="action1Flow" />
</global-transitions>
action1-flow: (start-state="action1View")
<view-state id="action1View" view="../views/action1View.xhtml" redirect="true" popup="true"/>
action1View.xhtml: (Simplifying, one filter -> table results)
...
<p:panel id="filter" header="Filter example">
<h:panelGrid columns="2">
<h:outputLabel for="dataFilter" value="Filter"/>
<p:inputText id="dataFilter" value="#{action1View.dataValue}"/>
<p:ajax event="keyup" listener="#{action1View.filterData()}" update="table"/>
</p:inputText>
</h:panelGrid>
</p:panel>
<p:panel id="display" header="Data filtered">
<p:dataTable id="table" var="data" value="#{action1View.resultData"
selection="#{action1View.selectedData}" rowKey="#{data.dataValue}">
<p:column headerText="#{msg.id}" sortBy="#{data.dataValue}">
<h:outputText value="#{data.dataValue}" />
</p:column>
</p:dataTable>
</p:panel>
...
<p:commandButton value="Go to index" action="home"/>
...
and action1View.java, the back bean:
#ManagedBean
#ViewScoped
#Component("action1View")
public class Action1View implements Serializable {
static final long serialVersionUID = 42L;
List<ExampleBean> resultData = null;
ExampleBean selectedData = null;
Integer dataValue;
public ExampleBean getSelectedData() {
return selectedData;
}
public void setSelectedData(ExampleBean selectedData) {
this.selectedData = selectedData;
}
public Integer getDataValue() {
return dataValue;
}
public void setDataValue(Integer dataValue) {
this.dataValue = dataValue;
}
public void filterData() {
// Some logic
resultData = xxxxx;
}
}
index.xhtml:
...
<p:commandButton value="Go to index" action="action1"/>
...
Sorry for my english and ...
Greetings!
I have found the GAP!
My bean, apart from #ViewScoped annotation, is also defining (as you can see in the code) with this annotation: #Component("action1View") without apparent reason.
The fact is by removing this annotation I got everything to work properly.
I think that is because the Component behaviur overlays ViewScoped one doing that only one bean for each defined class can be created, and, becauso of this, information stays in time (until the session ends or the application was closed).
But it would be great if someone give more and richer information about it.
I have a datatable where I am showing List of Employees. At the end of the datatable I have a commandbutton. Now if user selects any checkbox inside the datatable, I want my commandbutton to be enabled. Initially the command button is disabled.
Below is my index.xhtml page
<p:dataTable value="#{userPreferencesBean.studentDataModel}"
var="studentDetails" emptyMessage="No Student found."
selection="#{userPreferencesBean.selectedStudents}">
<f:facet name="header">
List of Students
</f:facet>
<p:ajax event="rowSelect" update="submit" listener="#{userPreferencesBean.onRowSelect}"/>
<p:ajax event="rowUnselect" update="submit" listener="#{userPreferencesBean.onRowSelect}"/>
<p:column selectionMode="multiple" style="width:2%" />
//All the columns
<f:facet name="footer">
<p:commandButton id="submit" value="Save Preferences"
icon="ui-icon-disk" style="float:right;"
action="#{userPreferencesBean.savePreferredInterfaces}"
update=":#{p:component('selectedInterfaceDetails')}"
disabled="#{not userPreferencesBean.hasPreferenceChanged eq false}"/>
</f:facet>
</p:dataTable>
Below is my backing bean:
#ManagedBean
#SessionScoped
public class UserPreferencesBean implements Serializable {
private boolean hasPreferenceChanged = false;
public void onRowSelect(SelectEvent event) {
this.setHasPreferenceChanged(true);
}
public boolean isHasPreferenceChanged() {
return hasPreferenceChanged;
}
public void setHasPreferenceChanged(boolean hasPreferenceChanged) {
this.hasPreferenceChanged = hasPreferenceChanged;
}
What I am expecting is that once I select a row, my submit button should be enabled. But it is not happening. Could you please help me to understand where I am doing wrong? Thanks.
With regards,
Sudipta Deb
Try put your table into form.
Also you can make it more convient:
<p:commandButton id="submit" ... disabled="#{userPreferencesBean.selectedStudents==null}"/>
I'm testing the component "SelectOneMenu" on a jsf page. I'm populating this component dinamically though my ManageBean (that will get all Animals from database).
I would like to know if is possible to see the user selected item of that "SelectOneMenu" (combobox), I'm trying with value="#{animalsManage.animalSelect}" but it is only called on the beginning of the page. Also, I'm using an inputText to see the value of the selected intem of the "SelectOneMenu".
What I'm doing wrong?
JSF:
<body>
<ui:component>
<h:form>
<h:outputText value="Select one Mets File" />
<h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{animalsManage.allAnimals}" />
</h:selectOneMenu>
<h:inputText id="textbox" value="#{animalsManage.animalSelected }" />
</h:form>
</ui:component>
</body>
ManageBean:
#ManagedBean
#ViewScoped
public class AnimalsManage implements Serializable {
#EJB
private AnimalsFacadeREST animalsFacadeREST;
private String animalSelected;
private List< SelectItem> selectAnimals;
public List<SelectItem> getAllAnimals() {
List<Animals> al = animalsFacadeREST.findAll();
selectAnimals = new ArrayList< SelectItem>();
int i = 0;
for (Animals animal: al) {
selectAnimals.add(new SelectItem(i, animal.getName()));
i++;
}
return selectAnimals;
}
public String getAnimalSelected() {
return animalSelected;
}
public void setAnimalSelected(String animalSelected) {
this.animalSelected = animalSelected;
}
}
There are many solutions to the presented problem. I present here two basic ideas.
Server-side solution. Simply attach <f:ajax> tag inside your <h:selectOneMenu> to update selected values and rerender user's choice, like in
<h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{animalsManage.allAnimals}" />
<f:ajax execute="combo" render="textbox" />
</h:selectOneMenu>
<h:inputText id="textbox" value="#{animalsManage.animalSelected }" />
If you like, you may also do some custom logic with selected element in ajax listener by specifying listener="#{animalsManage.performCustomAjaxLogic}" of <f:ajax> tag.
Client-side solution. Simply update element with id="textbox" on basic change event. So, if you use jQuery the solution will be
$('#combo').change(function() {
$('#textbox').val($('#combo').val());
});
Thought the client-side solution will bind only text value of your input component.
I am using JSF 2.0 and Primefaces 3.2. I have a main form with a datatable and a button on each row that brings up a dialog with another data table. The dialog has its own form. When the datatable row is selected in the dialog, i process the selection and then refresh the datatable in the main form. After the refresh all my filters on the main datatable are lost. Is there a way to remember the filter values?
My JSF page
<h:panelGroup id="mainTable">
<h:form id="mainForm" prependId="false">
<p:dataTable id="cl_grid1" var="item" widgetVar="mainGrid"
value="# {controller.items}">
<p:column headerText="Colum1" filterMatchMode="contains" filterBy="#{item.myObj.code}" sortBy="#{item.myObj.code}">
<h:outputText value="#{item.myObj.code}" style="float:left" />
<p:commandButton id="selectBtn" icon="select"
oncomplete="selectDialog.show()" actionListener="#{controller.setMainItem}">
<f:param name="selectedMainItem" value="#{item.id}"/>
</p:commandButton>
</p:column>
</p:dataTable
</h:form>
</h:panelGroup>
<p:dialog id="cl_selectDialog" header="Select AAAA" dynamic="true" modal="true" widgetVar="selectDialog"
height="500" width="900" showEffect="explode" hideEffect="explode">
<h:form id="selectForm" prependId="true">
<p:dataTable id="cl_selectGrid" var="selectorItem" widgetVar="selectGrid"
value="# {controller.selectorItems}" selection="#{controller.selectedItem}"
rowKey="#{selectorItem.id}" selectionMode="single">
<p:commandButton actionListener="#{controller.processSelection}" value="Ok" icon="ui-icon ui-icon-search"
oncomplete="selectDialog.hide()" update=":mainTable" process="#form"/>
<p:commandButton value="Cancel" icon="ui-icon ui-icon-search" onclick="selectDialog.hide()" type="button"/>
</h:form>
</p:dialog>
My Controller
In my controller all i am doing is hydrating my datatable again.
#Component
#Scope("view")
public class Controller extends BaseController implements Serializable {
private List<Item> items;
public Controller() {
items = new ArrayList<Item>();
}
#PostConstruct
public void init() {
loadItems();
}
protected void loadItems() {
items = //Load items from Database
}
public void processSelection(ActionEvent event) {
//Add the selected Item and then reload items
loadItems();
}
}
If it is an AJAX Request, you can add on your trigger component a 'oncomplete' method which has :
<p: ... update='myDatatableId' oncomplete='myDatatableWidget.filter();' />
By this way you will re-triggering current filters on the datatable or you can also clear all filters by using
... oncomplete='myDatatableWidget.clearFilters();' ...
We also came up with a slightly more elegant solution than the one posted by kolossus which is as simple as extending the PF Datatable for persistent filter values.
http://www.stickysession.com/?p=258
Since you must to refresh the table from within its form (so it will preserve the filter state) another solution could be to place a hidden button in the main table form and use it as a 'proxy' by clicking it from your dialog, that way the filter will be preserved, like this
change your button from
<p:commandButton actionListener="#{controller.processSelection}" value="Ok" icon="ui-icon ui-icon-search"
oncomplete="selectDialog.hide()" update=":mainTable" process="#form"/>
into this (just a simple button that clicks the hidden one)
<p:commandButton onclick="$('#my-proxy-button-id').click(); return false;" value="Ok" icon="ui-icon ui-icon-search"/>
and add a new button inside the main table form
<p:commandButton style="display:none;" id="my-proxy-button-id" actionListener="#{controller.processSelection}"
oncomplete="selectDialog.hide()" update="mainTable" process=":selectForm"/>
using this technique you wont be needed to call for filtering manually and no additional "blinking" will appear on screen