Accessing top element of a list view

0
Hello!  I was wondering if there is any way to access the top element of a list view. I’m trying to insert headers into the list view between the search bar and the first element, as our list view is set up to have a 3 column layout grid within it that displays the data that we wish to have within the view. However, no matter where in the top of the list view I place the layout grid I have that is setting up the headers that go above our data, the headers appear above every entry in the list view. Is there a better way to add them? Or is there a way to set the visibility based on if the entry is the top entry in the list? I’m still quite new to Mendix so if there’s something that I’m missing please point it out. I tried placing the layout grid above the list view, and then moving the text headers above the three columns using CSS, however the headers seemed very squished in and it didn’t quite look how we wanted it to. Any suggestions would be super appreciated. Thanks!
asked
3 answers
1

Hi Matthew,

The way I tried this before

  1. Add the header above list view, so it shows once
  2. Indeed when you add the headers within list view, it will be shown above for every record. When we work with template grid, we use “table-like-header”. I am not sure if it works for List view.
answered
1

Can be done by setting {display:none} for all and using CSS and <class>:first-child {display: block (or inline or...) } which is probably best since you are already fiddling in CSS, but the most common solution is like Nirmalkumar describes.

answered
0

These are the snippets that most of the community uses to put the heading of a template grid or list view below the control bar without repeating. (I’ve seen this css in several posts over the years). Allows for easier styling / responsiveness of a listview with header. 

 

Put heading of a template grid or list view below the control bar without repeating

 

“.grid-inlineheader” class added to listview.  

“grid-inlineheader-header” class added to heading inside listview

 

/// List view or template grid inlineheader 

.grid-inlineheader.mx-listview {
    .mx-listview-item {
        .grid-inlineheader-header {
            display: none;
        }
    }
    .mx-listview-item:first-child {
        .grid-inlineheader-header {
            display: inherit;
        }
    }
}


/// New React based listview (Only when not containing dojo based widgets)

.grid-inlineheader.mx-listview {
    li {
        .grid-inlineheader-header {
            display: none;
        }
    }
    li:first-child {
        .grid-inlineheader-header {
            display: inherit;
        }
    }
}

 

 

answered