CODEWITHSUNDEEP
javascriptknockout.js960.gs
Anirban Ghosh
Anirban Ghosh

Reputation: 125

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

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.

Upvotes: 2

Views: 178

Answers (1)

photo_tom
photo_tom

Reputation: 7342

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/

Upvotes: 1

Related Questions