如何在kendo-grid-column-group与kendo-grid-column之间添加文本框？

我有一个Kendo Grid的列组，下面包含两列，想要在列组标题和子列之间添加一个输入框（类似Excel中列组下方、子列上方的位置）。尝试在第一个<kendo-grid-column>标签前直接放置输入框或使用ng-template，但都没生效。

当前代码如下：

<kendo-grid-column-group title="column group">
  <!-- TEXTBOX HERE     
  <input kendoTextBox [formControl]="formControlGroup" />  
  -->
  <kendo-grid-column title="column A">
    <ng-template kendoGridTemplate let-rowData>
      <div #textboxa>
        <input kendoTextBox [formControl]="formControlA" />
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column title="column B">
    <ng-template kendoGridTemplate let-rowData>
      <div #textboxb>
        <input kendoTextBox [formControl]="formControlB" />
      </div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid-column-group>

解决方法 #

Kendo Grid的<kendo-grid-column-group>不支持直接在标题和子列间插入自定义内容，需要通过**列组的头部模板（kendoGridHeaderTemplate）**来实现，把标题和输入框整合到模板中，再用CSS调整布局：

修改后的代码

<kendo-grid-column-group>
  <!-- 自定义列组头部模板，包含标题和输入框 -->
  <ng-template kendoGridHeaderTemplate>
    <div class="group-header">
      <div>column group</div>
      <input kendoTextBox [formControl]="formControlGroup" />
    </div>
  </ng-template>

  <kendo-grid-column title="column A">
    <ng-template kendoGridTemplate let-rowData>
      <div #textboxa>
        <input kendoTextBox [formControl]="formControlA" />
      </div>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column title="column B">
    <ng-template kendoGridTemplate let-rowData>
      <div #textboxb>
        <input kendoTextBox [formControl]="formControlB" />
      </div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid-column-group>

配套CSS样式

添加样式让输入框占满列组宽度，和子列对齐：

.group-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.group-header input {
  margin-top: 4px;
}

原理：直接在列组内放置输入框会被组件忽略，因为列组只识别子列和特定模板。通过自定义头部模板，将标题和输入框放在同一个垂直容器中，就能实现想要的布局效果。

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