Alignment normal data like table structure

Question

Hi,
Actually requirement is need to align table format. I used iterator for pagination,in that not able to adding the columns .please find the below sample code and required structure like table format. please help me regarding on this. Thanks in advance.
<af:iterator id="i1" var="row" value="#{bindings.CatPartiesS1.collectionModel}"
binding="#{backingBeanScope.ListBean.emplsTableIterator}"
rows="3">
<af:spacer width="5" height="10" id="s3416"/>
<af:panelGroupLayout id="pgl439" layout="horizontal">
<af:spacer width="5" height="10" id="s39"/>
<af:panelGroupLayout id="pgl120" inlineStyle="width:120px;" layout="horizontal">
<af:selectBooleanCheckbox text="" id="sbc2431"
inlineStyle="font-weight:bold;"/>
<af:panelGroupLayout id="pgl52" layout="horizontal" inlineStyle="width:120px;">
<af:outputText value="#{row.PurchasingCategory}" id="ot8"/>
</af:panelGroupLayout>
</af:panelGroupLayout>
<af:panelGroupLayout id="pglert120" inlineStyle="width:120px;" layout="horizontal">
<af:spacer width="5" height="10" id="s32912"/>
<af:panelGroupLayout id="pgl66wq49" layout="horizontal" inlineStyle="width:120px;">
<af:outputText value="#{row.MatlQty}" id="ot10"/>
</af:panelGroupLayout>
</af:panelGroupLayout>
<af:spacer width="5" height="10" id="s51"/>
<af:panelGroupLayout id="pgl634" layout="horizontal" inlineStyle="width:120px;">
<af:outputText value="#{row.MatlCost5}" id="ot331"/>
</af:panelGroupLayout>
<af:spacer width="5" height="10" id="s544t1"/>
<af:panelGroupLayout id="pgl1d3s20"
inlineStyle="width:120px;"
layout="horizontal">
<af:outputText value="Current Selection:"
partialTriggers="::i1" id="ot2"/>
<af:outputText value="#{bindings.DataCode3.inputValue}"
id="ot17" partialTriggers="::i1"/>
</af:panelGroupLayout>
<af:spacer width="5" height="10" id="s5123"/>
<af:panelGroupLayout id="pgl12de0" inlineStyle="width:120px;" layout="horizontal">
<af:outputText value="#{row.CatMatlCost}" id="ot41"/>
</af:panelGroupLayout>
<af:spacer width="5" height="10" id="s51213"/>
<af:panelGroupLayout id="pgl2326" layout="horizontal" inlineStyle="width:120px;">
<af:outputText value="#{row.CatMatlPur}" id="ot7"/>
</af:panelGroupLayout>
<af:spacer width="5" height="10" id="s5343"/>
<af:panelGroupLayout id="pgldw2120" inlineStyle="width:120px;" layout="horizontal">
<af:outputText value="Current Selection:" partialTriggers="::i1" id="ot9"/>
<af:outputText value="#{bindings.DataCode2.inputValue}" id="ot171" partialTriggers="::i1"/>
</af:panelGroupLayout>
<af:spacer width="10" height="10" id="s53343"/>
<af:panelGroupLayout id="pgee3l120" inlineStyle="width:120px;" layout="horizontal">
<af:outputText value="#{row.CatMatlPur}" id="ot57"/>
</af:panelGroupLayout>
</af:panelGroupLayout>
</af:iterator>
Thanks
VJ

Answer 1

Hi Frank,
Here i need some clarification.
Actaully i have read some blogs saying that trinidad components are not suggestable to mix with ADF components as their life cycle is different..
can we use same in ADF page?
after adding trinidad, i got some issues like button action is not working on first click like that (anyway we solved those)..So how to resolve these type issues and Is that error is because of trinidad or not?
can you pls clarify me?
and below is my code for ur refererce if required.(This code is having one selectOneChoice with +,- buttons.If user clicks on '+' another selectoneChise and +,- buttons should be added to the PanelGroupLayout .and Used iterator for doing this. )
<af:iterator id="i1" var="dynamicRow"
value="#{viewScope.valuesBean.ccAL}"
varStatus="dynamicIndex">
<af:panelGroupLayout layout="horizontal"
id="colpg_${dynamicIndex.index}"
clientComponent="true">
<af:selectOneChoice value="#{dynamicRow.cntValue}"
immediate="true"
id="soc11_${dynamicIndex.index}"
autoSubmit="true"
contentStyle="width:265px;"
valuePassThru="true"
clientComponent="true"
valueChangeListener="#{backingBeanScope.testSearchBean.valueChangeListenerGeneric}"
disabled="#{viewScope.readOnly.editable['fieldEditable'] eq 'N'}">
<af:forEach var="lov1"
items="#{bindings.purposeLOVIterator.allRowsInRange}">
<f:selectItem id="sei1"
itemLabel="#{lov1.codeShortName}"
itemValue="#{lov1.codeShortName}"/>
</af:forEach>
</af:selectOneChoice>
<af:inputText contentStyle="width:20px;"
id="itcol_${dynamicIndex.index}"
value="#{dynamicRow.qtyValue}"
clientComponent="true" autoSubmit="true"
valueChangeListener="#{backingBeanScope.testSearchBean.valueChangeListenerGeneric}"
immediate="true"
disabled="#{viewScope.readOnly.editable['fieldEditable'] eq 'N'}"/>
<af:spacer width="5" height="10" id="s6" visible="#{viewScope.valuesBean.ccCount eq
dynamicIndex.index+1}" ></af:spacer>
<af:commandButton text="+"
id="cb1_${dynamicIndex.index}" visible="#{viewScope.valuesBean.ccCount eq
dynamicIndex.index+1}" binding="#{backingBeanScope.editBean.addCCBinding}"
clientComponent="true"
styleClass="dynComBtn"
disabled="#{viewScope.readOnly.editable['fieldEditable'] eq 'N'}">
<af:clientAttribute name="tubeName"
value="CollectionTube"/>
<f:attribute name="TestProcessId"
value="#{dynamicRow.cntId}"/>
<af:clientListener method="onAddAction" type="click"/>
<af:serverListener type="MyCustomServerEvent"
method="#{backingBeanScope.editBean.addAL}"/>
</af:commandButton>
<af:spacer width="5" height="10" id="s4" visible="#{dynamicIndex.index >0}"/>
<af:commandButton text="-"
id="cb2_${dynamicIndex.index}"
visible="#{dynamicIndex.index >0}"
clientComponent="true"
styleClass="dynComBtn"
disabled="#{viewScope.readOnly.editable['fieldEditable'] eq 'N'}">
<f:attribute name="removeId" value="#{dynamicRow}"/>
<af:clientAttribute name="tubeName"
value="CollectionTube"/>
<f:attribute name="delIndex"
value="#{dynamicIndex.index}"/>
<af:clientAttribute name="dIndex"
value="#{dynamicIndex.index}"/>
<af:clientListener method="onDelAction" type="click"/>
<af:serverListener type="MyCustomDelEvent"
method="#{backingBeanScope.editBean.delAL}"/>
</af:commandButton>
</af:panelGroupLayout>
<af:spacer width="10" height="5" id="s16"/>
</af:iterator>
Thanks