Question

当表的第一列中有一个元素并且我编辑一行时，焦点将移至错误的位置。

我正在使用剑道网格。我在第一栏中有一个带有按钮的表格，只有在满足某些条件时才会显示该表格。在第二行中，有一个我要编辑的文本。第三行中有一个编辑按钮。如果按编辑按钮，并且第一列为空，则焦点将移至第二列，其中包含已编辑的文本。如果第一列不为空，则当我按下“编辑”按钮时，焦点将移至“第一”按钮，而实际的编辑文本未聚焦。

我见过here，有一种叫做focus的方法，但我不知道如何使用它，也找不到任何示例。

我也看到了类似的问题here，但这是针对jQuery的，而不是针对Angular的。

（非常简化的）代码如下：

   <kendo-grid-column>
      <!--Column 1: Button, depending on some condition-->
      <ng-template kendoGridCellTemplate>
        <button *ngIf="someCondition">HELLO</button>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column>
      <!--Column 2: Editable -->
      <ng-template kendoGridCellTemplate>
        <span>whatever</span>
      </ng-template>
      <ng-template kendoGridEditTemplate>
        <input [formControl]="formGroup.get('field')">
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column>
      <!--Column 3: Edit button-->
      <ng-template kendoGridCellTemplate>
        <button kendoGridEditCommand type="button">Edit</button>
      </ng-template>
    </kendo-grid-column>

我希望在按下编辑按钮时始终将第二列聚焦。非常感谢你！

Answer 1

在此kendo demo的帮助下，我实现了您要实现的目标，它建议您需要使用settimeout专注于所需的输入。

import { Observable } from 'rxjs/Observable';
import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { GridDataResult } from '@progress/kendo-angular-grid';
import { State, process } from '@progress/kendo-data-query';

import { Product } from './model';
import { EditService } from './edit.service';

import { map } from 'rxjs/operators/map';

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid
          [data]="view | async"
          [height]="533"
          [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
          [pageable]="true" [sortable]="true"
          (dataStateChange)="onStateChange($event)"
          (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
          (save)="saveHandler($event)" (remove)="removeHandler($event)"
          (add)="addHandler($event)"
          [navigable]="true"
        >
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
        </ng-template>
         <kendo-grid-column>
                <ng-template kendoGridCellTemplate let-dataItem>
                    <button *ngIf="dataItem.UnitPrice%2==0" kendoGridFocusable >HELLO</button>
                </ng-template>
            </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" editor="numeric" title="Price"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" editor="numeric" title="Units In Stock"></kendo-grid-column>
        <kendo-grid-command-column title="command" width="220">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
                <button kendoGridEditCommand [primary]="true">Edit</button>
                <button kendoGridRemoveCommand>Remove</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>
  `
})
export class AppComponent implements OnInit {
    public view: Observable<GridDataResult>;
    public gridState: State = {
        sort: [],
        skip: 0,
        take: 10
    };
    public formGroup: FormGroup;

    private editService: EditService;
    private editedRowIndex: number;

    constructor(@Inject(EditService) editServiceFactory: any) {
        this.editService = editServiceFactory();
    }

    public ngOnInit(): void {
        this.view = this.editService.pipe(map(data => process(data, this.gridState)));

        this.editService.read();
    }

    public onStateChange(state: State) {
        this.gridState = state;

        this.editService.read();
    }

    public addHandler({sender}) {
        this.closeEditor(sender);

        this.formGroup = new FormGroup({
            'ProductID': new FormControl(),
            'ProductName': new FormControl('', Validators.required),
            'UnitPrice': new FormControl(0),
            'UnitsInStock': new FormControl('', Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])),
            'Discontinued': new FormControl(false)
        });

        sender.addRow(this.formGroup);
    }

    public editHandler({sender, rowIndex, dataItem}) {
        this.closeEditor(sender);

        this.formGroup = new FormGroup({
            'ProductID': new FormControl(dataItem.ProductID),
            'ProductName': new FormControl(dataItem.ProductName, Validators.required),
            'UnitPrice': new FormControl(dataItem.UnitPrice),
            'UnitsInStock': new FormControl(
                    dataItem.UnitsInStock,
                    Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])),
            'Discontinued': new FormControl(dataItem.Discontinued)
        });

        this.editedRowIndex = rowIndex;

        sender.editRow(rowIndex, this.formGroup);
        setTimeout(() => {
          (<HTMLElement>document.querySelector(`.k-grid-edit-row > td:nth-child(${2}) input`))
              .focus();
        });
    }

    public cancelHandler({sender, rowIndex}) {
        this.closeEditor(sender, rowIndex);
    }

    public saveHandler({sender, rowIndex, formGroup, isNew}) {
        const product: Product = formGroup.value;

        this.editService.save(product, isNew);

        sender.closeRow(rowIndex);
    }

    public removeHandler({dataItem}) {
        this.editService.remove(dataItem);
    }

    private closeEditor(grid, rowIndex = this.editedRowIndex) {
        grid.closeRow(rowIndex);
        this.editedRowIndex = undefined;
        this.formGroup = undefined;
    }
}

此外，还请阅读有关focusable directive

的信息

编辑行时如何聚焦于特定单元格

1 个答案: