Mendix datagrid 2 horizontal scroll with selected number of fixed columns

1
Hi everybody,   I wish you all a very fortunate 2023!   Currently we are facing a customer request where we need to have a datagrid 2 scrollable and within this datagrid 2 we also want to have the 4 first columns to be fixed. The rest of the columns (7 remaining) should be scrollable. Any idea on how we can accomplish this with css?   Any help would be appreciated.   Kind regards
asked
3 answers
1

Hi,

i had the same problem and solved it with this:

 

.table .table-content .th:nth-of-type(1){

        position: sticky;

        top: 0;

        left: 0;

        z-index: +2;    // to be visible while scrolling down

        background-color: #fff;

    }

 

    .table .table-content .th:nth-of-type(2){

        position: sticky;

        position: -webkit-sticky;

        top: 0;

        left: 6.4em;

        z-index: +2;    

        background-color: #fff;

    }

 

 

    .table .table-content .td:nth-of-type(1){

        position: sticky;

        position: -webkit-sticky;

        left: 0;

        z-index: +1;    

        background-color: #fff;

    }

 

    .table .table-content .td:nth-of-type(2){

        position: sticky;

        position: -webkit-sticky;

        left: 6.4em;  //relative to parent object so this should be the same all the time

        z-index: +1;    

        background-color: #fff;

    }

 

Important is that you have to call header and cells in a column in a different way. The problem is that this works well just for the first two columns. afterwards this more or less hacky solution got problems with the resolution of different screens...

 

answered
0

Any CSS experts that can help us with this one?

answered
0

Hi Hannes

 

Thanks for the proposed solution. I will try to implement this for datagrid 2!

 

Kind regards

 

Kevin

answered