nested repeater problem with custom component

[rkoe123]

Hi there,
I am really stuck with this issue and any help from you guys will be greatly appreciated.
To start I have a simple external nested xml file for the data : "book.xml"
<?xml version="1.0" encoding="UTF-8"?>
<book>
<section>
<sectionnumber>s1</sectionnumber>
<chapter>
<chapternumber>c1</chapternumber>
</chapter>
<chapter>
<chapternumber>c2</chapternumber>
</chapter>
</section>
<section>
<sectionnumber>s2</sectionnumber>
<chapter>
<chapternumber>c3</chapternumber>
</chapter>
</section>
</book>

I also have a main app(NestedRepeater.mxml) with a repeater control which contains a custom mxml component(Section.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="component.*" layout="absolute">
<mx:XML id="data" source="data/book.xml" />
<mx:VBox>
<mx:Repeater id="Repeater1" dataProvider="{data.section}">
<comps:Section sectionNumber="{Repeater1.currentItem.sectionnumber}" />
</mx:Repeater>
</mx:VBox>
</mx:Application>

And in my custom component(Section.mxml), I have another repeater which I want it for the chapter of each section as a <mx:state> for the user to be able to show/hide the chapters of each section.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var sectionNumber:String;
]]>
</mx:Script>
<mx:XML id="data" source="../data/book.xml" />
<mx:VBox>
<mx:Panel id="panel1" layout="absolute" title="Section">
<mx:VBox>
<mx:Label text="{this.sectionNumber}"/>
<mx:Button id="btnArticles" label="Show Chapters" click="this.currentState='Chapter'"/>
</mx:VBox>
</mx:Panel>
</mx:VBox>
<mx:states>
<mx:State name="Chapter">
<mx:AddChild relativeTo="{panel1}" position="after">
<mx:VBox>
<mx:Repeater id="Repeater2" dataProvider="{data.section.chapter}">
<mx:Panel layout="absolute" title="Chapter">
<mx:Label text="{Repeater2.currentItem.chapternumber}" />
</mx:Panel>
</mx:Repeater>
</mx:VBox>
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Canvas>

So the problem I am having is the relationship of each chapter to its parent section, when I run the application, the output is:
s1
c1
c2
c3
s2
c1
c2
c3

The correct output I want based on the xml data provider should be and not displaying all chapters for each section:
s1
c1
c2
s2
c3

If anyone can have any suggestion, would be greatl appreciated.
Thanks

[geeta219]

Hi
As per i am thinking you can do like this,
make actionscript class related to section node
having fields like, -sectionnumber,Array of chapternumbers.
then in first reapeter(NestedRepeater.mxml) u can take dataprovider as collection of these section objects.
then repeat through this and pass one by one section object in ur custom component(section.mxml)
then in ur second repeater u can loop through Array of chapter numbers of section object. and get related chapters of particular section.

code:

in creationCompete() method of NestedRepeater.mxml.
{
var sectionArray:Array;
for each(var i:xml in data.section){
var s:sectionDetails=new ..
s.sectionNumber=int(i.sectionNumber);
for each(var j:XML in i.chapter){
s.chapters.push(String(j..chapterNumber));
}
sectionArray.push(s);
}
sectionList=new ArrayCollection(sectionArray);
}

}


first Repeater:

<mx:Repeater id="Repeater1" dataProvider="{sectionList}">
<comps:Section sectionObj="{Repeater1.currentItem}" />
</mx:Repeater>

second Repeater:

<mx:Repeater id="Repeater2" dataProvider="{sectionObj.chapters}">
<mx:Panel layout="absolute" title="Chapter">
<mx:Label text="{Repeater2.currentItem}" />
</mx:Panel>
</mx:Repeater>



You can try this. i think it should run properly.
Thanks,

[geeta219]

Hi
As per i am thinking you can do like this,
make actionscript class related to section node
having fields like, -sectionnumber,Array of chapternumbers.
then in first reapeter(NestedRepeater.mxml) u can take dataprovider as collection of these section objects.
then repeat through this and pass one by one section object in ur custom component(section.mxml)
then in ur second repeater u can loop through Array of chapter numbers of section object. and get related chapters of particular section.

code:

in creationCompete() method of NestedRepeater.mxml.
{
var sectionArray:Array;
for each(var i:xml in data.section){
var s:sectionDetails=new ..
s.sectionNumber=int(i.sectionNumber);
for each(var j:XML in i.chapter){
s.chapters.push(String(j..chapterNumber));
}
sectionArray.push(s);
}
sectionList=new ArrayCollection(sectionArray);
}

}


first Repeater:

<mx:Repeater id="Repeater1" dataProvider="{sectionList}">
<comps:Section sectionObj="{Repeater1.currentItem}" />
</mx:Repeater>

second Repeater:

<mx:Repeater id="Repeater2" dataProvider="{sectionObj.chapters}">
<mx:Panel layout="absolute" title="Chapter">
<mx:Label text="{Repeater2.currentItem}" />
</mx:Panel>
</mx:Repeater>



You can try this. i think it should run properly.
Thanks,

[shubs6]

Replace your second repeater code with this piece of code in the Section.mxml. I think it should work.
U see when u have nested repeaters, the second one is treated as an array of objects for the first one. So u need to specify the exact item that you are looking for...

<mx:Repeater id="Repeater2" dataProvider="{data.section.chapter}" currentIndex=Repeater1.currentIndex count=1>

Do let us know whether it worked...