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
5 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
0

Hello,

bit late for this topic, but here is css to use

.dg2-sticky {
    .widget-datagrid-grid{
        overflow-y: auto;
        max-height: 40vh; // adjust as needed or use @media (max-height: your value px) and implementation is bit different
    }
    .widget-datagrid-grid-head .th{
        position: sticky;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        top: 0;
        min-width: 0;
        border-width: 0;
    }
}

It's working for Datagrid2 with Paging buttons, CSS is just taken from infinite-loading class that is used when Datagrid2 is set to Virtual scroll. Note that different version of datawidget have different html and it's need to be adjusted.

answered
0

Hello Nico Mouton,

 

I have used below css in my project to make header sticky and content scroll in case of virtual scrolling. You can add customDatagrid2 this class name and also this is only a part of my code of there might be some variables used which I have defined, you can replace them.

 

.customDatagrid2 .widget-datagrid-content { 

overflow-y: auto;  

overflow-x: auto;  

}

.customDatagrid2 .widget-datagrid-grid-body { 

overflow: visible;

}

.customDatagrid2 .table .tr .th { 

position: sticky; 

top: 0; 

z-index: 10; 

background: #fff; 

border-bottom: 1px solid var(--table-border);

}

 

 

Hope this helps!

 

Thanks & Regards

Amit Gupta

 

answered