angular - 如何在每列中添加搜索框

Question

我正在使用剑道网格创建一个表格。如何为每列添加一个搜索框？

  <kendo-grid class="k-grid-p" [data]="gridView" [pageable]="true" [pageSize]="gridState.pageSize"
    (pageChange)="pageChange($event)" [skip]="gridState.state.skip" [sortable]="true" [sort]="gridState.state.sort"
    (sortChange)="sortChange($event)">

标签： angularkendo-ui-angular2

Answer 1

您可以使用kendoGridHeaderTemplate将所需的 HTML 添加到标题中：

<kendo-grid [data]="yourData">
    <kendo-grid-column field="FirstName">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
             {{column.field}}({{columnIndex}}) 
             <br>
             <input type="text" placeholder="Search Box">
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="LastName">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
           {{column.field}}({{columnIndex}})
           <br>
           <input type="text" placeholder="Search Box">
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

更多信息和示例可以在 Kendo UI for Angular 中看到。