Stikcy Head DataGrid2

0
  Hi Team, I want to stick header in datagrid2. But could not be able to find the solution which work.   I have added a class in Datagrid2 - dx-datagrid-nowrap in the css code, I have written below code   //Sticky Header Datagrid2 ::ng-deep div.dx-datagrid-header-panel{  position: sticky;  top:0;  z-index: 1000;   /*z-index is applied so that this element appears in front*/ } ::ng-deep .dx-datagrid-headers.dx-datagrid-nowrap{  position: sticky;  top:70px;  background-color: white;  z-index: 1000; }     But in browser, it is not working, header is not sticky.       If I scroll down, header is not sticky.   Can anyone please help me on this?   Note - I need to use Virtual scrolling properties.
asked
3 answers
0

The Datagrid2 has a sticky header in the standard setup

 

image.png

answered
0

The following SCSS solved the problem.

.sticky-header-datagrid2 .table .th {
    position: sticky;
    top: 0px;
    z-index: 100;
}
.sticky-header-datagrid2 .widget-datagrid-content {
    overflow-y: unset;
}

 

answered
0

Hi Sweety Kumari ,

Kindly  go through this

 

  • To make Header or column of right ,left side sticky Use Widget “mDatagrids”.(For Datagrid 2) 

 

  • Sticky Columns: Allows you to make the first and/or last column sticky while scrolling. Note: Fixed column sizes are required for this feature. 

  • Sticky Header: Keeps the header visible while scrolling. 

  • Display Full Content: Enables displaying the full content/text of a column, with options to limit the amount of content/text to a maximum number of lines. 

  • Compact View: Makes the grid compact. 

  • Column Width Settings: Provides options to set minimal widths for columns, including sticky columns. 

 

  • Installation and Configuration 

  • Download widget from Marketplace. 

  • Press F4 within Mendix Studio Pro to access the Data Grid options within your appearance tab.(Once you are through with this step it will be automatically get applied to all the datagrid 2  in the project ) 

  • In the appearance tab, configure the sticky columns as per your requirements. 

A screenshot of a computer AI-generated content may be incorrect., Picture 

 

answered