Передача события KeyPress / Enter из столбца в средство визуализации ячеек - PullRequest
Новая
       16

Передача события KeyPress / Enter из столбца в средство визуализации ячеек

0 голосов
/ 18 апреля 2019

Я определяю сетку, в которой для одного из столбцов я использую cellRenderer для отображения. Хотя все работает нормально, я хотел бы добавить функциональность, когда пользователь перемещается / фокусируется на этой ячейке (определенной в этом столбце) и нажимает ENTER, курсор / фокус должен сделать вводимый текст редактируемым. Мои знания угловых / ag-grid очень просты, поэтому, пожалуйста, извините, если есть какие-либо фундаментальные недостатки.

Вот мой colDef 

testField : ColDef {
    headerName: 'testField',
    field: ' testField',
    cellRenderer: 'inputCellRenderer'
}

InputCellRenderer.ts 

@Component({
    selector: 'app-input-field',
    template: '<mat-form-field>
                 <input mat-input type="text" [(ngModel)]="model" [(ngModelChange)}="HandleChange()">{{model}}</input>
               </mat-form-field>
})

export InputRenderer extends ICellRendererAngularComp {
    public model:string;

    refresh(params : any): void {
       // refresh logic
    }

    agInit(params : any) : void {
       // initialize "model"
    }

    HandleChange(): void {
        // handle model change logic
    }
}

Когда пользователь фокусируется на ячейке, определенной параметром «testField», и нажимает клавишу ВВОД, я хочу, чтобы курсор / фокус находились в поле ввода текста. Если я сделаю столбец редактируемым, добавив 

   editable: true

это не помогает, так как не передает изменение состояния отображаемому компоненту.

Мне нужно сделать что-то подобное в InputRenderer, чтобы включить фокус 

@Component({
    selector: 'app-input-field',
    template: '<mat-form-field>
                 <input #inputText mat-input type="text" [(ngModel)]="model" [(ngModelChange)}="HandleChange()">{{model}}</input>
               </mat-form-field>
})

export InputRenderer extends ICellRendererAngularComp {
    public model:string;
    @ViewChild('inputText') textField : ElementRef

     /* I THINK THIS NEEDS TO BE CALLED AS A CALLBACK FROM THE GRID CELL. GRID CELL SHOULD LISTEN to KEYPRESS/ENTER events and call this */
    focusCallBack() {
       this.textField.nativeElement.focus()
    }

    refresh(params : any): void {
       // refresh logic
    }

    agInit(params : any) : void {
       // initialize "model"
    }

    HandleChange(): void {
        // handle model change logic
    }
}

Любая помощь в достижении этого будет очень полезна

1 Ответ

1 голос
/ 18 апреля 2019
  1. Вам нужно использовать ICellEditorAngularComp для редактирования, хотя кажется, что вы используете ICellRendererAngularComp.
  2. Включить редактирование с помощью editable: true в ColDef. 
testField: ColDef = {
  headerName: 'testField',
  field: ' testField',
  cellEditorFramework: inputCellRenderer,
  editable: true
}

Ссылка: Компоненты углового редактора 

@ViewChild('inputText') textField: ElementRef;
  1. Установите фокус программно в функции afterGuiAttached компонента редактора. 
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void {
      this.textField.nativeElement.select();
  }

Третий шаг установит фокус клавиатуры на текстовое поле.

...