How to get sticky headers for DataGrid 2

0
Hi all,   I'm struggling with implementing sticky headers for DataGrid2 in Mendix 10.12.0.     We have our paging behavior set to virtual scrolling. In the default styling the code is as follows - the styling is not overwritten from what I can find: .sticky-sentinel { &.container-stuck { & + .widget-datagrid-grid, & + .table { .th { position: -webkit-sticky; /* Safari */ position: sticky; z-index: 50; } } } }   And the HTML is the browser is as follows:   Lastly, the grid resides inside a tab view, which in turn resides in a DataView.   I have seen these posts however, their solutions don't seem to work. Mendix Community - Question Details Mendix Community - Question Details   Any advice? TIA!
asked
3 answers
1

Hi Nico,

you can see my sample project Datagrid2 Sticky header ,double scroll ,fixed 1st column

 

Good luck!

answered
1

Hi Nico,

HTML snippet is just for horizontal scroll and not for sticky header , but if you want only sticky header use below css, it will work for all DG2  where  pagination set as paging button

 .widget-datagrid-content{
        max-height:400px;
        overflow:auto;
        width:100%;
    }

 

answered
0

Hi Nico,

 

I have implemented a workaround in some of my apps to improve the 'sticky header' behavior. Especially with virtual scrolling, the height of the content area is extended after the first 'load more action', causing an additional scrollbar which is scrolled indepedently from the grid content area (and breaking the sticky headers):

 

image.png

 

To change this behavior, I limit the height of the content area using css, making sure that the grid will always fit on the page:

 

image.png

 

I achieved this result with the following CSS (apply the 'dg2-sticky' class on the grid and combine that with an addon class for the height setting, in my case 'height-60'):

//datagrid 2 'fixed headers' by forcing a fixed height, which allows scrolling inside the content area, keeping headers in place
.dg2-sticky {

    .widget-datagrid-content {
        //Mendix auto calculates max height, which might overrule our own height setting if lower, so we ignore it
        max-height: 100%!important;  
    }

    //you will need to play around with the intended height, depending on the placement and/or intended size of the grid
    // e.g. full-page datagrids can use up to 95vh, but depending on the height of the top bar, page title and/or tab containers this will be less
    &.height-60 .widget-datagrid-content {
        height:60vh;              
    }

    &.height-50 .widget-datagrid-content {
        height:50vh;              
    }  
}

Hope this helps!

 

answered