I created a JSF table like this:
<c:dataTable value="#{myViewController.all}" id="myViewTable" var="T" selection="#{myOtherView.select}" selectionMode="single" update="otherView>
<c:column filterBy="#{T.name}" sortBy="#{T.name}">
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet> <h:outputText value="#{T.name}"/>
</c:column>
Suppose that I have two entries within this table, they are name = a, and name = b. The method in myOtherView.select is
#SelectEvent
public void setSelect(Object value) {
}
I debuged the value in setSelect method. When open the view first time, I selected the first row from the table and the value is indeed a. Then I presses the header of 'Name', and the entries showing in the table is b then a. And I selected the first row from the table, the value is still a. not b..... Anyone who knows why this happened?**
Related
I need to add and remove rows in DataTable and using buttons to add and remove the rows respectively by single selection.
My html/jsf code is :
<p:dataTable id="creditTable" rowIndexVar="sn"
value="#{cpeTrainingMB.cpeTrainingObj.cpeTrainigSchDetail}"
var="cpeDetail" scrollable="true" scrollHeight="100"
selectionMode="single"
rowKey="#{cpeDetail.id}">
<p:ajax event="rowSelect" update=":cpe:creditTable" listener="#{cpeTrainingMB.onRowSelect}"/>
<p:column headerText="Sn">
<h:outputText value="#{sn+1}"></h:outputText>
</p:column>
<p:column headerText="Date">
<h:outputText value="#{cpeDetail.fromDtBS}"></h:outputText>
</p:column>
<p:column headerText="Credit HR">
<h:outputText value="#{cpeDetail.creditHr}"></h:outputText>
</p:column>
</p:dataTable>
The problem is that when I add more than one data, and then select a row to delete , it selects all the rows at once which is not required.
It works well for only one row.
The backing methods/functions are listed below :
public void onRowSelect(SelectEvent event){
cpeScheSelected = null;
this.cpeScheSelected = (CPETrainingScheduleModel)event.getObject();
cpeTrainingScheObj = null;
cpeTrainingScheObj = this.cpeScheSelected;
}
All elements listed in the dataTable must have a not-null value in the rowKey property (in this case - id field). Nulls will lead to the behaviour described in the question. An alternative to specifying rowKey is implementing SelectableDataModel with custom method public Object getRowKey(RowClass rc).
I'm having a PrimeFaces (3.5) DataTable which contains some columns with <p:cellEditor> as usual in which selection of multiple rows is enabled by selectionMode="multiple".
When I click on a cell in a row containing <p:cellEditor>, the row is selected only time to time. The selection of the row is possible only when the padding area close to the cell borders is clicked. The selection is not made, when the actual text of that cell in the middle is clicked which is actually enclosed by <p:cellEditor>.
This doesn't happen, when <p:cellEditor> is dismissed.
Selection of a row in this manner is essential in my case , since a single row is deleted with a context menu by right-clicking on the row to be deleted exactly the same as this showcase example (that example works fine because it doesn't have <p:cellEditor>. I don't find a showcase example that uses both row selection and cell-editor together).
This issue was reported and its status is 'WontFix'. They said,
Cell and Row selection at same time is not supported.
But downgrading the framework from 3.5 indeed works (therefore, the above quote should simply be false and it appears to be misinterpreted) but this is not a solution. Did someone encounter this issue? Is there a way to change this behaviour?
Well, it has been 4 years and it hasn't been fixed yet. But - you can use some of JS magic in order to make it work.
First define JS function which selects datatable row by index:
<script>
function selectCurrentRow(index) {
var table = PF('myTableWidgetVar');
table.unselectAllRows();
table.selectRow(index, false);
}
</script>
Then define your datatable with rowIndexVar attribute set:
<p:dataTable id="myTable" widgetVar="myTableWidgetVar" var="parameter"
value="#{serviceMB.parameters}"
rowIndexVar="rowIndex"
rowKey="#{parameter.id}"
selectionMode="single"
editMode="cell">
And wrap cellEditor fields inside a div with onclick function defined:
<p:column>
<p:cellEditor>
<f:facet name="output">
<div onclick="selectCurrentRow(#{rowIndex});">
<p:outputLabel value="#{parameter.value}"/>
</div>
</f:facet>
<f:facet name="input">
<div onclick="selectCurrentRow(#{rowIndex});">
<p:inputText value="#{parameter.value}"/>
</div>
</f:facet>
</p:cellEditor>
</p:column>
This hack wont work properly if you are using row grouping datatable (row indexes will be shifted).
EDIT:
Use this function if you're using row grouping datatable:
function selectByRowKey(rowKey, table) {
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows.get(i);
if (row.getAttribute("data-rk") === rowKey) {
table.unselectAllRows();
table.selectRow(i, false);
break;
}
}
}
Where table = PF('myTableWidgetVar') and rowKey is a currently selected rowKey (for example '#{parameter.id}').
USE: style="display: block" in your cell:Editor, works for me.
<p:cellEditor>
<f:facet name="output"><h:outputText style="display: block;" value="#{whatever}"/></f:facet>
<f:facet name="input"><p:inputText id=......../></f:facet>
</p:cellEditor>
I have a dataTable displaying data of type Action. I have a column named "Status" which will be set by the user. After setting this column I want to retrieve the value from a HashMap with Action class as key and the status as value.
How could I do it directly in the dataTable status column? I attempted the following:
<p:dataTable var="currentExecutedTestAction" value="#{projectCampaignManagementMB.currentExecutedTestActionList}">
<p:column>
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:outputText value="#{projectCampaignManagementMB.actionMap(currentExecutedTestAction,statusValue)}" />
</p:column>
</p:dataTable>
Just use the action as a key (I suppose that the action is some String/Integer etc that can be used as a key).
<h:outputText value="#{projectCampaignManagementMB.actionMap[action]}"/>
JSF will use the action as a key to get the value, and than after you will submit some new value it will use action again to set the new value.
In a scrollable datatable, which displays a collection of objects , I have to add one manual row as first row. That row contains inputText, through which user can able to enter some values and while hitting enter, those values will save and displays in bottom rows. I couldnt able to add this manual row as first row. Below is the current code.
<rich:scrollableDataTable value="{resultList}" var="result">
<rich:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{result.name}" />
</rich:column>
<rich:column>
<f:facet name="header">Category</f:facet>
<h:outputText value="#{result.category}" />
</rich:column>
</rich:scrollableDataTable>
The above code is for just displaying the values from the backend.
1) For that you have to use bind rich:scrollableDataTable with the instance of HtmlScrollableDataTable in the backing bean.
In backing bean, create instance of it with accessor methods & then you can initialize it accordingly by adding the inputText components. Add actionListeners to these input components & then in listeners, you can add these inputText values as outputText to the table again as rows accordingly.
2) Else you can use inputText rather then outputText & disabling the subsequent rows other then 1st, so only data may get displayed - preventing input.
<rich:scrollableDataTable value="{resultList}" var="result">
<rich:column>
<f:facet name="header">Name</f:facet>
<h:inputText value="#{result.name}" disabled ="#{!result.isFirstRow}"/>
</rich:column>
<rich:column>
<f:facet name="header">Category</f:facet>
<h:inputText value="#{result.category}" disabled ="#{!result.isFirstRow}"/>
</rich:column>
</rich:scrollableDataTable>
Backing Bean :
//---
public void initialize(){
resultList.add(new Result("", "", true)); // Setting 1st input row enabled
}
public void inputListener(ActionEvent event){
// appending object based on input to the resultList
resultList.add(new Result(inputName, inputValue, false));
// added a boolean field to identify rows added later & to make them enable/disable accordingly
}
//---
I am not familiar with Richfaces, but tried to achieve it, as I was doing it with IceFaces.
I want to get selected row data from ice:datatable ? Here is me code , please give me your suggestion to get selected row data using rowselector.
Backingbean:
public void rowSelectionListener(RowSelectorEvent event) {
System.out.println(event.getRow());
}
jspx code:
<ice:rowSelector id="selected" selectionListener="#{inventoryList.rowSelectionListener}" multiple="false" selectedClass="tableRowSelected" mouseOverClass="tableRowMouseOver" />
<f:facet name="header">
<ice:outputText value="Stock #"/>
</f:facet>
<ice:outputText value="#{item.stock}"/>
</ice:column>
Now I am able to get row index, but I need to get selected row value. How can I do that?
You can get the desired row by binding the table(HtmlDataTable) in backing bean, and on action or some other event you can get the selected row by tableBinding.getRowData() returning the object from the list that was used in table.