CODEWITHSUNDEEP
javascriptjquerygridview
Bostone
Bostone

Reputation: 37126

Horizontal (rotated) grid

This question was previously close as "too vague". Since I'm really desperate for the answer let me try again.

I spend few past days looking and trying to find JavaScript-based implementation for the control which I call for the luck of a better term a horizontal grid. To help you understand what I mean let's start with a regular grid. Say I have a database table with historical data for shipping some auto-part that I want to display. In the regular grid (table) control it looks like this:

Date | Part 1 | Part 2 | Part 3 |
---------------------------------
3/15 |   5    |   6    |   7    |  |
3/16 |   4    |   3    |   1    |  |
3/17 |   2    |   4    |   5    |  V
3/18 |   5    |   1    |   8    |

Now, imagine that I need to represent the same dataset growing horizontally. The idea is that rows and columns of the regular grid are inverted and the grid is populated not from the top to bottom but from left to right. Think of the regular grid that has been flipped on its side:

       |3/15| 3/16| 3/17| 3/18|
------------------------------- 
Part 1 |  5 |   4 |  2  |  5  |
Part 2 |  6 |   3 |  4  |  1  |
Part 3 |  7 |   1 |  5  |  8  |

            --->

With a small dataset I can do this with HTML table, however the problem is that the dataset can be quite large (and dynamic) so it would be nice to have pagination or automatic uploading of the additional records as the grid scrolls to the right.

As I mentioned, doing the search didn't really turn up anything. I'm willing to code this from scratch but before I start it would be nice get some suggestions on perhaps existing control I can rework in this manner

Upvotes: 2

Views: 948

Answers (1)

fe_lix_
fe_lix_

Reputation: 938

I believe that want you want to do is called matrix transposition. In this we can do it in javascript with array and underscore.js website

var autoParts =[
    ['Date', 'Part 1 ', 'Part 2', 'Part 3'],
    ['3/15', 5, 6, 7],
    ['3/16', 4, 3, 1],
    ['3/17', 2, 4, 5],
    ['3/18', 5, 1, 8]
]

var rotatedAutoParts = _.zip.apply(null, autoParts);

rotatedAutoParts contains now :

[
    ["Date", "3/15", "3/16", "3/17", "3/18"],
    ["Part 1 ",5, 4, 2, 5],
    ["Part 2",6, 3, 4, 1],
    ["Part 3", 7, 1, 5, 8]
]

With the data correctly set, you should be able to repopulate you HTML table quickly.

Upvotes: 3

Related Questions