Grid group footer is not sticky

[Jie]

Hi,

 

Please see the example - https://codesandbox.io/p/sandbox/silly-wind-tpfg8n

When column "Unit Price" is locked, while moving the horizontal scroll bar, the group header is sticky (expected behavior), but the group footer is not sticky (wrong behavior).

 

Thanks,

Jie 

[Filip]

Hi, Jie,

Thank you for the provided runnable example.

Upon closer inspection, the footer is rendered as a single cell rather than multiple smaller ones, so it cannot, in effect, inherit the column locking behavior from the header.  I was able to workaround this behavior by using the following CSS rules:

.k-grid .k-group-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.k-grid .k-group-footer .k-grid-content-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
}

I have modified the sent example and now the group footer is locked:

• https://codesandbox.io/p/sandbox/fervent-panini-6ksymk?file=%2Fpublic%2Findex.html%3A131%2C1-141%2C14

In case further questions arise on this matter, do not hesitate to reach out to us again.

Regards,
Filip
Progress Telerik

[Jie]

Thanks Filip. I found a case where the workaround doesn't work.

The workaround doesn't work if "ProductName" is also locked. Change this line in the example by adding `locked={true}`:

<Column field="ProductName" title="Product Name" width={150} locked={true} />

Basically, if any column in front of the footer column is locked, the workaround stop working.

[Filip]

Hello, Jie,

I tested the example above by locking the ProductName column as well, however it seems that the footer is still locked, does the issue occur on a specific browser? If so, can you please share the exact one and the used version, or is the UI issue different on your side? I have attached a screenshot:

[Jie]

When I said it is not locked, what I really mean is the footer is not aligned with the header. In your screenshot, footer "Average 39" is not aligned with header "Unit Price". I hope that makes sense.

 

Thanks,

JIe

[Filip]

Hello, Jie,

Thank you for the provided clarification. I tried various other CSS approaches in order to align the footer with the header and keep the footer sticky, however it seems that with the current implementation none of them gave a satisfying result. I have logged a feature request on your behalf for making the group footer sticky, you can track and monitor it's progress here:

https://feedback.telerik.com/kendo-react-ui/1696604-grid-footer-is-not-sticky

I have also added your vote for convenience.

Regards,
Filip