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

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 01:03 AM PDT #

yep.

Posted by fg on May 01, 2007 at 11:11 AM 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 05:00 AM PDT #

dfgdgdfg

Posted by guest on July 16, 2007 at 05:48 PM 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 02: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 02: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 02: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 12, 2008 at 07:05 PM 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 26, 2008 at 10:49 PM 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 12: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 02: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 03:07 AM PDT #

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 17, 2009 at 10:28 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today