Vertical KO Columns

http://stackoverflow.com/questions/13184126

by photo_tom

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/humanity/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js"></script>
<table style="border:solid" >
    <tbody data-bind="foreach: data">
        <tr data-bind="foreach: $data">
            <td data-bind='text: displayValue' style="padding:4px; border:solid thin" >  
            </td>       
        </tr>
    </tbody>
</table>

JavaScript

//debugger;
var data = [];
var element = {};
var prefixChar = 'a';
var numberColumns = 4;


for (var i1 = 1; i1 < 25; i1++) {
    element = {
        indexValue: i1,
        displayValue: prefixChar + i1.toString()
    }
    data.push(element);
    if (i1 == 12) {
        prefixChar = 'b';
    }
}

// now convert to a row/cell structure
var rowIndex = 0;
var displayStructure = [];
var maxNumberCells = data.length;
var rowBreakCount = 24 / numberColumns;
while (rowIndex < (maxNumberCells + 1) / numberColumns) {
    var row = [];
    for (var column = 0; column < numberColumns; column++) {
        var i = rowIndex + rowBreakCount * column;
        var pushValue = (i < maxNumberCells) ? data[i] : '&nbsp;';
        row.push(pushValue);
    }

    displayStructure.push(row);
    rowIndex++;
}
var vm = {};
vm.data = displayStructure;

ko.applyBindings(vm);