Question

我目前正在为我的项目使用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自动完成功能，有人可以指出我正确的方向。

Answer 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>

如何在Angular4中实现Kendo Grid内部的Kendo自动完成功能

1 个答案: