Creator Tip: How to create a Collapsible Group Table?

Another interesting feature of the Sun Java Studio Creator Table component, which many users might not be aware of, is the ability to collapse the Table Row Group. Interestingly the collapsing does not involve round trip to the server, so it is fast and convenient. I've created a small project for this tip which you can download from here.

Steps:

• Add a Table Component to the design surface
• Drag and drop a Table Row Group (child of Table in the palette) on to the Table Component
  Now you should see two groups of table rows in the table (see picture below)
• Drag and drop the Person table from Servers Tab  (Data Sources -> Travel -> Tables -> Person on to the first Table Row Group
  Make sure the first Table Row group is highlighted to accept the drop, not the Table. A dialog pops up to ask if the drop should go to the table1 or tableRowgroup1. Select  tableRowgroup1
• Drag and drop the Trip table from Servers Tab  (Data Sources -> Travel -> Tables -> Trip on to the second Table Row Group.
  Make sure the second Table Row group is highlighted to accept the drop. A dialog pops up to ask if the drop should go to the table1 or tableRowgroup2. Select  tableRowgroup2
• Select tableRowgroup1 from Outline window and in the property sheet, enter the text"Person Row Group" to the property headerText and select the checkbox for the property groupToggleButton.
• Similarly, select tableRowgroup2 from Outline window and in the property sheet, enter the text  "Trip Row Group" to the property headerText and select the checkbox for the property groupToggleButton.
• Select and right click on tableRowgroup1 from Outline window and select Table Layout menu item. In the options panel of the dialog select pagination checkbox and set number of rows to 3.
• Similarly, select and right click on tableRowgroup2 from Outline window and select TableLayout menu item. In the options panel of the dialog select pagination checkbox and set number of rows to 7.

Deploy and the page in the browser would look like the image below.

Now click on the down arrow in the Trip Row group, you would see the row group collapsing immediately as shown in the image below.

Posted at 07:54AM Oct 24, 2006  |  Permanent link to this entry