Dynamic Table creation Xpages

In Xpage is a very powerful and efficient tool.

Here we can use ajax directly[Manually] not in code.

I tried to make a Dynamic rows today,

I thought it is difficult to get the item value for that dynamic rows,

But we can easily fetch and we can easily retrieve the value for those dynamic fields.

I used a repeat control., This is very powerful component in Xpage,

Here we can iterate the value of the repeat control use of single line code.


Code:-


<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.beforePageLoad><![CDATA[#{javascript:sessionScope.dynaField=parseInt("1")}]]></xp:this.beforePageLoad><xp:div style="text-align:center">
<xp:span style="font-weight:bold;color:rgb(0,0,255);font-size:16pt">Ramkumar's Dynamic Row Generation</xp:span>
</xp:div><xp:panel id="Panel_All">
<xp:repeat id="repeat1" rows="30"
value="#{javascript:parseInt(sessionScope.dynaField)}">

<xp:table>
<xp:tr>
<xp:td style="border:1pt">
<xp:inputText id="inputText1"></xp:inputText>
</xp:td><xp:td style="border:1pt">
<xp:inputText id="inputText3"></xp:inputText>
</xp:td>
<xp:td style="border:1pt">
<xp:inputText id="inputText4"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:repeat>

<xp:pager layout="Previous Group Next" id="pager1"
for="repeat1">
</xp:pager>

<xp:br></xp:br>

<xp:table>
<xp:tr>
<xp:td>Number of Field You have added :</xp:td>
<xp:td>
<xp:inputText id="inputText2"></xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td colspan="2" style="text-align:center">
<xp:button value="ADD FIELD" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="Panel_All">
<xp:this.action><![CDATA[#{javascript:sessionScope.dynaField=parseInt(sessionScope.dynaField)+1
getComponent("repeat1").setValue(parseInt(sessionScope.dynaField));
getComponent("inputText2").setValue(parseInt(sessionScope.dynaField));}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="REMOVE FIELD" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="Panel_All">
<xp:this.action><![CDATA[#{javascript:sessionScope.dynaField=parseInt(sessionScope.dynaField)-1
getComponent("repeat1").setValue(parseInt(sessionScope.dynaField));
getComponent("inputText2").setValue(parseInt(sessionScope.dynaField));}]]></xp:this.action>
<xp:this.script><![CDATA[var t=document.getElementById("#{id:inputText2}").value;
if(t==0 || t=="0")
{
alert("You can not do this opertion");
return false;
}]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:td>

</xp:tr>
</xp:table>
<xp:br></xp:br>
</xp:panel>
<xp:eventHandler event="onClientLoad" submit="true"
refreshMode="norefresh"></xp:eventHandler>
</xp:view>