Adding sticky headers to Grouped ListView Component

[Chris Maher]

When i add sticky position to groupTemplate the 1st item in Template causes it to push. 

Is there any way of making the sticky header go until the last item in the list?

[LeoLavanya Dhanaraj]

Hi Chris,

Greetings from Syncfusion support.

With the shared details, we understand that you are looking to keep the current group header visible until the last item in the group is displayed in the ListView component UI. To achieve this, we have utilized the sticky property in the CSS style for the group header class. This implementation ensures that the group header remains visible until the last item of the group is displayed, and when the next group item becomes visible, the corresponding group header will stick.

Refer to the below code snippet for further reference.

Sample : https://stackblitz.com/edit/react-wqt2bemm-xhgjfqjz?file=index.js,index.css

[index.css]

.e-listview .e-list-parent {

  height: 200px;

  overflow-y: auto;

}

 

.e-listview .e-list-group-item {

  color: #fff;

  height: 57px;

  background-color: #56697f;

  padding-left: 15px;

  position: sticky;

  top: 0;

  z-index: 1000;

}

Refer the shared details on your end and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj