启用垂直滚动时，Kendo 网格标题未对齐

Question

我在我的剑道网格上注意到这一点已经有一段时间了。我在 SO 或 Telerik 支持论坛上找不到任何相关信息，所以我想我只想看看是否其他人也有同样的问题。

基本上，如果我将 Kendo Grid 设置为垂直滚动，则网格的标题列将按网格主体中出现的滚动条的宽度进行偏移。

我不确定这是否是我在某个地方遇到的 CSS 冲突，或者这是否正是 Kendo 想要的方式（虽然看起来不太正确）。

这是我所指内容的屏幕截图：

Answer 1

正如我所料，是 CSS 样式导致了这个问题。

有人在某个时候覆盖了默认的

.kendo-grid-header

类，并给了它

padding-right

的

0px

而不是默认的

17px

。

将其更改回来，现在它按我的预期显示。

Answer 2

非常感谢您的回答！虽然它对我最新版本的kendo-grid不起作用，但这就是我能够在最新版本中找到答案的原因。

我们覆盖了默认的

.k-grid-header

类。检查 HTML，我们发现最新版本的填充为

0px 16px 0px 0px

。

Answer 3

启用垂直滚动时，我遇到了 Kendo Grid 标题的对齐问题。我使用自定义 Angular 指令根据滚动条的存在动态调整网格标题样式解决了这个问题。

这是我创建的指令：

    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');
      }
    });
  }
}

用途：

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

该指令检查网格内容中是否存在垂直滚动条，如果存在，则向标题添加填充以正确对齐。超时用于确保在应用样式之前网格内容已完全渲染。

这个解决方案解决了我的标题未对齐问题。