Simplicty and flexibility!


How to create a multi column output using a data view

Started by DG3 Development
You will need to Sign In to be able to comment on the Blog!

How to create a multi column output using a data view

A data view in DG3 outputs a sequence of data from a live table, a live dql or a live transfer. To make these data list in one column is easy just using a standard table and setting a <table> tag in view header and </table> in view footer, but what about listing data in multiple columns? This is a little more tricky but not hard.

One approach is to use float. A div in html will fill up the space it have on the line and then jump to the next line when one is filled up.

First you must set the with of you outer div for the data view. One way this can be done is using the ad hock extra style field and adding something like this:

width:850px;float:left;

Then you make your html code inside the data view like this:

<div class="[% cycle 'listodd' 'listodd' 'listodd' 'listeven' 'listeven' 'listeven' %]" style="width:270px;padding5px;float:left;">
The live data: [{ viewdata.yourdatafield }]"
</div>

What this code snippet do is make 3 columns of data from the data view and then add an odd even table look to it using a class style called listodd and listeven with different colors.

The style code used:

.listodd {background-color : #cbcbcb;}
.listeven {background-color : #bcbcbc;}


Written by DG3 Development 23/08/13 at 07:18:10 DataEase Generation 3