DataTree or DataTable which one fits the scenario

Question

Hi everyone,
I have to render the below structure::
Category 1
Title1 Category 1 checkbox1 checkbox2 checkbox3......so on till 10
Title2 Category 1 checkbox1 checkbox2 checkbox3......so on till 10
Category 2
Subcategory2.1
tile1 subcategory2.1 checkbox1 checkbox2 checkbox3....10
tile 2subcategory21 checkbox1 checkbox2 checkbox3....10
Subcategory2.2
tile1 subcategory.2.2 checkbox1 checkbox2 checkbox3....10
tile2 subcategory2.2 checkbox1 checkbox2 checkbox3....10
So its a nested tree structure finally. I question is will i be able to use a jsf tree component to achieve something like this.
I have tried using datatable... was successful in getting the hierarchy by using row category.. but there are many issues like wheneven i submit a btn action, the tree structure collapses automatically. The parent node doesnot expand until i click twice on it. .. etc.
I need to implement an ExpandAll & Collapse All feature as well. I am not sure, if it can be done usi ng a data table or java script..
Can someone suggest the correct way to do it...

Answer 1

Hi Balu,
I saw ur code posting.. that scenario doesnot have rowcategoy. Below is my jsf code. can u help me in implementing Expand All/ Collapse All through java script
<hx:dataTableEx border="0" cellpadding="2" cellspacing="0"
                              columnClasses="columnClass1" headerClass="headerClass"
                              footerClass="footerClass" rowClasses="rowClass1, rowClass2"
                              id="tableEx1" styleClass="dataTableEx" value="#{masterPublList.lst_publication}" var="varlst_publication">
                              <hx:columnEx id="columnEx3">
                                   <hx:panelRowCategory id="rowCategory2"
                                        styleClass="panelRowCategory" value="#{varlst_publication.publCategory}" collapsed="false">
                                        <h:outputText id="text6" styleClass="outputText"></h:outputText>
                                   </hx:panelRowCategory>
                                   <f:facet name="header"></f:facet>
                              </hx:columnEx>
                              <hx:columnEx id="columnEx2">
                                   <hx:panelRowCategory id="rowCategory1"
                                        styleClass="panelRowCategory" value="#{varlst_publication.publSubCategory1}">
                                        <h:outputText id="text5" styleClass="outputText"></h:outputText>
                                   </hx:panelRowCategory>
                                   <f:facet name="header"></f:facet>
                              </hx:columnEx>
                              <hx:columnEx id="column1">
                                   <f:facet name="header">
                                        <h:outputText id="text4" styleClass="outputText" value="Title"></h:outputText>
                                   </f:facet>
                                   <h:outputText id="text3" styleClass="outputText" value="#{varlst_publication.publName}"></h:outputText>
                              </hx:columnEx>
                              <hx:columnEx id="columnEx1">
                                   <f:facet name="header">
                                        <h:outputText id="text13" styleClass="outputText"
                                             value="English   German   French"></h:outputText>
                                   </f:facet>
                                   <h:selectManyCheckbox disabledClass="selectManyCheckbox_Disabled"
                                        id="checkbox1" styleClass="selectManyCheckbox" value= "#{varlst_publication.publLang}">
                                        <f:selectItems value= "#{masterPublList.lst_lang}"/>
                                   </h:selectManyCheckbox>
                              </hx:columnEx>
                         </hx:dataTableEx>