free web page hit counter

« Creator Tip: Adding... | Main | Adding AJAX function... »
Friday Sep 15, 2006

Adding multiple buttons to Table Component header

After reading my previous blog on Adding a button panel to the table component header, several Sun Java Studio Creator users asked me the question, how to add more than one button to Table component header?. Unfortunately the facet we used to set the button to the header panel does not seem to take more than one component. So, as suggested in the comment section, one way is to use some layout component and put more than one button in it. I tried with various layout components such as Grid, group Layout component etc. The best suitable one seems to be Group Layout Component. 

Steps:

  • First drag and drop a layout component on to the designer.
  • Drag and drop the needed buttons on to the layout component and set the disabled=true on the buttons
  • Go to the JSP page and manually move the tag related to Group Layout component inside the facets with names "actionsTop" or "actionsBottom". Remove the style attribute in the Group Layout component, else it may be positioned outside the Table header.
  • Add the Java Script code for confirmation dialog to onClick property of each button component as shown in the code below.  
<!-- Actions (Top) -->
<f:facet name="actionsTop">
   <ui:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1">
      <ui:button action="#{Page1.button1_action}" binding="#{Page1.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
      <ui:button action="#{Page2.button1_action}" binding="#{Page2.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
      <ui:button action="#{Page3.button1_action}" binding="#{Page3.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
      <ui:button action="#{Page4.button1_action}" binding="#{Page4.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
   </ui:panelGroup>
</f:facet>
  • Aslo make sure to add the Java Script code necessary to disableActions() function 
function disableActions() {
  // Disable table actions by default.
  var table = document.getElementById("form1:table1");
  var selections = table.getAllSelectedRowsCount();
  var disabled = (selections &gt; 0) ? false : true;
  // Set disabled state for top actions.
  document.getElementById("form1:table1:button3").setDisabled(disabled);
  document.getElementById("form1:table1:button4").setDisabled(disabled);
  document.getElementById("form1:table1:button5").setDisabled(disabled);
  document.getElementById("form1:table1:button6").setDisabled(disabled);
  // Set disabled state for bottom actions.
  document.getElementById("form1:table1:button2").setDisabled(disabled);
}

Deploy the application and you should see Table component with multiple buttons in the header as below. Initially buttons will be disabled. On selecting a row using checkbox the buttons will be enabled.

Table with multi button panel header

Posted at 12:15PM Sep 15, 2006  |  Permanent link to this entry

Comments:

Hello. First: Thanks for this Creator Tip Winston!
I have I created a table with 4 buttons and worked fine... but I have a question:
Is it posible to go to another page, return and select the row that was selected when I left the page or select any other row knowing the object I want to select?
I am using the code you included in 'Creator Tip: How to create single selectable row Table component' to select the rows.
With one button, for example, I add an object to the database and return to the page containing the table with the new object in the RequestBean. And I would like to select that object in the table (select the radioButton and highlight the row).

Thanks again for this blog! And keep going!

Posted by Ariel on September 26, 2006 at 08:03 AM PDT #

yep.

Posted by fg on May 01, 2007 at 06:11 PM PDT #

Is it possible to have a title that includes some cells merged? I would like to create a table that has some of the columns grouped together. This would require the first row to have some merged cells. Thanks. Josh.

Posted by Josh on May 31, 2007 at 12:00 PM PDT #

dfgdgdfg

Posted by 124.107.6.34 on July 17, 2007 at 12:48 AM PDT #

Thanks for this blog.. but i want to know, when i go to the next page of table by paging , all selection which i have selected, is omited, when i come back to the previous page.. please give the solution of this problem..
thanks

Posted by Priyanka Bansal on December 18, 2007 at 10:53 PM PST #

Hi Priyanka, read this document on how to achieve selection state across requests. http://webdev2.sun.com/woodstock-tlddocs/webuijsf/tableColumn.html#HiddenSelectedRows

Posted by Winston Prakash on December 23, 2007 at 10:51 AM PST #

Hello Winston!

This tip is great! I saw your previous tip and tried it and it worked fine (I didn't try the function disableActions()). Then I wanted to add three buttons and as you have mentioned here, I noticed that it cannot be done. So I used a Layout Panel in the facet and could add three buttons. But I have a problem. I wanted to use the disableActions() function here. But it's not working (Buttons are not enabled when I select rows). Do I have to call this function somewhere?

Please help me.

This is the code fragment I'm using.

<f:facet name="actionsBottom">
<ui:panelLayout binding="#{UserManager.layoutPnlSPSUserButtons}" id="layoutPnlSPSUserButtons" panelLayout="flow" style="border-width: 1px; border-color: rgb(204, 0, 0); height: 21px; left: 600px; position: absolute; width: 278px">
<ui:button action="#{UserManager.btnNew_action}" binding="#{UserManager.btnNew}" id="btnNew" style="width: 90px" text="New"/>
<ui:button action="#{UserManager.btnModify_action}" binding="#{UserManager.btnModify}" disabled="true" id="btnModify" style="width: 90px" text="Modify"/>
<ui:button action="#{UserManager.btnDelete_action}" binding="#{UserManager.btnDelete}" disabled="true"
id="btnDelete" style="width: 90px" text="Delete"/>
</ui:panelLayout>
</f:facet>

function dissableActions() {
var table = document.getElementById("form1:tblUser");
var selections = table.getAllSelectedRowsCount();
var disabled = (selections > 0) ? false : true;
document.getElementById("form1:tblUser:layoutPnlSPSUserButtons:btnModify").setDisabled(disabled);
document.getElementById("form1:tblUser:layoutPnlSPSUserButtons:btnDelete").setDisabled(disabled);
}
}

Thank You
Matara

Posted by Matara on February 12, 2008 at 10:58 PM PST #

Hi Winston!

I solved my problem. I added call to the dissableActions() function to the <ui:tableColumn> tag's onClick attribute as follows.
onClick="setTimeout('initAllRows()',0);setTimeout('dissableActions()',0)"

It's working fine now. Thanks a lot for all the tips you have published.

Matara

Posted by Matara on February 13, 2008 at 03:05 AM PST #

I found a problem in this structure. Buttons hide when the table is empty. But when the data is inserted it shows as usual. Please help me on this

Posted by Chamila on February 27, 2008 at 06:49 AM PST #

I am also facing the same problem. Buttons hide when the table has less than two rows.

Posted by praveen on March 05, 2008 at 08:43 AM PST #

How do we do this with woodstock table? I have a table, and also crated the facet ... how do the 2 get connected? How does the table know to use this face for its header? please advice.

Posted by Rambo on April 21, 2008 at 09:51 AM PDT #

I got it ... add to include the facet before the close of the table.

Posted by Rambo on April 21, 2008 at 10:07 AM PDT #

http://www.batteryfast.co.uk/hp/6515b.htm hp 6515b battery,
http://www.batteryfast.co.uk/hp/nx6325.htm hp nx6325 battery,
http://www.batteryfast.co.uk/hp/hstnn-db11.htm hp hstnn-db11 battery,

Posted by laptop batteries on October 24, 2008 at 12:31 AM PDT #

waw awesome

Posted by marsha on November 27, 2008 at 12:04 AM PST #

i don't know what this code means?

Posted by marsha on November 27, 2008 at 12:07 AM PST #

If you want to know how to use laptop battery well, You can see it from http://www.adapterlist.com/hp/hstnn-db11.htm hp hstnn-db11 battery,it's very useful .

Posted by laptop battery on February 15, 2009 at 10:54 PM PST #

Hi,
I need to place a print button at the table header.But when i am selecting a record and clicking the print button,automatically a pop-up alerts
saying"
Total Selection:1
Delete All Selections
This Cannot be undone"

Why is the delete pop-up coming ,when i want to go for print functionality.
Somewhere is getting some default values.
How to track this.
I rather want to show,an alert to printing.
Please suggest me.

Thanks
Amarshi Mohanty

Posted by amarshi mohanty on June 18, 2009 at 05:28 AM PDT #

This tip is great! I saw your previous tip and tried it and it worked fine (I didn't try the function disableActions()). Then I wanted to add three buttons and as you have mentioned here, I noticed that it cannot be done. So I used a Layout Panel in the facet and could add three buttons. But I have a problem. I wanted to use the disableActions() function here. But it's not working (Buttons are not enabled when I select rows).
http://www.papatek.com/SADP-65KB/
http://www.papatek.com/PA-1650-01/
http://www.papatek.com/PA-1650-02/
http://www.papatek.com/PA-1700-02/

Posted by laptop accessories on October 23, 2009 at 02:39 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed