You need to sign in to do that
Don't have an account?
How to display Checkboxes in columns
I am diplaying the value of multiselct picklist as checkboxes and it shows up correctly. The only thing which I am not able to achieve is, I want to display the checkboxes in three columns, like if I have 12 values for multiselect picklist then the checkboxes should show up in 4 coulmns and 3 rows. And in future if I add more values to the multi-select picklist the next checkbox should automatically be shown in the next column.
At present the checkboxes they all show up in 12 rows (for 12 values) and in one column.
The Visualforce code for getting the multi-select picklist value as checkbox is below:
<apex:selectCheckboxes value="{!slctCheckboxes}" id="selctCB" layout="pageDirection" >
<apex:selectOptions value="{!MultiPickNums}" id="selctOPT"></apex:selectOptions>
I don't know what CSS,HTML or JavaScript to apply to achieve it. Please HELP!!
window.onload = init;
function init() {
tables = document.getElementsByTagName('table');
<!-- tables=document.getElementById("{!$Component.frm.selctCB}") -->
for (i = 0; i < tables.length; i++) {
table = tables[i];
if (table.className == 'makeRows') {
makeRows(table, 3);
}
}
}
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);
}
All Answers
window.onload = init;
function init() {
tables = document.getElementsByTagName('table');
<!-- tables=document.getElementById("{!$Component.frm.selctCB}") -->
for (i = 0; i < tables.length; i++) {
table = tables[i];
if (table.className == 'makeRows') {
makeRows(table, 3);
}
}
}
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);
}