Sticky group header in ListView

[Michael Hertlein]

Hi,

is there a way to keep the "current" group header sticky at top of the ListView until the next groups starts?

What I mean is, that e.g. in the Call-History demo on https://blazor.syncfusion.com/demos/listview/call-history the today-header would stay visible at top of the ListView until the last call from today is visible. After that, the yesterday-header would stay on top.

Thanks.

Michael

[SureshRajan Alagarsamy]

Hi Michael,

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.

[Index.razor]

 

<style>

    ......

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

            color: #fff;

            height: 57px;

            background-color: #56697f;

            padding-left: 15px;

            position: sticky;

            top: 0;

            z-index: 1000;

    }

</style>

 

We have also attached a solution sample for your reference.

Sample : https://blazorplayground.syncfusion.com/LNLTZHVeeiftLwTM

Regards,
Suresh.