How to display a list in columns?

0
I want to show some data from a list. However, not in a row by row fashion, but in a column by column fashion. To be more specific, I would like to display a value for each day of the week.   For example: Mo    Tu    We    Th    Fr 1        2       3       2      4   So far, I have not found a solution. Alternative is to make different entities, one for each day of the week, but that doesn’t have my preference, because of DRY!   Is there a solution? Connected to this, is there something like a Map data structure (i.e. using key value pairs)?
asked
3 answers
3

The best solution would probably be to create a custom css class and use flexboxes to expand horizontally instead of vertically.

This will require some knowledge about styling.

Flexboxes are pretty awesome. There's a good guide to start you with them here

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To make modifications to your theme folder it's recommended to make additions to the scss files in the theme folder, not the css files. This means you will need a scss compiler. I personally use Koala. But other people like using Gulp. There's a lot of content to be found on the forums/documentation about this.

EDIT: The above assumes you're stuck with using a listview. if you're not bound to having a listview, you can also use a template grid with 1 row and 7 columns. Which would save you some styling headache.

answered
1

Related

Good idea for a widget/feature, this shows you can do it, with the grid still nominally functioning

Picture

JS

function TransposeTable(tableId){        
    var tbl = tableId;
    var tbody = tbl.find('tbody');
    var oldWidth = 0;
    
     jQuery('tr:nth-child(1) td').each(function () {
        if (jQuery(this).attr('colspan')) {
            oldWidth += +jQuery(this).attr('colspan');
        } else {
            oldWidth++;
        }
    });
    var oldHeight = tbody.find('tr').length;
    var newWidth = oldHeight;
    var newHeight = oldWidth;
    var jqOldCells = tbody.find('td');
    var newTbody = jQuery("<tbody></tbody>");
    //for(var y=newHeight; y>=0; y--)//reverse
    for(var y=0; y<newHeight; y++)
    {
        var newRow = jQuery("<tr></tr>");
        //for(var x=0; x<newWidth; x++)//reverse
        for(var x=newWidth; x>0; x--)
        {
            newRow.append(jqOldCells.eq((oldWidth*x)+y));
        }
        newTbody.append(newRow);
    }
    tbl.addClass('rotate');
    tbody.replaceWith(newTbody);        
}
TransposeTable(jQuery('.mx-grid .mx-datagrid-body-table'));

CSS [not namespaced]


.mx-datagrid-content-wrapper{
  display:flex;
}
.mx-datagrid-head{
  display:inline-block!important;;
}
.mx-datagrid-head-table{
  display:unset!important;
}
.mx-datagrid-body{
  display:inline-block!important;
}
.mx-datagrid-body-table{
  display:inline-block!important;
}
.mx-datagrid-head>tr>th{
  display:flex;
}
.mx-datagrid-head *{
  padding:unset!important;
}
.mx-datagrid-head>tr>th{
  padding:3px!important;
  margin:2px;!important;
  width:128px;
}

 

answered
0

Okay, I found a workaround. What I have done is the following:

  1. Made an Enum for each day of the week (‘Mo’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’)
  2. Made an Entity called ‘weekday’ with two attributes:
    1. name (enum)
    2. hours (integer)
  3. Made an Entity called ‘week’ with a one-to-many relationship to ‘weekday’
  4. Made a Layout grid with a column for each day of the week
  5. Filled each column with a List view
  6. Set the Data source of each List view to the corresponding Entity that holds the data (‘week’)
  7. Set as a Constraint the name of the Weekday to be:
    1. ‘Mo’ for the first column
    2. ‘Tu’ for the second column
    3. …
  8. Set the class for each List view to be ‘listview-stylingless’
  9. Added a Text for name and a Text box for hours to each List view

 

The result!

Feedback is welcome...

answered