Как сфокусироваться на конкретной ячейке при редактировании строки

Question

Когда в первом столбце таблицы есть элемент, и я редактирую строку, фокус переходит не туда.

Я использую сетку кендо.У меня есть таблица с кнопкой в ​​первом столбце, которая отображается только при соблюдении определенных условий.Во втором ряду есть текст, который я хочу отредактировать.В третьем ряду есть кнопка редактирования.Если я нажимаю кнопку редактирования и 1-й столбец становится пустым, фокус переходит на второй столбец с отредактированным текстом.Если первый столбец не пустой, когда я нажимаю кнопку редактирования, фокус переходит к 1-й кнопке, а фактический отредактированный текст не фокусируется.

Я видел здесь естьметод с именем focus, но я не знаю, как его использовать, и я не нашел ни одного примера.

Я также видел подобную проблему здесь , но это для jQuery, а не дляУгловой.

(Очень упрощенный) код выглядит следующим образом:

   <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;
    }
}

ДополнительноЧитайте также о фокусируемой директиве