I'm using datagrid of two columns on a list of fields which has property of field name and field text (input box)
My output looks ugly. Can I get some suggestions to format it neatly.
xhtml:
<h:form id="myForm">
<p:panel header="Field List">
<p:dataGrid columns="2" layout="grid" value="#{view.displayableFields}" var="currField" id="fapGrid">
<h:column>
<p:outputLabel value="#{currField.name}" />
</h:column>
<h:column>
<p:inputText value="#{currField.value}" />
</h:column>
</p:dataGrid>
</p:panel>
</h:form>
My ugly output:
Related
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!
I have this simple data table:
<h:dataTable id="table1" value="#{fournisseurbean.BC.listematpilotaccess1}" style="width : 900px; " var="item"
border="1">
<h:column>
<f:facet name="header">
<h:outputText value="idmatpilotaccess1n" />
</f:facet>
<h:outputText value="#{item.idmatpilotaccess1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="serie" />
</f:facet>
<h:outputText value="#{item.serie}" />
</h:column>
</h:dataTable>
I would like to not show this table if there is no data to show, so when
#{fournisseurbean.BC.listematpilotaccess1} is empty. How can I achieve this?
Add a rendered attribute to the tag
<h:dataTable rendered="#{not empty fournisseurbean.BC.listematpilotaccess1}">
This will render the component if the expression evaluates to true.
render its ok but if you want to hide more than the datatble ,for example : a label or a div.
you can use :
<c:if test="#{beanMb.beanList.size() gt 0 }">
....code
</c:if>
On my page I have a line that displays this line from my database table called timelogging.
<h:outputText value="#{timeLoggingController.selected.id}" title="#bundle.ViewTimeLoggingTitle_id}"/>
Then i have underneath it some input fields etc, then i require my timelogging id to be submitted with the form.
How would i assign the value i get from
timeLoggingController.selected.id
to my
timeLoggingDetailController.selected.logId ?
example of my code:
<h:form>
<h:panelGrid columns="2">
<h:outputText value="#{bundle.ViewTimeLoggingLabel_id}"/>
<h:outputText value="#{timeLoggingController.selected.id}" title="#{bundle.ViewTimeLoggingTitle_id}"/>
</h:panelGrid>
<h:panelGrid columns="2">
<h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_timeLoggingDetail_logId}" for="timeLoggingDetail_logId" />
<h:inputText id="timeLoggingDetail_logId" value="#{timeLoggingDetailController.selected.logId}" title="#{bundle.CreateTimeLoggingDetailTitle_logId}" required="true" requiredMessage="#{bundle.CreateTimeLoggingDetailRequiredMessage_logId}"/>
</h:panelGrid>
So what i want to do is to remove the inputText and automatically assign
timeLogging.selected.id
to
timeLoggingDetail.selected.id
at the end of my page:
<h:commandLink action="#{timeLoggingDetailController.create}" value="#{bundle.CreateTimeLoggingDetailSaveLink}" />
</h:form>
I'm trying to achieve external filtering using rich:dataTable which has sorting ability.
Here's what I have tried:
<rich:column sortBy="#{data.name}" id="name" filterMethod="#myBean.filter}">
<f:facet name="header">
<h:outputText value="Name" />
<h:inputText value="#{myBean.currentName}"
id="nameFilterInput" onclick="Event.stop(event)" onkeypress="searchNameOnEnter(event, this);">
<a4j:support event="onkeyup" reRender="dataTable , ds"
ignoreDupResponses="true" requestDelay="700" />
</h:inputText>
</f:facet>
<h:outputText value="#{data.name}" />
</rich:column>
Problem: The input text field is overwriting the output text (the header name)
I've tried using h:panelGroup inside the f:facet, but the problem is the sort icon is rendered in the third row seperately.
What am I missing here?
Any help would be great.
Updated: #Christophe Roussy, here's the screenshot
As seen the inputText is overwriting the outputText.
Update 2: I saw a post here: https://community.jboss.org/thread/13046 which explains to use <f:facet name="filter"> for inputText, but that seems to work only for rich:extendedDataTable.
Any way to make it work with rich:dataTable?
The <f:facet> can have only one child. Wrap them in a <h:panelGroup>.
<f:facet name="header">
<h:panelGroup>
<h:outputText ... />
<h:inputText ... />
</h:panelGroup>
</f:facet>
I have a datatable that generates rows of text inputs and selection lists and when I submit the values are null. I realize this is because jsf is generating separate random ID's for each input. I really need the data by rows and then parse out what I need. Any suggestions?:
<h:dataTable id="returnableItems" value="#{returnableItemsBean.orderCustomerFamilyItems}" var="item" styleClass="data stripeTable center">
<h:column>
<f:facet name="header">Item Number</f:facet>
<h:outputText id="itemNum" value="#{item.itemNum}"/>
</h:column>
<h:column>
<f:facet name="header">Description</f:facet>
<h:outputText value="#{item.itemDescription}"/>
</h:column>
<h:column>
<f:facet name="header">Original Quantity</f:facet>
<h:outputText value="#{item.originalQuantity}"/>
</h:column>
<h:column>
<f:facet name="header">Remaining Quantity</f:facet>
<h:outputText value="#{item.eligibleQuantity}"/>
</h:column>
<h:column>
<f:facet name="header">Quantity For Return</f:facet>
<h:panelGrid styleClass="stepper">
<span class="ns ui-stepper">
<input id="returnQuantity" type="text" name="returnQuantity" size="2" autocomplete="off" class="ui-stepper-textbox" value="0" />
<button type="button" name="ns_button_1_0" value="" class="ui-stepper-plus" onclick="setMaxVal(this,#{item.eligibleQuantity});">+</button>
<button type="button" name="ns_button_2_0" value="" class="ui-stepper-minus">-</button>
</span>
</h:panelGrid>
</h:column>
<h:column>
<f:facet name="header">Reason for Return</f:facet>
<h:selectOneMenu id="returnReason" value="#{returnableItemsBean.orderReason.ordReasonCode}">
<f:selectItems value="#{returnableItemsBean.orderReasons}"/>
<f:converter converterId="orderReasonConverter"/>
</h:selectOneMenu>
</h:column>
<h:column>
<f:facet name="header">Return/Replacement</f:facet>
<h:selectOneMenu id="returnOption">
<f:selectItem itemLabel="Option" itemValue=""/>
<f:selectItem itemLabel="Return" itemValue="return"/>
<f:selectItem itemLabel="Replacement" itemValue="replacement"/>
</h:selectOneMenu>
</h:column>
</h:dataTable>
I fail to understand why you use HTML input and buttons and not JSF ones in your form. Use <h:inputText> and <h:commandButton> instead, and bind their values to a property in your backing bean. The whole table should be inside a <h:form> ... </h:form> tag, of course.
Also, your input should probably be bound to a property of the "item" variable, like you do for output. If not, each row will have an input bound to the same property of your backing bean.
Are you using JSP, or Facelets ?
jsf is generating separate random ID's for each input
The IDs are not random; h:dataTable is a NamingContainer and manages its childrens clientIds so they become unique (a requirement of the HTML spec). JSF: working with component IDs (id vs clientId).
The straight HTML you have added will be difficult to integrate with the JSF model-view-presenter framework. It would be better to stick to JSF controls. This code shows how you can manipulate client-side field values using JavaScript and a custom TLD function:
<h:dataTable value="#{rowDataBean.data}" var="row">
<h:column>
<f:facet name="header">
<h:outputText value="product" />
</f:facet>
<h:outputText value="#{row.name}" />
</h:column>
<h:column id="column2">
<f:facet name="header">
<h:outputText value="quantity" />
</f:facet>
<h:inputText id="quantityCount" value="#{row.quantity}" />
<h:commandButton value="+"
onclick="increment('#{id:clientId('quantityCount')}'); return false;" />
</h:column>
</h:dataTable>
The invoked JavaScript:
function increment(id) {
//TODO: error handling
var textField = document.getElementById(id);
var value = textField.value;
value++;
textField.value = value;
}
If you are using Facelets instead of JSPs, you will need to define the function in a Facelets tag library.