Disable selection in datatable - jsf

I'm using Primefaces 5.3, and I'm filling a datatable with some records from the database if the length of records is lower than 10 I complete it with empty records so the datatable always diplays 10 rows.
My datatable looks like this :
<p:dataTable id="dataTable"
editable="true" editMode="cell"
value="#{beanPlanningl.getListPlanningSalle(entry, 1)}"
var="planning"
selectionMode="single"
selection="#{beanPlanning.selectedPlanning}"
rowKey="#{planning.id}"
sortBy="#{planning.heureDebut}"
>
So what I want is to disable selection on rows that has the empty records.
How can I do that ?
PS : planning.id equals 0 in empty records.
Edit :
I forgot to mention that I already used rendered as following :
<p:column >
<p:cellEditor rendered="#{planning.id != 0}">
<f:facet name="output"> <h:outputText value="#{planning.heureDebut}" /></f:facet>
<f:facet name="input">
<p:inputMask mask="99:99" value="#{planning.heureDebut}"
required="true" maxlength="4"
requiredMessage="Heure de début : vous devez indiquer une valeur."
validatorMessage="Heure de début non valide.">
<f:validateRegex pattern="([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]"/>
</p:inputMask>
</f:facet>
</p:cellEditor>
</p:column>
But this only prevents from editing cells, but they can be always selected.
Edit 2 :
I tried to use disabledSelection now I can't select rows but cells can always be selected, before I used disabledSelection :
as you can see I can select rows and on hovering they get colored.
and then when I used disabledSelection :
Now hovering doesnt work for empty rows and selection on rows as well, but the cells can always be selected, so no I only need to prevent that from hapenning.
I noticed that when the cell is selected two css classes are added : ui-state-highlight ui-cell-editing.

The solution I did was to prevent the default behaviour of columns which doesnt have a .ui-cell-editor in it's childs as following :
$(".ui-editable-column").click(function(event){
if(!$(this).find('.ui-cell-editor').length){
event.preventDefault();
return false;
}
});

Related

Primefaces Ajax Datatable rowSelect only firing on some whitespace [duplicate]

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>

ajax update row while using the rowStyleClass of p:datatable

i have a p:datatable of 30 sets of rows with each row can have different colors(rowStyleClass) based on the values chose in one of the column with ajax update table.
however, this give me problem with unsaved values in other columns of input text where everytime i change the value ajax, the table gets repopulated thus resetting every field to the saved original values.
how do i update only the row, but also use the p:datatable rowStyleClass?
eg. of code
<p:datatable id="dtable" var="tbl" value="#{bean.list}"
rowStyleClass=" #{tbl.column.value eq 'a' ? 'yellowColored' : ''}
#{tbl.column.value eq 'b' ? 'greenColored' : ''}
#{tbl.column.value eq 'c' ? 'kindaBlueColored' : ''}">
<p:column id="column" >
<f:facet name="header">
<h:outputText value="column" />
</f:facet>
<p:selectOneMenu id="selColumn" value="#{tbl.column}" var="t" >
<p:ajax partialSubmit="true" event="change" process="#this"
update="tsheet" listener="#{bean.onTypeChange}" />
<f:selectItems value="#{bean.typeList}" var="type"
itemValue="#{type}" itemLabel="#{type.description}" />
</p:selectOneMenu>
</p:column>
</p:datatable>

create DataTable with Two dimensional with InputText into cells

I need create an primefaces Datatable with InputText into cells and get de information edited in the inputText
I create the datatable with the next code:
<p:dataTable value="#{busquedaArticulo.attr}" var="rowName" styleClass="table table-bordered table-stripped" rowIndexVar="rowIdx">
<p:column headerText="" styleClass="ui-widget-header">
<h:outputText value="#{rowName}"/>
</p:column>
<p:columns value="#{busquedaArticulo.siz}" var="columnName" headerText="#{columnName}" columnIndexVar="colIdx">
<h:inputText id="siz" value="#" styleClass="form-control" />
</p:columns>
</p:dataTable>
I suggest you to use editable row. you can show value of each entry if it has been set by user or has a default value or leave it empty or "not set" if it's not set.
user can click on pencil icon and edit value of each row. once row has been edited you can get new value in your backing bean.
look at this: http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
hope it was useful :)

Row selection with cell-editor in PrimeFaces DataTable makes it difficult to select a row

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>

How to have checkbox selection in datatable with instant row selection?

I use primefaces 3.0.1 and I have a problem with my datatable.
I use my datatable with the instant row selection. That works very well.
But I wish use in the same time the checkbox selection (for exemple, for select some rows and delete the selected rows)
And when I use the
<p:column selectionMode="multiple" />
the checkbox are display, but I can't check any checkbox....
Anyone have a solution ?
Thanks.
P.S. :
my code
<p:dataTable id="rows" var="row" value="#{myBean.row}" selection="#{myBean.selectedRow}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{myBean.onRowSelect}" update="#form"/>
<p:column selectionMode="multiple" style="width:18px" />
<p:column>
<h:outputText value="#{row.subject}" />
</p:column>
</p:dataTable>
Checkboxes are to be used for multiple row selection, but you've still declared your <p:dataTable> for single row selection. Remove selectionMode="single" from the <p:dataTable> and make sure that the #{myBean.selectedRow} is changed to be an array instead.
E.g.
<p:dataTable ... selection="#{myBean.selectedRows}">
with
private Row[] selectedRows;

Resources