如何在 Angular4 中的 Kendo Grid 中实现 Kendo Autocomplete答案

【问题标题】：How to implement Kendo Autocomplete inside Kendo Grid in Angular4如何在 Angular4 中的 Kendo Grid 中实现 Kendo Autocomplete
【发布时间】：2018-04-02 19:27:00
【问题描述】：

我目前正在为我的项目使用 Angular 4。我有一个剑道网格，其中一列显示剑道自动完成功能。我有以下代码，但由于某种原因，它无法识别 Kendo 自动完成功能。当我单击添加新项目时，它会在运行应用程序时显示为常规输入文本框。

   <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/ 的示例，但找不到任何更有用的信息。关于如何在剑道网格内使用剑道自动完成功能，有人能指出我正确的方向吗？

【问题讨论】：

标签： angular kendo-ui kendo-grid angular2-template

【解决方案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>

【讨论】：