Freeze the 2 column of data grid 2

0
I have 22 columns in my data grid 2. The first column is Checkbox, 2nd is the employee id and 3rd is the employee name. My requirement is I need to freeze the employee id and employee name column i.e. when i scroll to the right to edit any data. i should be able to see the employee id as well employee name as it is in Excel. i tried a couple of things but didn't got any success. I got to know i need to write custom CSS for it.  Can somebody tell me the custom css and where to write it. 
asked
4 answers
1

Hi Prince,

 

In your Mendix project, navigate to the theme folder, typically located under /theme/weband open custom.scssfile.

 

Add SCSS code to freeze the desired columns. Apply the following SCSS properties to make them fixed while scrolling horizontally.

.theclassname {
  position: sticky;
  left: 0;
  background-color: #fff; /* adjust to match your styling */
  z-index: 1;
}

Replace .theclassname with the appropriate class or selector for the employee ID and employee name columns.

 

Hope it helps!!!

answered
0

Hi Prince ,

 

You can write the custom css class in main.css file which you can find in folder /Mendix/ProjectFolder/theme\web . 

You can add the CSS class there and same you can use in Appearance → Custom CSS section. 

answered
0

I have applied css in table.css
.table .th:nth-child(2) ,
.table .td:nth-child(2)  {
    left: 0;
    position: sticky;
   
    z-index: 999;
}

.table .th:nth-child(3) ,
.table .td:nth-child(3)  {
    left: 0;
    position: sticky;
    z-index: 999;
}

I am getting one issue here. Employee ID and Employee code is getting overlapped. i.e. Employee Code is getting hiddedn under Employee code Can you correct me where i have made the mistake. 

answered
0

.table .th:nth-child(2),

.table .td:nth-child(2) {

left: 0;

position: sticky;

z-index: 999;

}

 

.table .th:nth-child(3),

.table .td:nth-child(3) {

left: 210px;   // adjust as per your project

position: sticky;

z-index: 998;

}

 

.table .td:nth-child(n+4) {

left: 200px;  // adjust as per your project

position: sticky;

z-index: 997;

 

}

.table .td:nth-child(3) ,

.table .td:nth-child(2) {

background-color: white;

}

This has worked for me.

answered