How to implement af:table for Grid Entry screen

Question

Hi, I am using JDevelper 11.1.1.3g.
I have a requirement in which i have to show a dataentry screen in Grid format.Below is my requirement.
I want to make a dataentry screen in Grid format. I want to show a table component which will have many rows and each row will be like an Individual employee record when i save. Each row will have employee name as inputText and Department as LOV and Age as inputText components.
When the user clicks on the SAVE button, i want all the employees the user has added in the row format inside the table should be saved in Employees table as each single employee record.
More over i want to have an option in the screen to give the user flexibility to add more rows in the table at Runtime to add more row. Eg. When the page loads i want initially 10 empty rows to be displayed by default. But when the user clicks on add more rows, 5 more rows should be added at Runtime to this table.
Please Please guide me on how can i achieve this screen functionality.
Any reference would be a great help.
Zeeshan

Answer 1

..................BELOW IS THE SOURCE OF MY JSP PAGE.........................
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" binding="#{backingBeanScope.backing_GridDataEntry.d1}">
<af:messages binding="#{backingBeanScope.backing_GridDataEntry.m1}"
id="m1"/>
<af:form id="f1" binding="#{backingBeanScope.backing_GridDataEntry.f1}">
<af:panelCollection binding="#{backingBeanScope.backing_GridDataEntry.pc1}"
id="pc1">
<f:facet name="menus"/>
<f:facet name="toolbar">
<af:toolbar binding="#{backingBeanScope.backing_GridDataEntry.t2}"
id="t2">
<af:commandToolbarButton actionListener="#{bindings.Delete.execute}"
text="Delete"
disabled="#{!bindings.Delete.enabled}"
binding="#{backingBeanScope.backing_GridDataEntry.delete}"
id="delete" partialTriggers="t1"/>
<af:commandToolbarButton actionListener="#{bindings.Rollback.execute}"
text="Rollback"
disabled="#{!bindings.Rollback.enabled}"
immediate="true"
binding="#{backingBeanScope.backing_GridDataEntry.ctb2}"
id="ctb2">
<af:resetActionListener/>
</af:commandToolbarButton>
<af:commandToolbarButton actionListener="#{bindings.Commit.execute}"
text="Commit"
disabled="#{!bindings.Commit.enabled}"
binding="#{backingBeanScope.backing_GridDataEntry.ctb1}"
id="ctb1"/>
<af:commandToolbarButton actionListener="#{bindings.CreateInsert.execute}"
text="CreateInsert"
disabled="#{!bindings.CreateInsert.enabled}"
binding="#{backingBeanScope.backing_GridDataEntry.createInsert}"
id="createInsert" partialTriggers="t1"/>
</af:toolbar>
</f:facet>
<f:facet name="statusbar"/>
<af:table value="#{bindings.CaseDetlVOUPD1.collectionModel}" var="row"
rows="#{bindings.CaseDetlVOUPD1.rangeSize}"
emptyText="#{bindings.CaseDetlVOUPD1.viewable ? 'No data to display.' : 'Access Denied.'}"
fetchSize="#{bindings.CaseDetlVOUPD1.rangeSize}"
rowBandingInterval="0"
selectedRowKeys="#{bindings.CaseDetlVOUPD1.collectionModel.selectedRow}"
selectionListener="#{bindings.CaseDetlVOUPD1.collectionModel.makeCurrent}"
rowSelection="single"
binding="#{backingBeanScope.backing_GridDataEntry.t1}"
id="t1" editingMode="clickToEdit"
partialTriggers="::delete ::createInsert ::ctb2 ::ctb1">
<af:column sortProperty="CaseNo" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.CaseNo.label}"
id="c4">
<af:inputText value="#{row.bindings.CaseNo.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.CaseNo.label}"
required="#{bindings.CaseDetlVOUPD1.hints.CaseNo.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.CaseNo.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.CaseNo.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.CaseNo.tooltip}"
id="it3">
<f:validator binding="#{row.bindings.CaseNo.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="Name" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.Name.label}"
id="c6">
<af:inputText value="#{row.bindings.Name.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.Name.label}"
required="#{bindings.CaseDetlVOUPD1.hints.Name.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.Name.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.Name.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.Name.tooltip}"
id="it6">
<f:validator binding="#{row.bindings.Name.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="IdType" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.IdType.label}"
id="c7">
<af:inputText value="#{row.bindings.IdType.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.IdType.label}"
required="#{bindings.CaseDetlVOUPD1.hints.IdType.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.IdType.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.IdType.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.IdType.tooltip}"
id="it2">
<f:validator binding="#{row.bindings.IdType.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="IdNo" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.IdNo.label}"
id="c2">
<af:inputText value="#{row.bindings.IdNo.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.IdNo.label}"
required="#{bindings.CaseDetlVOUPD1.hints.IdNo.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.IdNo.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.IdNo.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.IdNo.tooltip}"
id="it1">
<f:validator binding="#{row.bindings.IdNo.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="CourtCdCan" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.CourtCdCan.label}"
id="c3">
<af:inputText value="#{row.bindings.CourtCdCan.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.CourtCdCan.label}"
required="#{bindings.CaseDetlVOUPD1.hints.CourtCdCan.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.CourtCdCan.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.CourtCdCan.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.CourtCdCan.tooltip}"
id="it7">
<f:validator binding="#{row.bindings.CourtCdCan.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="CourtLetterNo" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.CourtLetterNo.label}"
id="c1">
<af:inputText value="#{row.bindings.CourtLetterNo.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.CourtLetterNo.label}"
required="#{bindings.CaseDetlVOUPD1.hints.CourtLetterNo.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.CourtLetterNo.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.CourtLetterNo.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.CourtLetterNo.tooltip}"
id="it4">
<f:validator binding="#{row.bindings.CourtLetterNo.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="SrlNo" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.SrlNo.label}"
id="c5">
<af:inputText value="#{row.bindings.SrlNo.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.SrlNo.label}"
required="#{bindings.CaseDetlVOUPD1.hints.SrlNo.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.SrlNo.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.SrlNo.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.SrlNo.tooltip}"
id="it5">
<f:validator binding="#{row.bindings.SrlNo.validator}"/>
<af:convertNumber groupingUsed="false"
pattern="#{bindings.CaseDetlVOUPD1.hints.SrlNo.format}"/>
</af:inputText>
</af:column>
<af:column sortProperty="UserId" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.UserId.label}"
id="c8">
<af:inputText value="#{row.bindings.UserId.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.UserId.label}"
required="#{bindings.CaseDetlVOUPD1.hints.UserId.mandatory}"
columns="#{bindings.CaseDetlVOUPD1.hints.UserId.displayWidth}"
maximumLength="#{bindings.CaseDetlVOUPD1.hints.UserId.precision}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.UserId.tooltip}"
id="it8">
<f:validator binding="#{row.bindings.UserId.validator}"/>
</af:inputText>
</af:column>
<af:column sortProperty="CreatedDt" sortable="false"
headerText="#{bindings.CaseDetlVOUPD1.hints.CreatedDt.label}"
id="c9">
<af:inputDate value="#{row.bindings.CreatedDt.inputValue}"
label="#{bindings.CaseDetlVOUPD1.hints.CreatedDt.label}"
required="#{bindings.CaseDetlVOUPD1.hints.CreatedDt.mandatory}"
shortDesc="#{bindings.CaseDetlVOUPD1.hints.CreatedDt.tooltip}"
id="id1">
<f:validator binding="#{row.bindings.CreatedDt.validator}"/>
<af:convertDateTime pattern="#{bindings.CaseDetlVOUPD1.hints.CreatedDt.format}"/>
</af:inputDate>
</af:column>
</af:table>
</af:panelCollection>
</af:form>
</af:document>
</f:view>
<!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_GridDataEntry-->
</jsp:root>