Adding dynamic column using trinidad by clicking on a link in JSF 1.2 - jsf

<trh:tableLayout width="25%" borderWidth="3" cellSpacing="5"
halign="center" >
<h:commandLink action="#{dataBean.setInitial}" value="ShowView">
</h:commandLink>
<trh:rowLayout shortDesc="head">
<tr:panelHeader size="4" text="Id" />
<tr:forEach var="row" begin="0" end="#{dataBean.size}" items="#{dataBean.dataList}">
<tr:outputText value="#{row.id}" rendered="#{row.editable}"/>
</tr:forEach>
</trh:rowLayout>
<trh:rowLayout>
<tr:panelHeader size="4" text="Name" />
<tr:forEach var="row" begin="0" end="#{dataBean.size}" items="#{dataBean.dataList}">
<tr:outputText value="#{row.text}" rendered="#{row.editable}" />
</tr:forEach>
</trh:rowLayout>
</trh:tableLayout>
I am using trh tags in trinidad to display row wise data ..
and output is like...
Show View
ID 2 1
Name raj Narendra
I want to add a dynamic column in row wise by clicking on link show view..If i click back on show view it should hide that column...Please suggest me how to add rendered attribute and where it should be..

Why don't you use
Something like this:
<tr:commandLink action="#{dataBean.setInitial}" value="ShowView" id="showHideLink"/>
<tr:table value="#{dataBean.dataList}" var="row" id="itemTable" partialTrigger="showHideLink">
<tr:column rendered="#{row.column1Visible}" id="itemCol">
<tr:outputText value="#{row.text1}"/>
</tr:column>
<tr:column rendered="#{row.column2Visible}" id="itemCol">
<tr:outputText value="#{row.text2}"/>
</tr:column>
</tr:table>
In order to get the table to refresh when you click the link, set the partialTrigger property of the table to the id of the button.
To control the visibility of the columns you'll need to use the objects in the dataList.
For example, you could have the fields column1Visible and column2Visible in those objects (with public getters and setters).

Related

Primefaces Diagram - Generating IDs for DOM Elements

I'm trying to create a <p:diagram> with elements which contain input fields, but the problem is that for each added element, the name and ID are the same for each input field.
What I've tried to do to give each field a unique id is adding a bean-generated ID for each element, but this just gets omitted in the final code. Here's my EL/xhtml:
<p:diagram value="#{Controller.model}" style="height:600px;width:1500px" styleClass="ui-widget-content" var="lrvEl" scrollable="true">
<f:facet name="element">
<div onmouseleave="nodeOnMouseOut(this)" onclick="nodeOnClick(this)">
<h:outputText value="#{lrvEl.title}" style="display:block;margin-top:1em;width:100%;height:10px;padding-left:4px"/>
<h:outputText value="#{lrvEl.description}" style="display:block;margin-top:1em;width:100%;height:10px;padding-left:4px"/>
<h:inputText id="inputEpValue_#{lrvEl.id}" name="inputEpValue_#{lrvEl.id}" onchange="setScoreVal('#{lrvEl.id}', this)" rendered="#{lrvEl.isScore()}" style="display:block;margin-top:1em;height:10px;padding-left:4px">
</h:inputText>
</div>
</f:facet>
<p:ajax event="connect" listener="#{Controller.onConnect}" />
<p:ajax event="disconnect" listener="#{Controller.onDisconnect}" />
<p:ajax event="connectionChange" listener="#{Controller.onConnectionChange}" />
</p:diagram>
The important bit here is the <h:inputText id='inputEpValue_#{lrvEl.id}' ... > - this comes out on the page as the following:
editor:LRVContent:overlayForm_lm:inputEpValue
as if the value wasn't set, however, as you can see in the onchange field I use the same constellation. This gets rendered as onchange="setScoreVal('ep:2', this)" so that works.
Can I not dynamically set IDs for elements in this fashion? Is there another way?
Edit:
The actual Reason I want to do this is that, if I have more than one input with the same generated ID, the focus(/cursor) will automatically jump into the last generated input field when I click on any one of them, meaning I won't be able to actually change the value of any of those fields.

JSF - rich:tabPanel - A backing bean property is called for each tab and not for the active one only

I have 15 tabs containing a similar table, so I have only one backing bean collection of items defining my table. When the tab changes, the collection changes accordingly. So, when the tab is rendered, I am expecting the get method of my collection to be called only once, for my active tab because on screen and in the DOM this tab is the only one with a table. BUT, the get method of my collection is called 15 times, which I guess is because I have 15 tabs.
How do you explain that ? Here is my code.
<rich:tabPanel activeItem="#{myBean.selectedTab}" itemChangeListener="#{myBean.changeItems}" >
<c:forEach items="#{myBean.tabs}" var="t">
<rich:tab id="tab_#{t.code}" header="#{t.libelle}" name="#{t.code}" >
<!-- ############ HEADER ############ -->
<rich:dataTable id="tableHeader_#{t.code}">
<f:facet name="header">
<rich:columnGroup>
<!-- Some columns. Let's say that I have a button like a sort
with a render attribute set to "tab_#{t.code}"
Then all will be correctly rendered but
the get of my collection would have been called 15 times -->
</rich:columnGroup>
</f:facet>
</rich:dataTable>
<!-- ############ DATA ############ -->
<rich:dataTable id="tableData_#{t.code}" value="#{myBean.collectionOfItems}" var="i">
<!-- Some columns -->
</rich:dataTable>
</rich:tab>
</c:forEach>
</rich:tabPanel>
Thank you in advance !
The generation called 15 because the tab captions should be generated (header facets). But if you want to do something #{myBean.selectedTab} specific check this out (or something like that ):
<c:forEach items="#{myBean.tabs}" var="t">
<c:if test="#{t.equals( myBean.selectedTab )}" >
...
</c:if>

Filter boolean values in primefaces datatable

I have a Primefaces datatable in a web application. One column contains a boolean (represented as selectBooleanCheckbox). Now I'd like to filter the table with this column. When I add the filterBy and filterMatchMode attributes the filtering header appears, but I have to filter using true or false.
This is the definition of the column:
<p:column headerText="A Bool" sortBy="someBool" width="20"
filterBy="someBool" filterMatchMode="exact">
<h:selectBooleanCheckbox value="#{row.someBool}" disabled="true" />
</p:column>
The display of the column with a checkbox is correct. Only the header is displayed as a text field.
I'm using Primefaces 4. How can I get a check box in the header to filter the data?
From Primefaces 4.0 User Guider, page 141:
If you’d like to use a dropdown instead of an input field to only allow
predefined filter values use filterOptions attribute and a collection/array of selectitems as value
This way you could filter by selecting true or false on the list. But you want a checkbox on the header, you could try this (also from the user guide, page 142):
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" />
</p:outputPanel>
</facet>
I hope this can help you go in the right direction.

How to drag selected item of p:selectOneListBox and drop into p:inputTextarea?

Here is my code:
<p:selectOneListbox id="columnName"
widgetVar="columnName"
value="#{dataTransformBean.column}">
<f:selectItems id="itemDrop"
value="#{dataTransformBean.columnList}"
var="item" itemValue="#{item}" />
<p:ajax update="textarea" />
</p:selectOneListbox>
<p:inputTextarea id="textarea" rows="6" cols="33" />
<p:selectOneListbox id="function"
widgetVar="function"
value="#{dataTransformBean.function}">
<f:selectItems value="#{dataTransformBean.functionValNames}" />
</p:selectOneListbox>
<p:draggable for="columnName" revert="true" helper="clone"></p:draggable>
I want to drag only selected item of <p:selectOneListBox> in <p:inputTextarea> for which for="id" which drags whole list box..How can I drag only selected item from list.
There is a "Drag & Drop - Custom" example in the showcase
http://www.primefaces.org/showcase/ui/dnd/custom.xhtml
In this example, it defines the class ".ui-treenode-leaf" to be draggable and class ".ui-datatable .droppoint" to be droppable.
(I guess) In the case of p:selectOneListBox, you can try to define "ui-selectlistbox-item ui-corner-all ui-state-highlight" as draggable. So only the selected (highlight'ed) selectlistbox item will be draggable. Of course you should also define p:inputTextarea as your droppable and create p:remoteCommands with necessary action listeners in the bean.

Jsf - dataTable data doesn't refresh on the client side

I have an ice:dataTable like this.
<ice:dataTable id="pdet"
value="#{outerBean.nestedClassList}"
var="nestedObject" rendered="true">
<ice:column>
<f:facet name="header">Order Number</f:facet>
<ice:outputText value="#{nestedObject.orderNumber}" />
</ice:column>
<ice:column>
<f:facet name="header">Qty</f:facet>
<ice:inputText value="#{nestedObject.qty}"
id="qty"
label="'Qty' FOR 'Order Number':#{nestedObject.orderNumber} "
partialSubmit="true"
valueChangeListener="#{nestedObject.qtyChanged}"
validator="#{nestedObject.validateQty}">
</ice:inputText>
</ice:column>
</ice:dataTable>
There is a drop down list, depend on the selected value, I want to populate the particular data set. Always there is a value for qty and that should be allowed to change the value. For an instance, without changing that qty ice:inputText, if I change the selected value from the drop down list, a new data set will populate, but from the client side, it shows the previous values for the qty. But bean keeps the real value. If I use a ice:outputText for the qty field, then it shows the exact value. How do I prevent this? What I'm missing?
Thanks.

Resources