Dynamic Table - And Getting the Row values from Repeat control

Can we get the repeat control control's row value?

Dynamically we can get using Client Side Java script in Xpage.

With the use of Repeat control we can create dynamic rows of field.

And We can use a Pager for creating nice UI.

Also we have CSJS functionality for retrieving the values...

Please find the code as below.,

<?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:div style="text-align:center"></xp:div>
<xp:panel id="Panel_All" style="text-align:center">

<xp:pager layout="Previous Group Next" id="pager1" for="repeat1"
panelPosition="top">
</xp:pager>
<xp:repeat id="repeat1" var="test" indexVar="index"
value="#{javascript:parseInt(sessionScope.dynaField)}" rows="8"
style="border:1pt">


<xp:table style="width:100.0%">
<xp:tr>
<xp:td
style="border:1pt;width:32.0%;text-align:center">
<xp:inputText id="inputText1">
<xp:this.defaultValue><![CDATA[#{javascript:return getComponent("repeat1").getValue()}]]></xp:this.defaultValue>
</xp:inputText>
</xp:td>
<xp:td style="border:1pt;text-align:center">
<xp:inputText id="inputText3"></xp:inputText>
</xp:td>
<xp:td style="border:1pt;text-align:center">
<xp:inputText id="inputText4"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:repeat>



<xp:br></xp:br>


<xp:br></xp:br>
<xp:table style="width:100%">
<xp:tr>
<xp:td rendered="false">
Number of Field You have added :
</xp:td>
<xp:td style="display:none">
<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:button value="Get the Repeat Control Value" id="button4" style="width:200.0px">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[try
{
var row=window.prompt("Please Enter the Number of Row");
row=row-1
var id1="view:_id1:repeat1:"+row.toString()+":inputText1"
var id2="view:_id1:repeat1:"+row.toString()+":inputText3"
var id3="view:_id1:repeat1:"+row.toString()+":inputText4"
var val=document.getElementById(id1).value.toString() +", "+document.getElementById(id2).value+", "+document.getElementById(id3).value
alert(val)
}
catch(e)
{
window.prompt("Please Enter the Valid Column")
}]]></xp:this.script>
</xp:eventHandler>
</xp:button></xp:panel>
<xp:eventHandler event="onClientLoad" submit="true"
refreshMode="norefresh"></xp:eventHandler>
</xp:view>