+ Start a Discussion
JeriMorrisJeriMorris 

Putting selectCheckBoxes in columns

My VisualForce page includes the following checkboxes:

<apex:pageBlockSection columns="4">
    <apex:selectCheckBoxes value="{!SelectedThings}" layout="pageDirection">
        <apex:selectOptions value="{!AllThings}" />
    </apex:selectCheckBoxes>            
</apex:pageBlockSection>

They all display in a single column. If I remove the layout attribute, they all display on a single line (wrapped to new lines if necessary). I'd rather they displayed in rows and columns, so that if there were 12 checkboxes, they'd display in 3 rows with 4 columns of checkboxes. Is there any way to do that?

Thanks,

Jeri


Ron HessRon Hess
apex: panelGrid

Renders an HTML table element in which each component found in the body of the panelGrid is placed into a corresponding cell in the first row until the number of columns is reached. At that point, the next component wraps to the next row and is placed in the first cell. Note that if a repeat component is used within a panelGrid component, all content generated by the repeat component is placed in a single panelGrid cell. The panelGrid component differs from dataTable because it does not process a set of data with an iteration variable. See also panelGroup.
JeriMorrisJeriMorris
Thanks, Ron, but panelGrid doesn't seem to make a difference. When I try:

<apex:pageBlockSection columns="4">
<apex:panelGrid columns="4" >
<apex:selectCheckBoxes value="{!SelectedThings}" layout="pageDirection">
<apex:selectOptions value="{!AllThings}" />
</apex:selectCheckBoxes>
</apex:panelGrid>
</apex:pageBlockSection>
I get exactly the same results as before -- all the checkboxes display vertically, one per row. If I change "pageDirection" to "lineDirection," it puts them all in a single row.

As Ron pointed out, the description of panelGrid says, "Renders an HTML table element in which each component found in the body of the panelGrid is placed into a corresponding cell..." It's as if VF considers all  the checkboxes to be a single component, so it puts them all into a single cell.

Any ideas?

Jeri
curioustomcurioustom

Hi JeriMorris,

   Did you find the solution for this..?

 please post the solution if you found a way to achive this, any help is much appreciated.

Thanks in advance.

 

JeriMorrisJeriMorris
Nope, I never found a solution to this problem.

Perhaps there's something in Winter 09 to improve layout of select checkboxes.... I haven't had a chance to look yet.

If you find a solution, please post it here! I'll do the same.

Thank you,

Jeri.

craigmhcraigmh
I'd also like to know if there's a solution to this.  It's a tad annoying to have a few dozen checkboxes, and no easy way to display them on multiple rows.
charrischarris

I was also frustrated that the selectCheckboxes tag does not support a columns attribute.

 

To solve the problem I am using javascript to rewrite the DOM after Salesforce has created it.

 

In my selectCheckboxes tag I ensure that resulting table can be identified using

 

 

styleClass="makeRows"

 

 

I then add the following javascript

 

 

    <script type="text/javascript">
    window.onload = init;
     
    function init() {
       tables = document.getElementsByTagName('table');
       for (i = 0; i < tables.length; i++) {
          table = tables[i];
          if (table.className == 'makeRows') {
             makeRows(table, 7);
          } 
       } 
    }

    function makeRows(table, columnCount) {
       cells = table.rows[0].cells;
       cellCount = cells.length;
       rowCount = Math.ceil(cellCount / columnCount);
      
       for (i = 0; i < rowCount; i++) {
          table.insertRow(0);
       }
       for (i = 0; i < cellCount; i++) {
          row = Math.floor(i / columnCount);
          table.rows[row].appendChild(cells[i].cloneNode(true));
       }
       table.deleteRow(rowCount);
    } 
    </script>

 

This rewrites the single row into a set of rows.

 

cbs42cbs42

Thank you, charris! That helped me very much!