Nested repeat controls in XPages - xpages

Question

I have a situation where I have a set of nested repeat controls. What I would like to do is be able to refresh only selected parts of the repeat controls after dismissing a dialog box. I can specify the element to be refreshed as a parameter in the hide method of a dialog box like so:
dialog1.hide("repeat1");
where dialog1 is the component name of the dialog box and repeat1 is the component name of the repeat control to be refreshed.
If I refresh the top level, then all subordinate levels are refreshed. If I refresh the second level then only the first occurrence of the level 2 repeat control is refreshed. Likewise, if I refresh the third level, then only the first occurrence of the third level is refreshed.
There seems to be no obvious way to refresh, say, only the second level repeat controls or the third level repeat controls. Does anyone understand this behavior?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:br></xp:br>
<xp:panel id="panel1">
<xp:button value="Label" id="button3">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="dialog1">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:text escape="true" id="computedField4" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:repeat id="repeat1" rows="30" var="rowdata" style="border:1px solid red"
repeatControls="true" removeRepeat="true">
<xp:this.value><![CDATA[#{javascript:[1, 2, 3]}]]></xp:this.value>
<xp:text escape="true" id="computedField1" value="#{javascript:rowdata}">
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
</xp:text>
 - 
<xp:text escape="true" id="computedField7" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:br></xp:br>
<xp:repeat id="repeat2" rows="30" var="rowdata"
style="margin:1em; border:1px solid green" repeatControls="true"
removeRepeat="true">
<xp:this.value><![CDATA[#{javascript:["a", "b", "c"]}]]></xp:this.value>
<xp:text escape="true" id="computedField2" value="#{javascript:rowdata}">
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
</xp:text>
 - 
<xp:text escape="true" id="computedField5" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:br></xp:br>
<xp:repeat id="repeat3" rows="30" var="rowdata"
style="margin:1em; border:1px solid orange" repeatControls="true"
removeRepeat="true">
<xp:this.value><![CDATA[#{javascript:[1, 2, 3]}]]></xp:this.value>
<xp:text escape="true" id="computedField3" value="#{javascript:rowdata}">
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
</xp:text>
 - 
<xp:text escape="true" id="computedField6" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:br></xp:br>
</xp:repeat>
</xp:repeat>
</xp:repeat>
</xp:panel>
<xe:dialog id="dialog1" title="Dialog box">
<xp:panel>
<xe:dialogButtonBar id="dialogButtonBar1">
<xp:panel>
<xp:button value="OK - Refresh repeat1" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide("repeat1")}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="OK - Refresh repeat2" id="button4">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide("repeat2")}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="OK - Refresh repeat3" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide("repeat3")}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xe:dialogButtonBar>
</xp:panel>
</xe:dialog>
</xp:view>

Answer 1

Have you considered to put a panel (or eventually a custom control) inside the repeats and instead of targeting the repeat, target the panel. There are a number of examples that can help you there:
Trigger a server event handler from the client
Call refresh from another component
Refresh more than one target ID
Enventually inside your repeats you might want to add the local id (the generated one) to a local JS object, so you have full control. Let us know how it goes.