Question

I would like to know is it possible to create vertical DataView dataview docs dataview sample

By defaylt it renders from left to right in N rows, in other words second element at the right of the first one,

I am looking how to change this behavior to layout it vertically, so the second element will be below first one.

BTW if you know exactly that it is impossible with DataView let me know, because I think I can do it with GridView (but not in a trivial manner)

UPDATE#1 Desired layout should be as follows:

  • 1,6
  • 2,7
  • 3,8
  • 4,9
  • 5,10

Thanks.

Was it helpful?

Solution

It's possible by using xindex, xcount and parent variables. I found it by analysing source, you probably won't find any additional information about this solution in API. Example template:

'<tpl for=".">',
    '<tpl if="(xindex - 1) &lt; (xcount / 2)">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
        '{src} ',
        '<tpl if="parent[xindex - 1 + Math.ceil(xcount / 2)] != undefined">',
            '{[parent[xindex - 1 + Math.ceil(xcount / 2)].src]}',
        '</tpl>',
        '</div>',
    '</tpl>',
'</tpl>'

Working sample: http://jsfiddle.net/6ZUej/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top