DataTree or DataTable which one fits the scenario
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...
[1263 byte] By [
SRIWPa] at [2007-11-27 0:56:34]
# 1
You can nest datatables. And I recommend you to collapse/expand using JavaScript. This is faster and saves a trip to the server.I ever had written a sample code for this: http://forum.java.sun.com/thread.jspa?forumID=427&threadID=5119514
# 2
Thanks Balu..I will go through the sample code and get back to you in case of queries.. Can you tell me wat would be the problem if need to click twice to expand the parent node when using datatable with row category
SRIWPa at 2007-7-11 23:29:44 >
# 3
Maybe you've implemented someting wrong regarding to valuechangelisteners, the immediate attribute and/or manually skipping the JSF phases. I can't give a suitable answer as I know nothing about the actual code.
# 4
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="EnglishGermanFrench"></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>
SRIWPa at 2007-7-11 23:29:44 >
# 5
You're using IBM JSF components. AFAIK expanding and collapsing those rowCategory components are serverside. I haven't much experience with it tho.Consider redesigning and replacing it by h:dataTable and add the onclicks accordingly.
# 6
i am using RAD7.0 and have only one datatable component.. I think RAD 6.0 had h:datatable...
SRIWPa at 2007-7-11 23:29:44 >
# 7
h:dataTable is just available from Sun JSF RI.<%@taglib uri=" http://java.sun.com/jsf/html" prefix="h"%>
# 8
Hi Balu..
I tried that.. i am confused.. if i have to have my own image as twister and then expand and collapse on click of the image.. i cannot have a rowcategory.. in such case how is the nesting obtained.. sorry for bothering u too much.. Having the row category in place can i achieve Expand All and Collapse All with separate actions out of data table
SRIWPa at 2007-7-11 23:29:44 >
# 9
See the code snippet I have posted in here: http://forum.java.sun.com/thread.jspa?forumID=427&threadID=5119514And this part of my datatable article might be useful: http://balusc.xs4all.nl/srv/dev-jep-dat.html#NestingDatatables
# 10
Hi Balu,
I wanted to check how javascript works with jsf.. so i put a simple hyperlink on the page and onClick wrote a javascript to hide and show the datatable (code given above). But nothing happens.. Here is code i wrote
alert("in the script");
var table = document.getElementById(tableEx1);
alert(table);
table.style.display == 'none' ? table.style.display = 'block' : table.style.display = 'none';
and also in another way
alert("in the script");
var table1 = document.forms['view<%=renderResponse.getNamespace()%>:form1'].elements['view<%=renderResponse.getNamespace()%>:form1:tableEx1'];
alert(table1);
table1.style.display == 'none' ? table1.style.display = 'block' : table1.style.display = 'none';
Shows errors undefined TableEx1 or just undefined in the alert.. and for the second one.. style is null or not an object...
SRIWPa at 2007-7-11 23:29:44 >
# 11
hi,i think the clientId of the table is wrong. Look at your HTML-ClientCode in the Browser to get the right id.Best regardsTom
