如何向每列添加搜索框

Question

我正在使用kendo gird创建一个表。如何在每个列中添加一个搜索框？

  <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)">

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>

More information and examples can be seen in Kendo UI for Angular.