+ Start a Discussion

Displaying a datatable in tabular format



I have a Visualforce page where I am displaying a multipicklist field as checkboxes.I am facing an issue with the allignment of the checkboxes in the page.I want my checkboxes to be displayed in 5 rows and 5 columns.

I have tried 2 approaches for doing this:

1) Using a wrapper class to bind the checkbox to the picklist field and then displaying them in the page by looping through a data table.

2)I also tried using the selectcheckboxes option.


My problem is that i get the checkbox bound to my picklist value.But the allignment is distorted(either all in same row or in 1 column).

So,i tried using a style class which will provide me the tabular display of the values in the datatable.But still this doesnt help.

Here is the javascript i used:



window.onload = init;

 function init() {

tables = document.getElementsByTagName("table");

for (i = 0; i < tables.length; i++) {

table = tables[i];

if (table.className == 'makeRows') {





function makeRows(table, columnCount) {

cells = table.rows[0].cells;

cellCount = cells.length;

rowCount = Math.ceil(cellCount / columnCount);

for (i = 0; i < rowCount; i++) {



for (i = 0; i < cellCount; i++) {

row = Math.floor(i / columnCount);








The datatable in my page looks like:


<apex:dataTable value="{!IndustryValues}" var="ind" styleClass="makeRows" >

<apex:column >

<apex:inputCheckbox value="{!ind.selected}"/>

<apex:outputText value="{!ind.induswrap}" />




Please help me to find a solution to this problem.The styleclass seems to have no effect in the datatable.I am totally lost..



Thanks & Regards,



Have you try using the column and row attribute on dataTable, like below:



<apex:dataTable value="{!IndustryValues}" var="ind" styleClass="makeRows" rows="5" columns="5" >
  <apex:column >
    <apex:inputCheckbox value="{!ind.selected}"/>
    <apex:outputText value="{!ind.induswrap}" />




Hi Bma,

I have tried it..But the datatable has no effect on columns.If i specify the rows as 5,only the first 5 values will be displayed.

I want the values to be displayed in a Grid format.


Perhaps a using a panelgrid and a repeat control will get you what you need?



<apex:panelGrid columns="5">
    <apex:repeat var="ind" value="{!IndustryValues}">
            <apex:inputCheckbox value="{!ind.selected}"/>
            <apex:outputText value="{!ind.induswrap}" />