Start Free TrialLog in
Avatar of nagabhy
nagabhyFlag for United States of America

asked on 

How to display JSF Inline Table to Display Detail Data in a Master Table with option selecting Check box

Hi,
I am looking for solution to display inline table for eash row in my master DataTable using JSF tags. is there any possible solurtion to implememt with JSF tags like <h:dataTable or is there any customtag tag implementation available for this solution.  Please forward me useful information.
Thanks in Adavance

nagabhy
Editors IDEsJava EE
Avatar of undefined
Last Comment
nagabhy
Avatar of bpmurray
bpmurray
Flag of Ireland image
You can have a datatable inside a datatable if you want - have you tried this?
Avatar of nagabhy
nagabhy
Flag of United States of America image

ASKER

Thanks for your comment.

Here my problem is to show the child data tabe table when click on '+' sign front and when I click on '-' child table will hide. I am looking solution to similer like how ADF faces implennents the <adf:table in my IBM faces. here is the link to refer in ADF Faces

http://download-west.oracle.com/docs/html/B25947_01/web_masterdetail006.htm

Thanks,
nagabhy
Avatar of bpmurray
bpmurray
Flag of Ireland image
OK, if you're using the IBM components, there are a couple of possible solutions, depending on how you want it to behave:

1. You could have a collapsible section where the master information is the title, and expanding this shows the details. This would involve sending all the master and all the detail data at once.
2. You could have a link associated with a RowAction, so that clicking it causes the detail information to be sent back to the server, which then sends an update with the detail information.

Of course these can be further complicated with different layers of AJAX behaviours. And this is only possible if you're using RAD/RWD v7.
Avatar of nagabhy
nagabhy
Flag of United States of America image

ASKER

Thanks again bpmurray!!
I am using RADv.7 as my workspace Could you please elobrate how to achive this. Actually I am new to JSF technology and doing my first project.  I am retriving the contents of master and child tables at once in my backend bean.  Just I need to display according this format and also make available delete/edit operations to all the tasks and their respective subtasks..
I appreciate your help and Time..

Thanks.
-nagabhy
Avatar of bpmurray
bpmurray
Flag of Ireland image
Try something like this .....
<hx:dataTableEx border="0" cellpadding="2" cellspacing="0"
         columnClasses="columnClass1" headerClass="headerClass"
         footerClass="footerClass" rowClasses="rowClass1, rowClass2"
         id="tableEx1" styleClass="dataTableEx" value="#{customers}" var="varcustomers">
         <hx:columnEx id="columnEx1">
            <f:facet name="header">
               <h:outputText id="text1" styleClass="outputText" value="Name"></h:outputText>
            </f:facet>
            <hx:panelSection id="section1" styleClass="panelSection">
               <f:facet name="closed">
                  <hx:jspPanel id="jspPanel2">
                     <h:outputText id="text3" styleClass="outputText"
                        value="#{varcustomers.name}"></h:outputText>
                  </hx:jspPanel>
               </f:facet>
               <f:facet name="opened">
                  <hx:jspPanel id="jspPanel1">
                     <table>
                        <tbody>
                           <tr>
                              <td align="left">Name</td>
                              <td style="width:5px">&nbsp;</td>
                              <td><h:outputText id="textName1"
                                 value="#{varcustomers.name}" styleClass="outputText">
                              </h:outputText></td>
                           </tr>
                           <tr>
                              <td align="left">Address</td>
                              <td style="width:5px">&nbsp;</td>
                              <td><h:outputText id="textAddr"
                                 value="#{varcustomers.address}" styleClass="outputText">
                              </h:outputText></td>
                           </tr>
                           <tr>
                              <td align="left">Description</td>
                              <td style="width:5px">&nbsp;</td>
                              <td><h:outputText id="textDescription1"
                                 value="#{varcustomers.description}" styleClass="outputText">
                              </h:outputText></td>
                           </tr>
                        </tbody>
                     </table>
                  </hx:jspPanel>
               </f:facet>
            </hx:panelSection>
         </hx:columnEx>
      </hx:dataTableEx>

Open in new window

Avatar of nagabhy
nagabhy
Flag of United States of America image

ASKER

I appericiate your solution bpMurry!

Actually your solution helped me to think about my requirents. Finally I succeeded on my way, I have taken <hx:dataIterator to iterate  my listData and took two <hx:panelSection with closed or opend.

on panelSection close I display only masterDataRecord and on open I display two rows one with masterDataRecord and ChildDataTable(<hx:dataTableEX).  This solution will help who look req like me.  I still have small piece left that is how to add  '+' and '-' and odd/even colors . do you  have any Idea?

Thanks,
-nagabhy
Samba
<hx:dataIterator value="#{mBeean.TaskList}"
	var="varTask2">
	<hx:panelSection>
		<f:facet name="closed">
			<h:panelGrid id="webTaskClosed" columns="8" >
			<h:outputText id="texttaskId1" value="#{varTask2.taskId}"
								styleClass="outputText" style="height: 20px; width: 100px">
			</h:outputText>
			<h:outputText id="textTaskName1" value="#{varTask2.taskName}"
				styleClass="outputText" style="height: 20px; width: 200px">
			</h:outputText>
			<h:outputText id="textStartDt1" value="#{varTask2.startdate}"
				styleClass="outputText" style="height: 20px; width: 100px">
			</h:outputText>
			<h:outputText id="textDueDt1" value="#{varTask2.dueDate}"
				styleClass="outputText" style="height: 20px; width: 100px">
			</h:outputText>
			<hx:requestLink id="linkActiontask" styleClass="requestLink">
				<h:outputText id="text25" styleClass="outputText" value="Action" style="height: 20px; width: 100px"></h:outputText>
			</hx:requestLink>
			
			</h:panelGrid>
		</f:facet>
		<f:facet name="opened">
			<h:panelGrid id="panelGridOpenMain" columns="1">
				<h:panelGrid id="sub1" columns="8" width="100%">
					<h:outputText id="texttaskId12" value="#{varTask2.taskId}"
										styleClass="outputText" style="height: 20px; width: 100px">
					</h:outputText>
					<h:outputText id="textTaskName12" value="#{varTask2.taskName}"
						styleClass="outputText" style="height: 20px; width: 200px">
					</h:outputText>
					<h:outputText id="textStartDt12" value="#{varTask2.startdate}"
						styleClass="outputText" style="height: 20px; width: 100px">
					</h:outputText>
					<h:outputText id="textDueDt12" value="#{varTask2.dueDate}"
						styleClass="outputText" style="height: 20px; width: 100px">
					</h:outputText>
					<hx:requestLink id="linkActiontask2" styleClass="requestLink">
						<h:outputText id="text22" styleClass="outputText" value="Action" style="height: 20px; width: 100px"></h:outputText>
					</hx:requestLink>
				
				</h:panelGrid>
				<h:panelGrid id="sub2" columns="1">
					<hx:dataTableEx id="childTaskDataTable" value="#{varTask2.recurList}" var="taskRecur" border="0" cellpadding="0">
						<hx:columnEx id="columExChild1">
							<f:facet name="header" >
								<h:outputText styleClass="outputText" value="Start Date"
									id="text41" style="height: 20px; width: 100px"></h:outputText>
							
							</f:facet>
							<h:outputText id="textStartDt" value="#{taskRecur.startDate}"
								styleClass="outputText">
							</h:outputText>
						</hx:columnEx>
						<hx:columnEx id="columExChild2">
							<f:facet name="header">
								<h:outputText styleClass="outputText" value="Due date"
									id="text42" style="height: 20px; width: 100px"></h:outputText>
							</f:facet>
							<h:outputText id="textDueDt" value="#{taskRecur.dueDate}"
								styleClass="outputText">
							</h:outputText>
						</hx:columnEx>
						<hx:columnEx id="columExChild6">
							<f:facet name="header">
								<h:outputText styleClass="outputText" value="Action"
									id="text46" style="height: 20px; width: 100px"></h:outputText>
							</f:facet>
							<hx:requestLink id="linkActiontask2" styleClass="requestLink">
								<h:outputText id="text462" styleClass="outputText" value="Edit" style="height: 20px; width: 100px"></h:outputText>
							</hx:requestLink>
						</hx:columnEx>
					</hx:dataTableEx>
				</h:panelGrid>
			</h:panelGrid>
		</f:facet>
	</hx:panelSection>
</hx:dataIterator>

Open in new window

Avatar of bpmurray
bpmurray
Flag of Ireland image
To add styles, all you need is to add a list of styles to the component, and it'll display them in order - if you give two, it'll display style 1 for one row, style 2 for the next and then cycle back to style 1 for the next row, etc.

The "+" and "-" can be the graphics used for the twistie - I can't remember exactly how to do that for the panelsection, but they can be styled too.
Avatar of nagabhy
nagabhy
Flag of United States of America image

ASKER

<hx:dataIterator doesn't have rowClasses attribute like <hx:dataTableEX to alter the row styles. I will have to look for solution. Pls refer this link
http://publib.boulder.ibm.com/infocenter/iadthelp/v7r0/index.jsp?topic=/com.ibm.etools.jsf.doc/topics/rjsffacet.html

Thanks,
-nagabhy
Avatar of bpmurray
bpmurray
Flag of Ireland image
Below is a little tweak: look at the components tagged with id="IMAGExxx" for an example of how to create the "+" and "-".  Alternating the styles might be achievable by calling "getRowindex() % 2" on your UIData.
hx:dataIterator value="#{mBeean.TaskList}"
   var="varTask2">
   <hx:panelSection>
      <f:facet name="closed">
         <h:panelGrid id="webTaskClosed" columns="8" >
 	 <hx:graphicImageEx styleClass="graphicImageEx" id="IMAGEClosed" 
                  value="img/twistie_closed.gif" align="middle"></hx:graphicImageEx>
         <h:outputText id="texttaskId1" value="#{varTask2.taskId}"
                        styleClass="outputText" style="height: 20px; width: 100px">
         </h:outputText>
         <h:outputText id="textTaskName1" value="#{varTask2.taskName}"
            styleClass="outputText" style="height: 20px; width: 200px">
         </h:outputText>
         <h:outputText id="textStartDt1" value="#{varTask2.startdate}"
            styleClass="outputText" style="height: 20px; width: 100px">
         </h:outputText>
         <h:outputText id="textDueDt1" value="#{varTask2.dueDate}"
            styleClass="outputText" style="height: 20px; width: 100px">
         </h:outputText>
         <hx:requestLink id="linkActiontask" styleClass="requestLink">
            <h:outputText id="text25" styleClass="outputText" value="Action" style="height: 20px; width: 100px"></h:outputText>
         </hx:requestLink>
         
         </h:panelGrid>
      </f:facet>
      <f:facet name="opened">
         <h:panelGrid id="panelGridOpenMain" columns="1">
            <h:panelGrid id="sub1" columns="8" width="100%">
 	       <hx:graphicImageEx styleClass="graphicImageEx" id="IMAGEOpen" 
                        value="img/twistie_open.gif" align="middle"></hx:graphicImageEx>
               <h:outputText id="texttaskId12" value="#{varTask2.taskId}"
                              styleClass="outputText" style="height: 20px; width: 100px">
               </h:outputText>
               <h:outputText id="textTaskName12" value="#{varTask2.taskName}"
                  styleClass="outputText" style="height: 20px; width: 200px">
               </h:outputText>
               <h:outputText id="textStartDt12" value="#{varTask2.startdate}"
                  styleClass="outputText" style="height: 20px; width: 100px">
               </h:outputText>
               <h:outputText id="textDueDt12" value="#{varTask2.dueDate}"
                  styleClass="outputText" style="height: 20px; width: 100px">
               </h:outputText>
               <hx:requestLink id="linkActiontask2" styleClass="requestLink">
                  <h:outputText id="text22" styleClass="outputText" value="Action" style="height: 20px; width: 100px"></h:outputText>
               </hx:requestLink>
            
            </h:panelGrid>
            <h:panelGrid id="sub2" columns="1">
               <hx:dataTableEx id="childTaskDataTable" value="#{varTask2.recurList}" var="taskRecur" border="0" cellpadding="0">
                  <hx:columnEx id="columExChild1">
                     <f:facet name="header" >
                        <h:outputText styleClass="outputText" value="Start Date"
                           id="text41" style="height: 20px; width: 100px"></h:outputText>
                     
                     </f:facet>
                     <h:outputText id="textStartDt" value="#{taskRecur.startDate}"
                        styleClass="outputText">
                     </h:outputText>
                  </hx:columnEx>
                  <hx:columnEx id="columExChild2">
                     <f:facet name="header">
                        <h:outputText styleClass="outputText" value="Due date"
                           id="text42" style="height: 20px; width: 100px"></h:outputText>
                     </f:facet>
                     <h:outputText id="textDueDt" value="#{taskRecur.dueDate}"
                        styleClass="outputText">
                     </h:outputText>
                  </hx:columnEx>
                  <hx:columnEx id="columExChild6">
                     <f:facet name="header">
                        <h:outputText styleClass="outputText" value="Action"
                           id="text46" style="height: 20px; width: 100px"></h:outputText>
                     </f:facet>
                     <hx:requestLink id="linkActiontask2" styleClass="requestLink">
                        <h:outputText id="text462" styleClass="outputText" value="Edit" style="height: 20px; width: 100px"></h:outputText>
                     </hx:requestLink>
                  </hx:columnEx>
               </hx:dataTableEx>
            </h:panelGrid>
         </h:panelGrid>
      </f:facet>
   </hx:panelSection>
</hx:dataIterator>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of bpmurray
bpmurray
Flag of Ireland image
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of nagabhy
nagabhy
Flag of United States of America image

ASKER

Done, Thanks  bpmurray!
Editors IDEs
Editors IDEs

Development in most programming languages is frequently done with an editor or integrated development environment (IDE). An IDE is a software application that provide comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger. XCode, Visual Studio, Adobe Dreamweaver and Eclipse are some of the more popular development tools, but an editor or IDE can be anything from simple text editors to sophisticated programs. Related topics: All programming and development language, database and web based content management systems topics

25K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts

  • "Invaluable tool for our organization"

    Josh Regalski

  • "Your help has saved me hundreds of hours of internet surfing."

    @fblack61

  • "Just a dang good service!"

    @golferski

  • "Worth every penny."

    Steve Hougom

  • "It’s been a life saver."

    Maria Halt

  • "Best support site I’ve seen!"

    Bob Schneider

  • "I would be lost without them."

    @fblack61

  • "Saved my job multiple times."

    Walt Forbes

  • "I love this site."

    Maria Duwe

  • "Friendly respectful help."

    Andrew Kowtalo

  • "Such top-notch experts."

    @magento

  • "The best money I have ever spent."

    @rwheeler23

  • "Beyond any comprehensible value"

    George Morris

  • "Invaluable tool for our organization"

    Josh Regalski

Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo
© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent