为什么我不能在 Angular 的剑道网格中单击列菜单按钮？答案

【问题标题】：Why can't I invoke click on the column menu button in kendo grid for Angular?为什么我不能在 Angular 的剑道网格中单击列菜单按钮？
【发布时间】：2021-09-24 06:56:13
【问题描述】：

我不确定这是否是 Angular 的 Kendo 网格中的列菜单存在问题，或者我只是调用了错误的按钮元素。

我们要做的是将列菜单按钮从网格的顶部移到列标题行中，如下所示：

在使用 Kendo Grid for Angular 寻找一种方法但一无所获后，我决定创建自己的按钮，将其位置设置为绝对位置，并将其位置设置为我们想要的位置（就像上图一样）。然后我的按钮的单击事件处理程序将找到原始网格按钮并在其上调用 click()。我向上帝发誓，我之前有它的工作，但现在它根本不工作。

这是我的代码：

HTML：

    <div class="mtx-col-menu-btn" (click)="columnMenuButtonClick()">
      <div></div>
      <div></div>
      <div></div>
    </div>
    
    ...
    
    <ng-template kendoGridToolbarTemplate>
      <kendo-grid-column-chooser id="columnChooser"></kendo-grid-column-chooser>
    </ng-template>

CSS：

.mtx-col-menu-btn {
    position: absolute;
    top: 73px;
    left: 20px;
    width: 24px;
    height: 24px;
    border: 1px solid black;
    z-index: 10;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    div {
        height: 13px;
        width: 4px;
        background-color: black;
    }
}

打字稿：

  public columnMenuButtonClick(): void {
    const columnMenuButton = document.querySelector('#columnChooser button');
    (columnMenuButton as HTMLElement).click();
  }

单击事件没有以正确的方式（或根本没有）显示列选择器，或者这是在 Typescript/Javascript 中调用按钮单击的错误方式。这是一个简单的按钮元素，我认为在它上面调用 click() 不是问题。所以我怀疑列选择器的某些东西阻止了它的显示（比如它位于屏幕之外，或者 z-index 可能小于网格的 z-index）。

您可能还注意到我必须将按钮处理程序中的 columnMenuButton 转换为 HTMLElement，以便 Typescript 接受它具有 click() 处理程序。但我注意到，即使将其转换为 HTMLElement，当我将鼠标悬停在它上面时，也不存在 click() 方法。我不知道这是否只是 Chrome 开发工具的一个缺点（不会是第一次）还是按钮 HTMLElement 实际上没有 click() 方法（这不可能像我一样以前看过很多次）：

任何帮助将不胜感激。谢谢。

更新：

我发现列选择器确实会在调用 click() 时出现，但我必须在调用后立即设置断点。这样，应用程序就暂停了，我看到了：

然后当我走到下一行时，它就消失了。如果没有断点，我想这一切都发生在它可以被渲染之前。

【问题讨论】：

标签： angular typescript click kendo-grid invoke

【解决方案1】：

找到答案：单击新按钮意味着单击列菜单之外（或不在）列菜单上，该列菜单被处理为关闭菜单的触发器。因此，我将以编程方式打开菜单以响应按钮单击，然后单击事件将传播，并将其作为“单击菜单外”事件进行处理。关键是调用 event.stopPropagation()。

【讨论】：