CODEWITHSUNDEEP
kendo-uikendo-grid
Dev 404
Dev 404

Reputation: 1597

Kendo Grid Headings misaligned when vertical scrolling is enabled

I've noticed this for a while now on my Kendo Grids. I haven't been able to find anything on SO or the Telerik Support Forums about it so I figured I would just ask to see if anyone else has this same issue.

Basically, if I set my Kendo Grid to have vertical scrolling, the heading columns for my grid are then offset by the width of the scrollbar which appears in the grid body.

I'm not sure if this is a CSS conflict that I have somewhere or if this is just the way Kendo intends it to be (doesn't seem right though).

Here is a screenshot of what I'm referring to:

enter image description here

Upvotes: 1

Views: 3613

Answers (3)

MalithaRukshan
MalithaRukshan

Reputation: 31

I faced an alignment issue with Kendo Grid headers when vertical scrolling was enabled. I solved it using a custom Angular directive to dynamically adjust the grid header styles based on the presence of a scrollbar.

Here’s the directive I created:

    import { Directive, inject, Input, Renderer2 } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';

@Directive({
  selector: '[appGridStyle]',
  standalone: true
})
export class GridStyleDirective {

  @Input() set appGridStyle(value: boolean) {
    if (value) {
      this.applyDynamicStyles();
    }
  }

  private renderer = inject(Renderer2);
  private grid = inject(GridComponent);

  // This method ensures the proper alignment of the grid header when vertical scrolling is enabled.
  private applyDynamicStyles() {
    setTimeout(() => {
      const gridHeaderWrap = this.grid.wrapper.nativeElement.querySelector('.k-grid-header-wrap');
      const gridContent = this.grid.wrapper.nativeElement.querySelector('.k-grid-content');
      const isVerticalScrollbarVisible = gridContent.scrollHeight > gridContent.clientHeight;

      if (isVerticalScrollbarVisible) {
        // Apply styles if scrollbar is detected
        this.renderer.setStyle(gridHeaderWrap, 'padding-right', '18px');
        this.renderer.setStyle(gridHeaderWrap, 'background-color', '#fafafa');
      }
    });
  }
}

Usage:

<kendo-grid [appGridStyle]="true"></kendo-grid>

This directive checks if a vertical scrollbar is present in the grid content and, if so, adds padding to the header for proper alignment. The timeout is used to ensure that the grid content has fully rendered before applying the styles.

This solution resolved my header misalignment issues.

Upvotes: 0

Zion Orent
Zion Orent

Reputation: 21

Thank you so much for this answer! While it didn't work for me with the latest version of kendo-grid, it was the reason that I was able to find the answer in the latest version.

We were overwriting the default .k-grid-header class. Inspecting the HTML, we found that the latest version has the padding as 0px 16px 0px 0px.

Upvotes: 2

Dev 404
Dev 404

Reputation: 1597

As I expected, it was a CSS style that was causing this problem.

Someone at some point overrode the default .kendo-grid-header class and gave it a padding-right of 0px instead of the default 17px.

Changed it back and now it's displaying as I expect it to.

Upvotes: 3

Related Questions