我目前正在为我的项目使用Angular 4。我有一个Kendo网格,其中一列显示Kendo自动完成。我有以下代码,但由于某种原因,它无法识别Kendo自动完成。当我点击Add New Item时,它会在运行应用程序时显示为常规输入文本框。
<kendo-grid [data]="gridView"
[pageSize]="pageSize"
(cancel)="cancelHandler($event)"
(add)="addHandler($event)">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand>Add New Item</button>
</ng-template>
<kendo-grid-column field="ListItem" title="List Item">
<kendo-autocomplete [data]="listItems"
[placeholder]="'e.g. Milk'"
[(ngModel)]="ListItem" [ngModelOptions]="
{standalone: true}"
(valueChange)="valueChange($event)"
(filterChange)="lookUpPractitioners($event)">
<ng-template kendoAutoCompleteItemTemplate let-dataItem>
</ng-template>
</kendo-autocomplete>
</kendo-grid-column>
<kendo-grid-column field="Service" title="Service"></kendo-grid-column>
<kendo-grid-command-column width="220">
<ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
<button kendoGridEditCommand class="k-primary">Edit</button>
<button kendoGridRemoveCommand [class.k-primary]="!dataItem.IsActive ">{{dataItem.IsActive ? 'Deactivate' : 'Reactivate' }}</button>
<button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
我在https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates/查看了示例,但我找不到更有用的信息。对于如何在Kendo网格中使用Kendo自动完成功能,有人可以指出我正确的方向。
答案 0 :(得分:1)
您必须将kendo-autocomplete
包装到kendoGridCellTemplate
中:
<kendo-grid [data]="gridView"
[pageSize]="pageSize"
(cancel)="cancelHandler($event)"
(add)="addHandler($event)">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand>Add New Item</button>
</ng-template>
<kendo-grid-column field="ListItem" title="List Item">
<ng-template kendoGridCellTemplate let-dataItem>
<kendo-autocomplete
[data]="listItems"
[placeholder]="'e.g. Milk'"
[(ngModel)]="ListItem" [ngModelOptions]="
{standalone: true}"
(valueChange)="valueChange($event)"
(filterChange)="lookUpPractitioners($event)">
<ng-template kendoAutoCompleteItemTemplate let-autocomplete>
</ng-template>
</kendo-autocomplete>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Service" title="Service"></kendo-grid-column>
<kendo-grid-command-column width="220">
<ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
<button kendoGridEditCommand class="k-primary">Edit</button>
<button kendoGridRemoveCommand [class.k-primary]="!dataItem.IsActive ">{{dataItem.IsActive ? 'Deactivate' : 'Reactivate' }}</button>
<button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>