I am developing a dynamic table with primefaces 6.0 and JSF 2.2. I have a TreeNode of name nodoRoot. I am using h:commandLink in each element for add children, rendering the p:treeNode. Each element has the same list of names and I would like to show this information of the best way.
I have this:
I would like:
Also, in the first image you can see (in red) the subtable has a header, I would like remove this.
This is my code:
<h:form id="myForm">
<h:panelGroup id="pgSystem">
<p:treeTable id="tablaSystem" class=" validate tablaNormal" style="border:none;" value="#{myBean.nodoRoot}" var="element">
<f:facet name="header">
Sistema
</f:facet>
<p:column headerText="Nombre">
<h:outputText value="#{element.nombre}" />
<h:panelGroup id="agregarParteHija#{element.id}">
<h:commandLink action="#{myBean.cargarNuevaParte(element)}">
<f:ajax render="anotherForm" execute="agregarParteHija#{element.id}"/>
<i class="material-icons small">add</i>
</h:commandLink>
</h:panelGroup>
</p:column>
<p:column headerText="Names">
<p:dataTable value="#{question.names}" var="name">
<p:column>
<h:outputText value="#{name}"/>
</p:column>
</p:dataTable>
</p:column>
</p:treeTable>
<br/>
</h:panelGroup>
</h:form>
Thank you!
Related
I have a PrimeFaces p:dataTable with one column of type p:cellEditor with an p:inputText field.
This inputText is supposed to be required but if I set required="true" and leave the input empty nothing happens / no message is shown. The form including the above is submitted anyway.
Here's my code, especially the <p:column headerText="Data Value"> part:
<h:form id="my-form">
<p:dataTable var="dataItem" rowIndexVar="rowIndex" value="#{backingBean.dataList}" draggableRows="true" editable="true" editMode="cell">
<p:ajax event="rowReorder" update="#form"/>
<p:column headerText="Order Position">
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Data Name">
<h:outputText value="#{dataItem.name}" />
</p:column>
<p:column headerText="Data Value">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{dataItem.value}" /></f:facet>
<f:facet name="input"><p:inputText required="true" requiredMessage="Please insert a value" id="valueInput" value="#{dataItem.value}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<div>
<h:commandLink action="#{backingBean.submit()}">Submit</h:commandLink>
</div>
<h:messages id="validateMsg" />
</h:form>
The submitting h:commandLink is not an ajax call. But in my opinion it shouldn't submit the form anyway as long as the required p:inputText fields are empty.
I also tried using h:inputText instead of p:inputText with the same result.
I tried to add a required h:inputText outside the p:dataTable which works as expected and prevents the form from being submitted as long as it is empty.
Any ideas about how I get a required p:inputText field in p:cellEdit ?
According to rion18's suggestion. I'm checking in my backing bean if all values are set. Only if all values are set the submit button is shown. Here's how I ended up doing this:
<h:form id="my-form">
<p:dataTable var="dataItem" rowIndexVar="rowIndex" value="#{backingBean.dataList}" draggableRows="true" editable="true" editMode="cell">
<p:ajax event="cellEdit" update=":#{p:component('submit-button-group')}" />
<p:column>
...
</p:column>
</p:dataTable>
<div>
<h:panelGroup id="submit-button-group">
<h:commandLink action="#{backingBean.submit()}" rendered="#{backingBean.isAllValuesSet()}">Submit</h:commandLink>
</h:panelGroup>
</div>
</h:form>
In my backing bean I have a simple function that iterates over the dataList:
public boolean isAllValuesSet(){
for(DataItem item:dataItems){
if(item.getValue()==null || item.getValue().isEmpty()){
return false;
}
}
return true;
}
I am providing a search function using JSF. I get the list and display it correctly in a datatable :
<p:dataTable id="props" var="prop" value="#{propController.propSearch}" editable="true" style="margin-bottom:20px">
<p:column headerText="Id" width="20">
<h:outputText value="#{prop.id}" />
</p:column>
<p:column headerText="Name" width="300">
<h:outputText value="#{prop.name}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{prop.shortDescription}" />
</p:column>
<p:column headerText="Price" width="120">
<h:outputText value="#{prop.price}" />
</p:column>
<p:column width="120">
<h:commandButton value="View Prop" immediate="true" action="#{propController.viewSingleProp(prop)}" />
</p:column>
<p:column width="120">
<h:commandButton value="Delete" immediate="true" onclick="return confirm('Are you sure you want to delete this prop?')" actionListener="#{propController.deleteProp(prop)}" />
</p:column>
</p:dataTable>
</h:form>
However the commandButton to view each individual item does not get called. Instead the search page just refreshes with no data.
Why is this happening?
(I hope your opening tag of <h:form> is just missing in your code posted in your question, not in your actual code!)
You need to remove the attribute immediate="true" from the h:commandButton.
See:
Immediate=true VS immediate=false in JSF Component
Hello guys I have a problem with my datatable I want to filter it, but if i put something into the text field nothing is shown and also if i clear the input also nothing.
It is possible if i have more than one statment in a column?
So I use primefaces 3.5 and jsf 2.1
Here is the code and if you need more code post an comment. thx
<p:dataTable id="inboxTable" var="task" value="#{taskboxBean.taskboxInboxList}" paginator="true"
widgetVar="inboxTable" rows="10" selection="#{taskboxBean.selectedTaskbox}"
selectionMode="single" rowKey="#{task.ID}" emptyMessage="" paginatorPosition="bottom"
filteredValue="#{taskboxBean.inboxList}">
<p:ajax event="rowSelect" update=":contentForm, :postForm:tabViewPosts:inboxTable"
listener="#{taskboxBean.onTaskboxRowSelect}" />
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="inboxTable.filter()"
style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Post">
<h:outputText
value="#{task.FROM_USER.FIRST_NAME} #{task.FROM_USER.LAST_NAME} (#{task.FROM_USER.EMAIL})" />
<div align="right">
<h:panelGroup rendered="#{!task.IS_SEEN}" class="fa fa-envelope fa-2x" />
<h:panelGroup rendered="#{task.IS_SEEN}" class="fa fa-envelope-o fa-2x" />
</div>
<h:outputText value="#{task.TASKTYPE.NAME}" />
<br />
<h:outputText value="#{task.CREATE_TIMESTAMP}" />
</p:column>
</p:dataTable>
It is not explicitely written in documentation, but as mentioned on PrimeFaces forum, you need to declare filterBy attribute on columns you want to make searchable via global filter.
It is also suggested here to add filterStyle="display:none" to columns if you don't want a filter to be visible on individual columns.
The example from documentation has filterBy:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="carsTable.filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
</p:dataTable>
however, as typical for PrimeFaces documentation, it's not written that it won't work without filterBy.
You must add getter and setter of your taskboxInboxList in the taskboxBean class. But it filters just the first statement placed in the column.
I'm trying to set a panelgrid inside a dialog. Everything seems to be working except the colspan. I've check this post PrimeFaces panelGrid but its year and half old. From the primefaces manual and showcase, colspan should be accepted by datatable and panelGrid.
<h:form id="idFormAddDialog">
<p:panelGrid id="idPanelAddUsers" columns="2">
<h:outputLabel for="dAddOutUser" value="Username:"></h:outputLabel>
<h:inputText id="dAddOutUser" value="#{userController.username}"></h:inputText>
<h:outputLabel for="dSelRole" value="Role:"></h:outputLabel>
<h:selectOneMenu id="dSelRole" value="#{userController.role}">
<f:selectItem itemLabel="Admin" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Researcher" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="User" itemValue="3"></f:selectItem>
</h:selectOneMenu>
<h:outputLabel for="dAddINPassword1" value="Password: "></h:outputLabel>
<p:password id="dAddINPassword1" value="#{userController.password}" feedback="true"></p:password>
<p:row>
<p:column colspan="2">
<p:separator></p:separator>
<!-- <p:separator></p:separator>-->
</p:column>
</p:row>
<p:commandButton value="OK" actionListener="#{userController.addUser()}" ></p:commandButton>
<p:button value="Cancel"></p:button>
</p:panelGrid>
</h:form>
But I'm not able to find what I'm doing wrong.
First, if you want to use p:row and p:column in p:panelGrid remove columns attribute, and manage rows and column manually with p:row and p:column tags. Everything inside p:panelGrid must be inside p:row tags. Example:
<p:panelGrid id="idPanelAddUsers">
<p:row>
<p:column></p:column>
<p:column></p:column>
<p:column></p:column>
</p:row>
<p:row>
<p:column colspan="2"></p:column>
<p:column></p:column>
</p:row>
</p:panelGrid>
I have filters for columns.
Here i want to show water mark in filter (As Shown in figure in red circle)
I am using prime faces 3.4
I have tred this
<h:form id="parametersListForm" prependId="false">
<p:dataTable id="parameteresList" value="#{parameterController.lstParameter}"
var="parameters" selectionMode="single"
selection="#{parameterController.selectedParameter}"
styleClass="tnt-main-table">
<p:ajax event="rowSelect" update=":parameterDetailsForm"
listener="#{parameterController.onParametersRowSelect}" />
<p:column id="colomnRefType" filterBy="#{parameters.beRefType}"
headerText="#{msgs['parameters.beRefType.label']}"
filterMatchMode="contains">
<h:outputText value="#{parameters.beRefType}"/>
<p:watermark value="Ref Type"
forElement= ":parameteresList:colomnRefType_filter">
</p:watermark>
</p:column>
</p:dataTable>
</h:form>
How can I achieve this?
There is an attribute forElement of p:watermark for that. The specifications state that forElement should contain jquery selector of the html input component. But according to these threads here and here, the forElement should strictly be only the client ID of the html input component.
So you can do following:
<p:dataTable id="battingStyleTable" ... ... ..>
<p:column id="myColumn"
filterBy="#{battingStyle.battingStyleString}"
filterMatchMode="contains">
<f:facet name="header">Name</f:facet>
<h:outputText value="#{battingStyle.battingStyleString}" />
<p:watermark value="Watermark text"
forElement='battingStyleTable:myColumn_filter'></p:watermark>
<!-- Please note that the prependId of my form is false, and id of the datatable is battingStyleTable and id of the column is myColumn. Thats why the id of the textfield of the filter will be battingStyleTable:myColumn_filter. Please change it accordingly. If you can't do prependId="false" to your form then you must include form id in the start also, like myFormId:myDatatableId:myColumnId_filter -->
</p:column>
...............
..........
................
</p:dataTable>
Finally got solution.
<h:form id="parametersListForm">
<p:dataTable id="parameteresList" value="#{parameterController.lstParameter}"
var="parameters" styleClass="tnt-main-table">
<p:column id="columnRefType" filterBy="#{parameters.beRefType}" >
<h:outputText value="#{parameters.beRefType}" />
<p:watermark forElement="parametersListForm:parameteresList:columnRefType:filter"
value="#{msgs['parameters.beRefType.label']}"/>
</p:column>
</p:dataTable>
</h:form>
Hope it helps to some one :)
Try to use this syntax to address the filter field. Worked for me with Primefaces 6.1.
<h:form id="f_myForm">
<p:dataTable id="dt_myTable">
<p:column id="col_myCol>
<h:outputText id="ot_myText" />
<p:watermark for="#(#f_myForm\\:dt_myTable\\:col_myCol\\:filter)" value="MyPlaceholder" />
</p:column>
</p:dataTable>
</h:form>