Angular中如何在Kendo Grid列选择器旁添加自定义标签

要实现点击自定义标签也能触发列选择器弹窗，你可以通过模板引用变量调用列选择器组件的toggle()方法来实现，具体步骤如下：

• 给kendo-grid-column-chooser添加模板引用变量，比如#columnChooser
• 添加自定义标签（如“选择列”），并给标签绑定点击事件，调用columnChooser.toggle()
• 可根据需求调整样式，让图标和标签显示为一组

修改后的代码示例：

@Component({
    selector: 'my-app',
    template: `
      <kendo-grid [data]="data">
         <ng-template kendoGridToolbarTemplate>
            <!-- 自定义标签 + 列选择器，绑定点击事件 -->
            <div style="display: inline-flex; align-items: center; cursor: pointer;" (click)="columnChooser.toggle()">
                <span style="margin-right: 8px;">选择列</span>
                <kendo-grid-column-chooser #columnChooser></kendo-grid-column-chooser>
            </div>
         </ng-template>
         <kendo-grid-column field="Field1"></kendo-grid-column>
         <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
      </kendo-grid>
    `
})

class AppComponent {
    public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
}

原理说明 #

kendo-grid-column-chooser组件内置了toggle()方法，用于手动切换列选择器弹窗的显示/隐藏状态。通过模板引用变量#columnChooser获取组件实例后，点击标签时调用该方法，就能实现和点击图标一样的触发效果。

你还可以根据项目的UI规范，调整外层容器的样式（比如去掉inline样式，改用CSS类），让标签和图标更贴合设计需求。

内容的提问来源于stack exchange，提问作者Anita Ghising