So my ag-grid resize itself because my row height is also dynamic. So for height I am using [style.height.px]="beta" and this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139 And the pagination is set to 100.
I cannot use autoHeight because I have more than 10k rows. So I want my header to be sticky. I have some content before ag-grid in DOM. As I scroll I want my ag-grid header to stick to the top. I am using top:0;position:sticky;z-index:1000 It's working for every div tag except ag-gird's div tag. So is there a way to have a sticky header in ag-grid?
On onGridViewChanged() function I implemented the following logic. So in this logic the HTML above ag-gird in DOM should be consider for top because ag-grid header top was 0 for me. And then add some value according to your requirement (calibration). Then for the row body add some margin (calibration).
onGridViewChanged() {
let header = $('.ag-header')
let headerPos = $('.btn-row').position().top + 50
$(window).on("scroll", function () {
if ($(window).scrollTop() > headerPos) {
header.css("position", "fixed").css("top", 0).css("z-index", "99");
$('.ag-body-viewport.ag-layout-normal').css("margin-top", "88px");
}
else {
header.css("position", "static");
$('.ag-body-viewport.ag-layout-normal').css("margin-top", "0px");
}
});
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments