Question

我正在定义一个网格，其中我使用cellRenderer在其中的一列中显示一个。虽然一切正常，但我想在其中添加功能，如果用户在该单元格上导航/焦点（由此列定义）并按ENTER，则光标/焦点应使输入文本可编辑。我对angular / 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”定义的单元格并按Enter时，我希望光标/焦点位于输入文本字段上。如果我通过添加使列可编辑

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

任何帮助实现这一目标的方法都会很有帮助

Answer 1

您似乎需要使用ICellEditorAngularComp来编辑ICellRendererAngularComp。
启用editable: true中的ColDef进行编辑。

testField: ColDef = {
  headerName: 'testField',
  field: ' testField',
  cellEditorFramework: inputCellRenderer,
  editable: true
}

参考：Angular Editor Components

@ViewChild('inputText') textField: ElementRef;

在编辑器组件的afterGuiAttached功能中以编程方式设置焦点。

  afterGuiAttached?(params?: IAfterGuiAttachedParams): void {
      this.textField.nativeElement.select();
  }

第三步，将键盘焦点设置到文本框。

将KeyPress / Enter事件从列传递到单元格渲染器

1 个答案: