I have a Datatable with pagination and I want to change the current page with a commandlink outside the Datatable, how I can get it?
<p:commandLink title="changePage" action="#{myBean.changeMethod}"
update="myDataTable" />
<p:dataTable id="myDataTable" var="myItem" paginator="true" rows="1"
value="#{myBean.ListOfItem}" binding="#{myBean.DataTable}">
...
...
</p:dataTable>
Greetings!
This will set the page of the table to the first one
public void changeMethod() {
final DataTable d = (DataTable) FacesContext.getCurrentInstance().getViewRoot()
.findComponent("myDataTable");
int first = 0;
d.setFirst(first);
}
Or on client side:
widgetVar.getPaginator().setPage(pageindex);
EDIT : The "first" attribute indicates the index of the first row to be displayed
It's ok, but now in primefaces 5.1 on the client side you have to do like:
PF('widgetVar').getPaginator().setPage(pageindex);
For me works very nice, but you have to type the entire component name
FacesContext.getCurrentInstance().getViewRoot().findComponent("form:panel:datatable");
Related
My main jsf include 2 jsf’s where in each one of them there is a table with filtering option.
this is a short example from the main:
<h:panelGroup id="b1">
<p:commandButton
value="exe"
actionListener="#{bean.handle}"
rendered="#{bean.render}"
update=":mainForm:panel1,:mainForm:panel2">
</p:commandButton>
</h:panelGroup>
</h:panelGrid>
</p:panel>
<ui:include src="table1.xhtml" />
<ui:include src="table2.xhtml" />
The problem is that I need to remove the filters when changing the view between the 2 tables
I can’t use the client side via clearFilters since I have 2 tables:
<p:commandButton
oncomplete="table1Widget.clearFilters() ????"
so I was thinking that the best place will on the server side via handle method but the filter list is empty and also the table
DataTable dt1 = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm: .... ");
How can i reset the filters ?
Thanks
I have 2 datatables at my session. I didn't understand reason but when i use dt1.reset() it resets both of them.
I tried
dt1 = new DataTable();
and it solved my problem.
Note: dt1.reset() works when i tried with 1 datatable.
You can use either of the following on that datatable that you have:
dt1..setFilters(null); Will get rid of the datatable filter values
dt1.reset() will also reset the datatable to a virgin state
Use the Primefaces current helper (version 6.2) to execute clearFilters on the server side as below:
PrimeFaces current = PrimeFaces.current();
current.executeScript("PF('dataTableWidget').clearFilters()");
Hi I have the following in my HTML:
<p:selectOneMenu value="#{lottoCheckerBean.selectedPowerBallDrawingDate}" >
<p:ajax update="powerBallDrawings" listener="#{lottoCheckerBean.handleDrawDateSelection}" />
<f:selectItems value="#{lottoCheckerBean.powerBallDrawingDates}" />
</p:selectOneMenu>
The relavent section of my bean code follows:
public void setSelectedPowerBallDrawingDate(String newSelectedPowerBallDate) {
this.selectedPowerBallDrawingDate = newSelectedPowerBallDate;
}
The ajax tag causes a call to the setSelectedPowerBallDrawingDate(String newSelectedPowerBallDate) as expected. But the value of newSelectedPowerBallDate is the empty string. Not the expected selected value of the dropdown.
The source for the selectOneMenu is a List<String>
List. Does this require a converter?
Thanks to Laabidi Raissi for his suggestion. The answer, however was that my selectOneMenu fell outside of the form. Moving the form tags so they enclosed the dropdown solved the problem.
I am new to jsf 2.0 and therefore i am facing a serious issue grouping the prime faces datagrid and radio buttons. I am using JSF 2.0-Primefaces 3.3, java 1.6, and running my application on tomcat server on windows operating system.
The issue is grouping data grid and radio button. The following paragraph will describe about an example code:
#ManagedBean(name="quickBill")
#ViewScoped
public class QuickBill extends BaseManagedBean implements Serializable {
private List<String[]> insurerIDs=null;
#PostConstruct
public void init(){
loadInsurer();
}
private void loadInsurer(){
logger.info("Entered Load Insurer");
insurerIDs = new ArrayList<String[]>();
if (null != insurerList) {
insurerIDs.add(new String[] {"InsurerID1","Insurer_Name1") });
insurerIDs.add(new String[] {"InsurerID2","Insurer_Name2") });
insurerIDs.add(new String[] {"InsurerID3","Insurer_Name3") });
insurerIDs.add(new String[] {"InsurerID4","Insurer_Name4") });
}
}
public List<String[]> getinsurerIDs() {
return insurerIDs;
}
}
The jsf code is as follows:
<p:dataGrid var="quickBillVar" value="#{quickBill.insurerIDs}" columns="4" >
<p:column selectionMode="single">
<p:selectOneRadio id="options" value="#{quickBill.selectedOption}">
<f:selectItem itemLabel="#{quickBillVar[1]}" itemValue="#{quickBillVar[1]}"/>
</p:selectOneRadio>
<p:commandLink id="insurerid" title="Isurer">
<p:graphicImage value="../../images/insurers1/#{quickBillVar[0]}.jpg"/>
</p:commandLink>
</p:column>
</p:dataGrid>
The above code when executed results in the display of the radio button, which allows user to select multiple radio button at the same time. However the requirement is to restrict user to select only one button rather than allowing user to select multiple button at a time. I have also used selectionMode="single" to produce the expected output but it didn't help much.
Kindly help me on this or provide me with examples which will overcome this issue.
I believe the custom layout in this example will help.
https://www.primefaces.org/showcase/ui/input/oneRadio.xhtml
You can try the below code using Map.
Backing bean code
String selectedInsurer;
Map<String,String> insurerIDs = new LinkedHashMap<String,String>();
insurerIDs.put("InsurerID1", "Insurer_Name1"); //(label, value)
insurerIDs.put("InsurerID2", "Insurer_Name2");
insurerIDs.put("InsurerID3", "Insurer_Name3");
insurerIDs.put("InsurerID4", "Insurer_Name4");
//-- getter & setter
At front end
<h:selectOneRadio value="#{quickBill.selectedInsurer}">
<f:selectItems value="#{quickBill.insurerIDs}" />
</h:selectOneRadio>
I have a primefaces p:dataTable with InCell editing enabled and want to trigger/activate the RowEditor for the newly added row.
Excerpt of XHTML
<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="#this carTable ..."/>
<p:dataTable id="carTable" var="car" value="#{myBean.cars}" ... editable="true">
<p:column ...>
<p:cellEditor>
...
</p:cellEditor>
</p:column>
...
<p:column ...>
<p:rowEditor />
</p:column>
...
</p:dataTable>
Here is what i have so far for the bean method:
public void addNewCar() {
Car newCar = new Car();
cars.add(newCar);
FacesContext facesContext = FacesContext.getCurrentInstance();
UIComponent uiTable = ComponentUtils.findComponent(facesContext.getViewRoot(), "carTable");
DataTable table = (DataTable) uiTable;
final AjaxBehavior behavior = new AjaxBehavior();
RowEditEvent rowEditEvent = new RowEditEvent(uiTable, behavior, table.getRowData());
rowEditEvent.setPhaseId(PhaseId.UPDATE_MODEL_VALUES);
table.broadcast(rowEditEvent);
}
i don't know
if this is the correct approach
in case yes, which object to pass to the constructor RowEditEvent(UIComponent component, Behavior behavior, Object object) as the 3rd parameter
If you have only one data table in the facelet try to use this
oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});
Add this to the command button. This should work.
I used the execute(..) method of class RequestContext in my create method. This allowed me to first calculate the index of the row to go into edit mode and to include it dynamically in the javascript:
RequestContext.getCurrentInstance().execute("jQuery('span.ui-icon-pencil').eq(" + rowToEditIndex + ").each(function(){jQuery(this).click()});");
Hope this helps.
You can add an unique styleClass to the dataTable, and one javascript function in the commandButton:
So add to the table:
styleClass="myTable"
And to the button:
oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"
And your code will look like this:
<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="#this carTable ..." oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"/>
<p:dataTable styleClass="myTable" id="carTable" var="car" value="#{myBean.cars}" ... editable="true">
<p:column ...>
<p:cellEditor>
...
</p:cellEditor>
</p:column>
...
<p:column ...>
<p:rowEditor />
</p:column>
...
</p:dataTable>
This solution aims to resolve a few drawbacks of the original answer of:
oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"
The above statement retrieves all "tr" elements which are descendants (at any level) of elements with the ".ui-datatable-data" class. The potential issues with that are:
As mentioned by #Gnappuraz, if there are multiple p:datatable's in the document, this statement will choose the last table.
Additionally, I ran into a problem where even with one datatable, a column with a p:selectOneRadio component will also render a html table (that contains "tr" elements). In this case the selector chooses the last "tr" for the p:selectOneRadio's table, rather than the p:datatable.
Not a problem, but the statement can be shortened to exclude the each() because of jQuery's implicit iteration.
What I ended up with was:
oncomplete="jQuery('#tableForm\\:table .ui-datatable-data > tr').last().find('span.ui-icon-pencil').click();"
This selector says - get the last "tr" element, which is a direct child of an element with class ".ui-datatable-data", which is also a descendant of the element with id "table" in form "tableForm". In other words you can now have multiple p:datatables, and any include any components that render html tables.
Try this :
jQuery('#FormID\\:DataTableID\\:#{datatable.size()}\\:rowEditorID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});
worked well, no matter how many datatables in a same page.
If you have several DataTable which each of them has an ID, then try to use one of these solutions:
Oncomplete="jQuery('#FrmID:TabViewI:mydataTableID'.replace(/:/g,'\\:')).find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"
OR:
oncomplete="jQuery('#FrmID\\:TabViewID\\:mydataTableID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"
This should work perfectly.
Execute a JQuery script on complete process :
oncomplete="editNewRow()"
<script type="text/javascript">
$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
if (event.keyCode == 13) {
$(this).closest("tr").find(".td-edition .ui-row-editor .ui-row-editor-check .ui-icon-check").click();
return false;
}
});
function editNewRow() {
$("#pim\\:invoiceRuleCretariaTable tbody:first tr:first .td-edition .ui-row-editor .ui-icon-pencil").click();
}
</script>
The first function submit the addition action by press on "Enter" key
Execute a JQuery script on complete process :
oncomplete="editNewRow()"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
if (event.keyCode == 13) {
$(this).closest("tr").find(".td-edition .ui-row-editor .ui-row-editor-check .ui-icon-check").click();
return false;
}
});
function editNewRow() {
$("#panel\\:carTable tbody:first tr:last .td-edition .ui-row-editor .ui-icon-pencil").click();
}
</script>
The first function submit the addition action by press on "Enter" key
To solve this is better to use styleClass and because for fix this it is necessary to use javascript, you need to check the html tags in your browser, because it seems that they change with the versions of primefaces. For vesion 6.1 I've put this on my bean:
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.execute("$('.styleEventosPlanPrestacion tbody.ui-datatable-data tr:first-child td div.ui-row-editor a.ui-row-editor-pencil').click()");
and In my .xhtml I've put this:
<p:dataTable ... styleClass="styleEventosPlanPrestacion">
This preselected autoCompleteBean.selectedPlayer1 does not work !!
This is the example extracted from the showcase of primefaces site: https://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" converter="player">
<f:selectItems value="#{autoCompleteBean.players}" var="player"
itemLabel="#{player.name}" itemValue="#{player}"/>
</p:selectOneMenu>
In the bean, I put this lines :
private Player selectedPlayer1;
private List players;
/* AutoCompleteBean - constructor */
public AutoCompleteBean() {
players = new ArrayList<Player>();
players.add(new Player("Messi", 10, "messi.jpg", "CF"));
players.add(new Player("Bojan", 9, "bojan.jpg", "CF"));
selectedPlayer1 = players.get(1);
}
Variable autoCompleteBean.selectedPlayer1,
contain the value that you specify before opening the jsp.
But, this is not preselected. Only appear always selected the first element
of the arraylist. Why ??
Only I need that p:selectOneMenu, preselect de value in the list.
Thanks in advance !!
Well, in fact you can pre-select a value, or in other words, select a value by default by doing this:
<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" effect="fade" converter="player">
<f:selectItem itemLabel="autoCompleteBean.selectedPlayer1.name" itemValue="autoCompleteBean.selectedPlayer1" />
<f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>
</p:selectOneMenu>
The only problem with this is that it will repeat the value selected-by-default like this:
And you I guess you would like something like this:
So for this matter, i will recommend you to use the array player:
itemValue="#{player}"
but removing from this array the pre-selected option
Does your player class have hashCode() and equals() functions?
If they are missing, primefaces cannot make differences between them.
Similar problem:
primefaces selectOneMenu doesn't working when it should