[SalesForce] salesforce using repeat tag dynamically

public class product2tree
{


public List<prowrapper> prowrapperlist{get;set;}
Map<ID,product2__c> promap;

public product2tree()
{
prowrapperlist=new List<prowrapper>();
promap=new Map<ID,product2__c>();
for(product2__c pro:[select name,product2__c,(select name,product2__c from product2s__r) from product2__c])
    {
        promap.put(pro.id,pro);
    }
for(ID id:promap.keySet())
    {
        product2__c pro=promap.get(id);
        if(pro.product2__c==null)
            {
              prowrapperlist.add(new prowrapper(pro,promap));
            }
    }
}

 public class prowrapper
{
 public String name{get;set;}
 public List<prowrapper> child{get;set;}
 public boolean isSelected{get;set;}
 Id proid;

 public prowrapper(product2__c pro,Map<ID,product2__c> promap1)
    {
        child=new List<prowrapper>();
        pro=promap1.get(pro.id);
        name=pro.name;
        isSelected=false;
        proid=pro.id;
        for(product2__c pro1:pro.product2s__r)
          {
             child.add(new prowrapper(pro1,promap1));                          
          }

    }

}

now i want to display the prowrapperlist as treeView on visualforce page. The problem is that it is multilevel deep and can be any level deep. so how can anyone tell me how can i show this on visualforce page.

on visualforce page i am using like this

<li>
    {!pro.name}

    <ul>
    <apex:repeat value="{!pro.child}" var="proc">
        <li>
            {!proc.name} 
            <ul>
                <apex:repeat value="{!proc.child}" var="proc1">
                <li>
                    {!proc1.name} 
                    <ul>
                        <apex:repeat value="{!proc1.child}" var="proc2">
                        <li>
                            {!proc2.name} &nbsp;&nbsp;&nbsp;&nbsp;

                            <apex:inputCheckbox value="{!proc2.isSelected}"/>

                        </li>
                          </apex:repeat>
                   </ul>

                </li>
                </apex:repeat>
            </ul>



        </li>
    </apex:repeat>
    </ul>

</li>

means it is completely static. as much time i will use repeat i can show that much level deep tree. but i want it dynamic. means just like for loop. you can use any library i.e. javscript,jquery,angularjs

Thanks in advance.

Best Answer

You have three basic means by which you could construct the page. The first method is to use Dynamic Apex, meaning that the components are rendered by the controller, and then dumped out to the page.

The second option would be to use a self-enclosed component. That would roughly look like:

<apex:component selfClosing="true" controller="MyWrapper">
    <apex:attribute name="data" assignTo="{!listdata}" type="MyWrapper"/>
    {!listdata.name}
    <apex:repeat value="{!listdata.children}" var="data">
        <c:recursiveSelf data="{!data}"/>
    </apex:repeat>
</apex:component>

The controller for this thing would look like:

public class MyWrapper {
    public MyWrapper[] listdata { get; set; }
    public string name { get; set; }
    public MyWrapper[] children { get; set; }
}

You could then populate it by creating a MyWrapper, populating the name and children attributes, and then supplying it from another controller. This is fairly messy, and I would imagine hurtful to the viewstate.

The third method would actually probably be relatively simple: render the elements as a single flat list, then write a jQuery piece (or any other libary, really) to expand the elements based on some input, like a wrapper element that identifies the indentation level, for example. Or you could use CSS to indent up to an arbitrary depth. I believe the CSS for this would be relatively short if you kept yourself in CSS3 (i.e. you don't care if it doesn't look right in older Internet Explorer browsers).

Related Topic