What i want to do is; when user clicks to row, it will select the row.When user double clicks to row, it will start cell editing. At Primefaces showcase(http://www.primefaces.org/showcase/ui/d ... nstant.jsf) it says "Instant row selection, dblclick selection and unselection is implemented using ajax behaviors." but i couldnt find where they implemented dblclick selection. Is there a way to start cell editing event with double click event?
<p:ajax event="rowDblselect">
From PrimeFaces Users Guide
Use
<p:ajax event="rowDblselect" />
in your <p:dataTable /> like this:
<p:dataTable
id="yourTableId"
value="#{yourBean.items}"
selectionMode="single"
selection="#{yourBean.selectedItem}"
var="item"
rowKey="#{item.id}">
<p:ajax
event="rowDblselect"
listener="#{yourBean.onRowDoubleClick}"
update="#form:theComponentYouWantToUpdate"
global="false" />
<!-- your columns here -->
</p:dataTable>
In your bean/controller use:
import org.primefaces.event.SelectEvent;
public void onRowDoubleClick(final SelectEvent event) {
YourObject obj = (YourObject) event.getObject();
// rest of your logic
}
Try setting dblClickSelect="true" on your table.
From the documentation:
By default, row based selection is enabled by click event, enable dblClickSelect so that clicking double on a row does the selection.
Related
The default operation of the handsontable when press intro is focus the cell on the bottom, but in primefaces extension the focus go to the right, I need go to the bottom, is there some config that I can try?
I tried to modify the afterChange event with the updateSettings method but isn't work.
below the code of the sheet in the JSF way.
<pe:sheet extender="sheetExtender" id="sheet" contextMenu="true"
rowHeader="true" colHeader="true" widgetVar="sheetWidget"
var="_det" rowKey="#{_det.item}" height="300" showRowHeaders="true"
value="#{ordenSuministroController.detalles}"
readOnly="#{ordenSuministroController.instance.estado!='PENDIENTE'}"
converter="#{ordenSuministroDetConverter}"
emptyMessage="No se encontraron registros." locale="es-MX"
maxCols="5" minCols="5" movableCols="false" movableRows="true">
<f:facet name="header">
<strong>HEADER</strong>
</f:facet>
<pe:sheetcolumn headerText="Descripcion" required="true"
readOnly="#{ordenSuministroController.instance.estado!='PENDIENTE'}"
value="#{_det.descripcion}" colType="text"></pe:sheetcolumn>
<pe:sheetcolumn headerText="Unidad" value="#{_det.unidad}"
readOnly="#{ordenSuministroController.instance.estado!='PENDIENTE'}"
colType="text"></pe:sheetcolumn>
</pe:sheet>
Primefaces v7.0
Primefaces-extension v7.0.1
Based on HandsonTable documentation you an use the enterMoves function to control how the enter key moves cells. See: https://github.com/handsontable/handsontable/issues/4531
Then in the Sheet Extender code you can simply do the "extender" functionality like in the Showcase example and change the Extender to:
function sheetExtender() {
this.cfg.enterMoves = {row: 1, col: 0};
}
I got the following problem using Primefaces 5.2 and JSF 2.1
I got a p:dataTable, and when the user selects a row, the selected object's data should be shown below the table. One requirement is that there should be a checkbox below the table, which should be editable. If the user toggles the checkbox and selects a different entry in the table, the checkbox' new value should be saved. (see the code below)
But I observed the following behaviour. When I select object1, check its checkbox and then select object2, object2's setter will be called, not object1's. Thus object2.someValue will be changed, while object1.someValue won't be. any idea?
<p:dataTable var="myVar" selectionMode="single"
id="myTable" selection="#{form.myValue}"
rowKey="#{myVar.id}"
value="#{form.myTableData}">
<!-- columns here -->
<p:ajax event="rowSelect" process="my_booleancheckbox" update="wrapper">
<p:dataTable>
<h:panelGroup id="wrapper">
<p:booleanCheckbox value="#{form.myValue.someValue}" id="my_booleancheckbox"/>
<!--other stuff here -->
</h:panelGroup>
That's how it is supposed to work, the rowSelect event is fired after the property selection of your p:dataTable is updated
move your ajax action to the p:booleanCheckbox
<p:dataTable var="myVar" selectionMode="single"
id="myTable" selection="#{form.myValue}"
rowKey="#{myVar.id}"
value="#{form.myTableData}">
<!-- columns here -->
<p:dataTable>
<h:panelGroup id="wrapper">
<p:booleanCheckbox value="#{form.myValue.someValue}" id="my_booleancheckbox">
<p:ajax process="my_booleancheckbox" update="wrapper">
</p:booleanCheckbox>
<!--other stuff here -->
</h:panelGroup>
I am using an in rowselection mode and trying just to get the selected row of the datatable.
I have tried it using the stateMap of IceFaces, but it does not work. The ajax event opens a dialog after selection, where I want to show data of the selected row.
<ace:dataTable id="datatable"
value="#{myBean.myValues()}"
var="myValue" paginator="true" paginatorPosition="bottom"
selectionMode="single" rows="15" rowKey="#{myValue.id}"
doubleClickSelect="true">
<ace:ajax event="select" render="#this" execute="#this"
onStart="ice.ace.instance('#{myDialog.clientId}').show();" />
...
You can add rowSelectListener to the tag <ace:dataTable>
<ace:dataTable rowSelectListener="#{manageBean.rowSelectListener1}" >
And add a function in the code behind to get the row selected.
public void rowSelectListener1(SelectEvent event){
DataType selectedItem = (DataType )event.getObject();
}
Use case
I have a dialog that contains a datatable and an inputTextArea. The datatable is filled when the user clicks a button. When some (single) row of the datatable is selected, I want the contents of this row to be inserted at the end of the inputTextArea.
Problem
When using the selection attribute of the datatable, I dont have the most recent contents in the inputTextArea. Scenario: I enter "ABC" in my inputTextArea, then click the button, then make my inputTextArea "FFF" and select a row ("dtText") from the datatable. The new contents of the inputTextArea is "ABC dtText" instead of "FFF dtText".
What I tried
I tried to add a new listener but I cannot figure out how to bring it in properly so that it is being called before the selection happens. Found nothing on google or in the PF User Guide.
I was hoping the blur event updates my ruleText, but it doesn't happen.
inputTextArea
<p:inputTextarea value="#{mrBean.selectedElement.ruleTxt}" id="rt1New" rows="20" cols="100" autoResize="false">
<f:ajax event="blur" update="duoDlgForm2" />
</p:inputTextarea>
datatable
<p:dataTable id="qPdt" var="p" value="#{regelBean.queriedParams}" rowKey="#{p}"
selection="#{mrBean.selectedParam}" selectionMode="single">
<p:ajax event="rowSelect" update="#form"/>
<p:column ...
java
public void setSelectedParam(ParamOrDBParamModel selectedParam) {
if(selectedParam != null) {
selectedElement.setRuleTxt(selectedElement.getRuleTxt() + "\n" + selectedParam.getName().trim());
How can I work with the most recent text (selectedElement.getRuleTxt) when I am inside the setSelectedParam method?
PF 4.0
EDIT: if I try jquery, what do I have to insert into my function
$('#qPdt tr').on('click', function() {
// I reach this point, now what? How to get the contents of a row when I know the type?
$("#rt1New").append( ?? )
});
I want to get the selected row of my dataTable, directly if the user selects a row.
I have added
<p:dataTable id="dataTableID" var="row"
value="#{bean.value}"
rowKey="${row.id}"
selection="#{bean.selectedValue}" selectionMode="single">
It is just possible to get it after clicking on a button.
There are two ajax-events for instant row selection in primefaces dataTable. One for the selection and one for the unselection.
<p:dataTable ..>
<p:ajax event="rowSelect" listener="#{yourBean.someListener}"/>
...
</p:dataTable>
Now you can access the selected item (of class Foo) like this:
public void someListener(SelectEvent event) {
(Foo) event.getObject() // cast "Object" to "Foo"
}
For additional information take a look at the primefaces showcase first: http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf