1
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.

1 Answer 1

3

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).

4
  • Nice idea re: Dynamic Visualforce @sfdcfox! We should sure to check our Internal View state when using nested apex:repeat tags, take a look at this for more information. salesforce.stackexchange.com/questions/4537/… Jul 25, 2013 at 10:35
  • Dynamic Visualforce answers the question of arbitrary depth, but view state is definitely a consideration. Using as little "pure" Visualforce as possible seems to be the mantra here, which is ironic given the fact that we have a rich markup language that is effectively crippled because of the view state.
    – sfdcfox
    Jul 25, 2013 at 13:23
  • 1
    Yes it is ironic, it's probably worth considering at times not including apex:form, i've seen some huge VF pages that use a lot of native tags and get away with it, because they don't use apex:form and hence no viewstate. Jul 26, 2013 at 8:25
  • I may have to warn you about using Dynamic VisualForce when it comes to forms. They do not behave like you would normally expect when encountering errors. Check out one of my questions to see what I mean: salesforce.stackexchange.com/questions/41711/… Oct 1, 2014 at 20:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .