Help! Checkbox on Table not working
Help! I can't use a checkbox on a table to select rows.
I don't know what I'm doing wrong, I exactly followed very tutorial there is and all won't work. First I tried the one described by the Tutorial Divas, but couldn't get it to work.
I followed all the steps: add a HashSet to SessionBean1, then add a selected property of typ boolean and than set the selected property of the checkbox to the property in the SessionBean1 (selected). I changed the isSelected and setSelected methods, so they work with the HashSet.
But when I select some checkboxes in the table, the HashSet is still empty... When debugging I saw, that the SetSelected method is never called (althougt isSelected is called). Why is that? I couldn't find detailed information on the matter. I looked at the Table_Component_example, but there a bit different approche is used, with a TablePhaseListener.
I also read the part in Winston's blog, but that didn't really add anything and I tried the example described in the JSC Field Guide.
Finally some code:
publicboolean isSelectedObservationPoint(){
TableRowDataProvider rowData = (TableRowDataProvider) getBean("currentRow");
if(rowData ==null)returnfalse;
RowKey rowKey= rowData.getTableRow();
if(selectedObservationPoints.contains(rowKey))returntrue;
elsereturnfalse;
}
publicvoid setSelectedObservationPoint(boolean selectedObservationPoint){
TableRowDataProvider rowData = (TableRowDataProvider) getBean("currentRow");
RowKey rowKey= rowData.getTableRow();
if(selectedObservationPoint){
this.selectedObservationPoints.add(rowKey);
}
else{
this.selectedObservationPoints.remove(rowKey);
}
}
So the only thing is, that I changed the iterating over the Hashset to contains call (why wasn't that used in the first place?) But that can't really be the problem, as I doesn't do anything... SetSelected is never called (at least not when debugging).
Is there something I missed? Could this be a problem, that the table itself a rather complicated grid-layout?
Thanks
[2984 byte] By [
maxhuetter] at [2007-11-26 9:35:52]
# 1
Here is a complete list of steps required to implement a table with a column of checkboxes and Select All/Deselect buttons. In my code, as a data provider I used ObjectListaDataProvider with a list of beans as an underlying storage.
Add a column of checkboxes to the table. (From the Table Layout dialog pick the checkbox as component type.)
Add the following properties to the page backing bean:
selected of type Object(read/write)
selectedValue of type Object (read-only)
currentRowSelected of type boolean (read-only)
Here is how the properties should be implemented. Unfortunately, the code has to be typed in manually:
/**
* Getter for property selected.
* @return Value of property selected.
*/
public Object getSelected() {
RowKey rowKey = tableRowGroup1.getRowKey();
return tablePhaseListener.getSelected(rowKey);
}
/**
* Setter for property selected.
* @param selected New value of property selected.
*/
public void setSelected(Object object) {
RowKey rowKey = tableRowGroup1.getRowKey();
if (rowKey != null) {
tablePhaseListener.setSelected(rowKey, object);
}
}
/**
* Getter for selectedValue
* @return Object value of the component when it is selected
* Bind this property to the checkbox's selectedValue property
* If the object's value matches selectedValue
* then the checkbox is considered to be selected.
*/
public Object getSelectedValue() {
RowKey rowKey = tableRowGroup1.getRowKey();
return (rowKey != null) ? rowKey.getRowId() : null;
}
/**
* Getter for currentRowSelected
* @return Boolean true if the checkbox in the current row is selected
* Bind this property to the row's selected property
*/
public boolean isCurrentRowSelected() {
RowKey rowKey = tableRowGroup1.getRowKey();
return tablePhaseListener.isSelected(rowKey);
}
Now follow these steps:
1. In the Page Outline view select the tableColumn component containing the checkbox:
set selectId property to the ID of the checkbox component.
set onClick property to setTimeout('initAllRows()', 0)
2. Select the tableRowGroup1 component:
bind selected property to the page's currentRowSelected property.
3. Select the checkbox component:
bind selected property to the page's selected property.
bind selectedValue property to the page's selectedValue property.
4. Make sure that all editable columns, including the checkbox, participate in the delete virtual form.
Now a delete rows action handler can be as simple as this:
public String deleteRows_action() {
RowKey[] selectedRowKeys = getTableRowGroup1.getSelectedRowKeys();
if(selectedRowKeys.length == 0) {
error("One or more rows have to be selected!");
return null;
}
for(int i = 0; i < selectedRowKeys.length; i++) {
tableDataProvider.removeRow(selectedRowKeys[i]);
}
// At this point, the deletions will be made in the underlying
// data structures (a database table, a list of Java beans, etc).
// I have stepped through the commitChanges() method of
// ObjectListDataProvider to make sure it deletes rows starting
// from the highest index and going down to the lowest.
tableDataProvider.commitChanges();
// Back to the same page
return null;
}
# 2
Thank you for your help. But I found out what the problem was... It was a really stupid mistake, but maybe other can learn from it too.
I forgot to add the checkboxes to the virtualform I use to submit, so the setSelected is never called.
I used a bit lighter binding, with HashSets to store the selections and a single boolean for each checkbox and no selectedValue. (Like the solution described in the blog of the Tutorial divas)
The only thing is that the highlighting of the selected rows doesn't work. Any idea? Or do I nedd to use a tablephaselistener for that?
# 3
You need to add all properties that I listed in my post and bind appropriate subcomponents of the table to them. You can also enable Select All/Deselect table buttons by checking selectMultipleButton and deselectMultipleButton properties on the table.
# 4
It is working now, only that the selected rows don't get highlighted. What do I need the selectedValue for? To keep the selections? To highlight the rows?Is it correct to set the onClick method for the TableRowGroup, and not the checkbox itself?
# 5
> It is working now, only that the selected rows don't
> get highlighted.
I think the magic combo is
1. Select the table Column that contains the checkbox and set
onClick: setTimeout('initAllRows()', 0)
selectId: the id of your checkbox component. For example checkbox1.
2. Select the tablerowgroup and set the property
selected: SessionBean1 > selected (or whatever the name is for the bean property that has a method that returns true or false whether the checkbox is selected)
> What do I need the selectedValue
> for?
> To keep the selections? To highlight the rows?
If the checkbox's selected method is returning true/false (as with the code from our (the divas) blog, which you are using) then you don't have to worry about selectedValue. For more information about selectedValue see Delving Into Components at http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/abo ut_components.html
> Is it correct to set the onClick method for the
> TableRowGroup, and not the checkbox itself?
See above, I set the onClick method for the tableColumn that contains the checkbox.
Chris
http://blogs.sun.com/divas
# 6
Thank you for your answer! But what you suggested didn't work. I set the selectId and the onClick method of the table column. Then I set the tablerowgroup selected property to the selected property. (The selected method is only returning true/false.)
# 7
Here is my JSP code:
<ui:table augmentTitle="false" binding="#{TableCheckbox.table1}" id="table1" style="position: absolute; left: 72px; top: 120px"
title="Table" width="80">
<ui:tableRowGroup binding="#{TableCheckbox.tableRowGroup1}" id="tableRowGroup1" rows="10" selected="#{SessionBean1.selected}"
sourceData="#{TableCheckbox.stateDataProvider}" sourceVar="currentRow">
<ui:tableColumn binding="#{TableCheckbox.tableColumn2}" headerText="STATENAME" id="tableColumn2" sort="STATE.STATENAME">
<ui:staticText binding="#{TableCheckbox.staticText2}" id="staticText2" text="#{currentRow.value['STATE.STATENAME']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{TableCheckbox.tableColumn3}" headerText="tableColumn3" id="tableColumn3"
onClick="setTimeout('initAllRows()', 0)" selectId="checkbox1">
<ui:checkbox binding="#{TableCheckbox.checkbox1}" id="checkbox1" selected="#{SessionBean1.selected}"/>
</ui:tableColumn>
</ui:tableRowGroup>
</ui:table>
How does that compare with yours?
# 8
The JSP:
<ui:table augmentTitle="false" binding="#{createConfig.observationPointTable}" id="observationPointTable"
style="height: 121px" title="Observation Points" width="958">
<script></script>
<ui:tableRowGroup binding="#{createConfig.tableRowGroup1}" id="tableRowGroup1" rows="3"
selected="#{createConfig.selectedObservationPoint}" sourceData="#{SessionBean1.observationDataProvider}" sourceVar="currentRow">
<ui:tableColumn binding="#{createConfig.tableColumn1}" headerText="ID" id="tableColumn1" sort="id">
<ui:staticText binding="#{createConfig.staticText1}" id="staticText1" text="#{currentRow.value['id']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn2}" headerText="DomainId" id="tableColumn2" sort="domainId">
<ui:staticText binding="#{createConfig.staticText2}" id="staticText2" text="#{currentRow.value['domainId']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn5}" headerText="Type" id="tableColumn5" sort="type">
<ui:staticText binding="#{createConfig.staticText5}" id="staticText5" text="#{currentRow.value['type']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn4}" headerText="Parameters" id="tableColumn4" sort="parameters">
<ui:staticText binding="#{createConfig.staticText4}" id="staticText4" text="#{currentRow.value['parameters']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn20}" headerText="Next Processes" id="tableColumn20" sort="nextInfo">
<ui:hyperlink action="#{createConfig.observ_next_action}" binding="#{createConfig.observ_next}" id="observ_next" text="#{currentRow.value['nextInfo']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn21}" headerText="Edit" id="tableColumn21" width="25">
<ui:button action="#{createConfig.edit_Observationpoint_button_action}"
binding="#{createConfig.edit_Observationpoint_button}" id="edit_Observationpoint_button" text="Edit"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn22}" headerText="Remove" id="tableColumn22">
<ui:button action="#{createConfig.remove_observation_point_action}"
binding="#{createConfig.remove_observation_point}" id="remove_observation_point" text="Remove"/>
</ui:tableColumn>
<ui:tableColumn binding="#{createConfig.tableColumn23}" headerText="Add to Config" id="tableColumn23" onClick="setTimeout('initAllRows()', 0)" selectId="checkbox2">
<ui:checkbox binding="#{createConfig.checkbox2}" id="checkbox2" selected="#{createConfig.selectedObservationPoint}"/>
</ui:tableColumn>
</ui:tableRowGroup>
</ui:table>
As far as I can see it is pretty much the same. Did I over look something?
# 9
Just a note that I removed the script from just below the ui:table tag to focus in on the property settings. Maybe we need to verify that your JSP has the following script, and that in your script form1:table1 is replaced by form1:observationPointTable.
<script><![CDATA[
/* -- Functions for Table Preferences Panel -- */
/*
* Toggle the table preferences panel open or closed
*/
function togglePreferencesPanel() {
var table = document.getElementById("form1:table1");
table.toggleTblePreferencesPanel();
}
/* -- Functions for Filter Panel -- */
/*
* Return true if the filter menu has actually changed,
* so the corresponding event should be allowed to continue.
*/
function filterMenuChanged() {
var table = document.getElementById("form1:table1");
return table.filterMenuChanged();
}
/*
* Toggle the custom filter panel (if any) open or closed.
*/
function toggleFilterPanel() {
var table = document.getElementById("form1:table1");
return table.toggleTableFilterPanel();
}
/* -- Functions for Table Actions -- */
/*
* Initialize all rows of the table when the state
* of selected rows changes.
*/
function initAllRows() {
var table = document.getElementById("form1:table1");
table.initAllRows();
}
/*
* Set the selected state for the given row groups
* displayed in the table. This functionality requires
* the 'selectId' of the tableColumn to be set.
*
* @param rowGroupId HTML element id of the tableRowGroup component
* @param selected Flag indicating whether components should be selected
*/
function selectGroupRows(rowGroupId, selected) {
var table = document.getElementById("form1:table1");
table.selectGroupRows(rowGroupId, selected);
}
/*
* Disable all table actions if no rows have been selected.
*/
function disableActions() {
// Determine whether any rows are currently selected
var table = document.getElementById("form1:table1");
var disabled = (table.getAllSelectedRowsCount() > 0) ? false : true;
// Set disabled state for top actions
document.getElementById("form1:table1:tableActionsTop:deleteTop").setDisabled(disabled);
// Set disabled state for bottom actions
document.getElementById("form1:table1:tableActionsBottom:deleteBottom").setDisabled(disabled);
}]]></script>
# 10
One other suggestions is to run in a browser with a JavaScript debugger (I use Firefox 's Firebug). As it is the JavaScript that does the highlighting, maybe you will see some errors?
