Kendo UI Grid Component

[iambwayne]

Hello Murhaf,

Let me start by saying... Great library. I made it here after migrating from ngx-perfect-scrollbar. It has been smooth sailing sans this one hurdle.....

What are you trying to do?

Use ngx-scrollbar with Kendo UI Grid Component

What troubleshooting steps have you tried?

I wrapped the Grid Component with "ng-scrollbar" according to the documentation. Visually it appears to work. However, the vertical scrolling behavior is not working properly. Please note: The Grid Component is using virtualization. Perhaps something similar to "cdk-virtual-scroll-viewport."

Reproduction

Stackblitz Example

Steps to reproduce:

1. Load stackblitz repro
2. Try to scroll vertically
3. Observe scrolling behavior

Environment

• Angular: 17.3
• ngx-scrollbar: 15.0.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

Any direction you could provide would be greatly appreciated.

Thank you!

[MurhafSousli]

Since the table is using virtual scroll, you need to set the externalSpacer, with kendu it is .k-height-container and content wrapper should be .k-grid-table

<ng-scrollbar externalViewport=".k-grid-content"
                      externalContentWrapper=".k-grid-table"
                      externalSpacer=".k-height-container"
                      asyncDetection>
  <kendo-grid scrollable="virtual">
    ...
  </kendo-grid>
</ng-scrollbar>

.k-height-container {
  position: absolute !important;
}

Here is a working stackblitz

[iambwayne]

Murhaf,

WOW..... Holiday weekend and you respond in hours.... Take my money. Where can I donate?

One minor detail I noticed. When you grab the thumb and scroll all the way down to the bottom it keeps scrolling a bit and you lose the thumb and it seems to not bring into view the last record. You can get it back by using the scroll wheel to bring it back into view. Any ideas?

Thank you again for the quick response. You rock!

Also, once we get this working as expected, I suggest adding it to the list of examples. I have worked with several companies that use Telerik controls. It could be useful.

[MurhafSousli]

@iambwayne lol, I usually find the time to maintain the open source projects on the weekends 😄. You can use the sponsor button on the repo and be my first Github sponsor, or make a one time donation if you like!

Regarding that issue, there seem to be a problem with the virtual scroll calculation in the component you're using!

You set [rowHeight]="36" but the height rendered is actually 44.89px for each row, which was caused by the 12px padding applied by the theme, this means the virtual scroll is not working properly.

I looked at the original docs, their demo is using another theme default-ocean-blue.css where it uses 8px padding, rendered height is now 36px and everything worked as expected, see fixed stackblitz.

---

I realized that the horizontal scrollbar is not displayed, because KendoUI doesn't set the spacer width, in this case we should manually update the spacer width to match the content width.

<ng-scrollbar externalViewport=".k-grid-content"
              externalContentWrapper=".k-grid-table"
              externalSpacer=".k-height-container > div"
              asyncDetection
              (afterInit)="afterScrollbarInit()">

afterScrollbarInit() {
  const spacerELement: HTMLElement = document.querySelector('.k-height-container > div');
  const contentElement: HTMLElement = document.querySelector('.k-grid-table');

  spacerELement.style.width = `${ contentElement.clientWidth }px`
}

If vertical and horizontal virtual scroll is used together only one direction would work because Kendu UI uses a separate spacer element for the horizontal virtual scroll.