Question

我创建了一个kendo网格组件，该组件在每次按键时都失去对过滤器文本字段的关注。我的组件如下所示-

input

代码文件是-

    <kendo-grid [data]="getKendoRecords()"
                [skip]="kendoGridPageDataSkip"
                [pageable]="true"
                [pageSize]="getPageSize(options)"
                [navigable]="true"
                [resizable]="true"
                [filterable]="true"
                [filter]="filter"
                [selectable]="{enabled: true, checkboxOnly: true }"
                [kendoGridSelectBy]="'record'"
                [selectedKeys]="kendoSelectedItems"
                (cellClick)="gridCellClick($event)"
                (selectedKeysChange)="onSelectedKeysChange($event)"
                (pageChange)="kendoPageChange($event)"
                (filterChange)="applyFilter($event)"
                >
      <kendo-grid-checkbox-column *ngIf="hasCheckbox()" width="45" showSelectAll="true" [resizable]="false">
        <ng-template kendoGridHeaderTemplate>
          <input class="k-checkbox" id="{{'selectAllCheckboxId_' + options.listId}}" kendoGridSelectAllCheckbox
                 [state]="selectAllState" [disabled]="isReadOnly()"
                 (selectAllChange)="onSelectAllChange($event)">
          <label class="k-checkbox-label" for="{{'selectAllCheckboxId_' + options.listId}}"></label>
        </ng-template>
      </kendo-grid-checkbox-column>
      <kendo-grid-column *ngFor="let property of selectedView.properties" 
                         field="{{getKendoFieldName(property.propertyName)}}"
                         title="{{getKendoFieldName(property.propertyLabel)}}"
                         [filterable]="isSearchableProperty(property, options)"
                         [minResizableWidth]="30">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false" operator="contains">
            <kendo-filter-contains-operator></kendo-filter-contains-operator>
          </kendo-grid-string-filter-cell>
        </ng-template>
         <ng-template kendoGridHeaderTemplate>
           {{property.propertyLabel}}
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)=='date'" kendoGridCellTemplate let-dataItem>
           {{getKendoRecordValue(property, dataItem) | date:formatDate()}}
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)=='time'" kendoGridCellTemplate let-dataItem>
           {{getKendoRecordValue(property, dataItem) | time:formatTime()}}
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)=='boolean'" kendoGridCellTemplate let-dataItem>
           <input class="k-checkbox" type="checkbox" [checked]="getKendoRecordValue(property, dataItem)" [disabled]="true" />
           <label class="k-checkbox-label"></label>
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)!='date' && getKendoEditorType(property)!='boolean'" kendoGridCellTemplate let-dataItem>
           {{getKendoRecordValue(property, dataItem)}}
         </ng-template>
       </kendo-grid-column>
       <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
         <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
         <kendo-pager-info></kendo-pager-info>
         <kendo-pager-next-buttons></kendo-pager-next-buttons>
         <kendo-pager-page-sizes *ngIf="options.displayPageSizeSelector" [pageSizes]="pageSizeOptions"></kendo-pager-page-sizes>
       </ng-template>
    </kendo-grid>

一切正常，但每次按键时焦点都从过滤器文本框中丢失。过滤时，系统将返回服务器并获取过滤的数据。

我的第一个目标是将注意力集中在过滤器字段上，以便用户可以继续输入。

第二个目标是不要在每次按键时都转到服务器，而是在用户按下Enter或Tab键或输入字段失去焦点时调用服务器。

请随时询问是否需要进一步说明。

Answer 1

好的。在这种情况下，我有一种解决方法。万一有帮助的人。

我用KeyDown代替了KeyPress。

.ts文件中的更改也很少-

使用的keydownfilter事件-

keyDownOnFilter(event: any) {
  if (event && (event.keyCode === 9 || event.keyCode === 13)) {
    this.filterGrid();
  }
}

filterGrid() {
  this.onListFilterSearch();
}

从applyFilter方法中删除了onListFilterSearch命令，因为我不需要在每个keydown上进行过滤..仅当按下Tab或Enter时，网格才会过滤数据。

谢谢

角度2的kendo网格-按键上的滤镜输入失去焦点

1 个答案: