Mendix 6 Datagrid With Fixed Header

-1
Hi ,I want to display fixed header for a datagrid  where user can scrolll down the grid,but Header freezes on its position.I have used css style Overflow:scroll,but it only adds a scrollbar ,does not freeze the header row. Is there any way to do this in the existing mendix datagrid using CSS? Or any widget is avilable in appstore which supports this datagrid feature?
asked
5 answers
2

You're looking for sticky headers, which is done with the CSS "position:sticky". Direct CSS support isn't quite there yet in modern browsers (actually recently removed from Chrome due to a bad implementation). 

That said, you can achieve this by using JavaScript or a JavaScript CSS polyfill as discussed in this article.

answered
2

The CSS to make a header stick is

.headerr {
  position: -webkit-sticky; /*To support the  Safari browser */
  position: sticky;
  top: 0;

index : 10; /* to keep the header on the top*/
}

the sticky behavour does not work when the any parent element have overflow or height property, you would need to over right that behaviour (as mendix data grid has an over flow property in class .mx-grid )

answered
0

You could also try setting a fixed height for the table contents height.  Add something like this to your theme:
 

.grid500high .mx-datagrid-content-wrapper {
    max-height: 500px;}

.grid500high .mx-grid-content {
    overflow-y: scroll;
}

Then set your table class to grid500high

 

answered
0

Anyone have a fix / javascript polyfill for this for datagrids in Mendix 7?

answered
0

Also very interested for 7.23.7!!!!

answered