Displaying Data in Columner way through Knockout.js, 960.gs

Question

I am very newbee in Knockout.js and 960.gs.

I am getiing a JSON data like following:

[1, a1],[2,a2],...[12, a12] [13, b13],[14,b14]......[24,b24]

I have taken a div with grid-12 structure

when I bind that grid with knockout.js, it displays as follows:

a1     a2     a3    a4     a5    a6
a7     a8     a9    a10    a11   a12
b13    b14    b15   b16    b17   b18
b19    b20    b21   b22    b23   b24

I want an output as follows, where first columns will be filled up with a values and just aftyer that b values will start filling up the rest grid:

a1  a5 a9  b13
a2  a6 a10 b14
a3  a7 a11 ...
a4  a8 a12 ...

How is it possible to do? Pls help, Thanks in advance.

Can you post your html and also your KO code? – nemesv Nov 01 '12 at 20:23 — nemesv, Nov 01 '12 at 20:23
Does 960.gs even support this? – Kyeotic Nov 01 '12 at 22:20 — Kyeotic, Nov 01 '12 at 22:20

score 1 · Answer 1 · answered Nov 10 '12 at 19:01

A very interesting problem. First, knockout doesn't directly support this as this requires a level of knowledge about the data that is not present in knockout.

After several tries, I found that you need an intermediate step of converting you data model from a 1 dimensional array, to a 2 dimensional array. This allows an outer foreach binding for each and an inner foreach binding for each . For the last row, you have to make sure that you fill the entire row or the table won't display correctly.

the code that does this is -

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++;
}

I have a working solution at http://jsfiddle.net/photo_tom/cGMa2/20/

Displaying Data in Columner way through Knockout.js, 960.gs

1 Answers1