Ag-grid。将弹出窗口更改为CellEditor

时间:2019-09-16 15:18:39

标签: angular typescript ag-grid

当我单击下拉组件时,它会弹出网格。

popout

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;
  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public selected;
  value: any;
  oldValue: any;
  params: any;

  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}
  public container;

  refresh(params: ICellEditorParams) {
    params;
    return true;
  }

  getValue(): any {
    console.log('getValue', this.value);
    if (this.value === '') {
      this.value = this.oldValue;
    }
    return this.value;
  }
  // use isPopup() method to avoid the dropdown sitting behind the grid
  isPopup(): boolean {
    return false;
  }
  setSelected(selected): void {
    this.value = selected;
  }
  onClick(selected: boolean) {
    this.setSelected(selected);
    this.params.api.stopEditing();
  }
  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }
  ngOnInit() {
    this.myForm = this.builder.group({
      costCenter: ''
    });
  }

  // dropdown
  autocompleListFormatter = (data: any) => {
    let html = `<span>${data.name} </span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };
}

dropdown.component.html

<form [formGroup]="myForm">
  <input
    type="text"
    class="form-control"
    minlength="3"
    maxlength="30"
    autofocus
    ngui-auto-complete
    formControlName="costCenter"
    [source]="dropdownData"
    [list-formatter]="autocompleListFormatter"
    value-property-name="id"
    display-property-name="name"
    placeholder="Search"
    [(ngModel)]="value"

  />
</form>

我希望它成为一个CellEditor(不弹出)

在阅读Ag-grid documentation时,我应该添加:

  isPopup(): boolean {
    return false;
  }

但是,当我这样做时,我的下拉菜单位于网格后面,而我不再看到它。

是否可以将下拉菜单更改为CellEditor而不将其隐藏在网格后面?

0 个答案:

没有答案