+ Start a Discussion
VinnySusanthVinnySusanth 

Displaying a datatable in tabular format

Hi,

 

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:

 

<script>

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,4);

}

}

}

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>

 

 

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}" />

</apex:column>

</apex:dataTable>

 

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,

Vinny

bmabma

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}" />
  </apex:column>
</apex:dataTable>

 

 

VinnySusanthVinnySusanth

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.

MikeGinouMikeGinou

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:panelGroup>
            <apex:inputCheckbox value="{!ind.selected}"/>
            <apex:outputText value="{!ind.induswrap}" />   
        </apex:panelGroup>
    </apex:repeat>
</apex:panelGrid>