Как добавить всплывающее окно на ag-grid данных в angular 6?

Question

У меня есть модель, у которой есть ответы в виде массива строк.

export class answer {
question:string;
...
answers: [];
}

В компоненте я настраиваю данные для отображения в пользовательском интерфейсе.

...

        this.subscription = this.httpService.getAnswers().subscribe(answers => {this.rowData=answers;});
...

columnDefs = [
{headerName: 'question', field: 'question'
},
...
{headerName: 'Answer', field: 'answers'
}
];

и по html

<ag-grid-angular
  style="width: 800px; height: 100%;"
  class="ag-theme-balham"
  [enableSorting]="true"
  [pagination]="true"
  [enableFilter]="true"
  [rowData]="rowData"
  [columnDefs]="columnDefs">
</ag-grid-angular>

Данные отображаются правильно, но я не хочу показывать ответы в той же таблице, но во всплывающем окне, где они могут изменить ответы или добавить ответы, которые в целом могут быть другой компонент. Как показать всплывающее окно при нажатии какой-либо кнопки на ag-grid?

Answer 1

Вы можете использовать форму Cellrenderer, чтобы сделать столбец с кнопкой или значком и добавить метод для нажатия кнопки / значка. Затем вы можете использовать этот метод для открытия диалога. Чем вы можете повторно использовать ваш рендерер клеток. И вы также можете передавать данные во всплывающее окно из выбранной строки. Некоторые ссылки для информации: https://www.ag -grid.com / javascript-grid-cell-render-components / Здесь вы можете найти, как использовать различные решения рендерера клеток.

Если вы хотите создать свой собственный рендерер ячеек, вы можете использовать:

    import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
    selector: 'child-cell',
    template: `<span><button style="height: 20px" (click)="invokeParentMethod()" class="btn btn-info">Invoke Parent</button></span>`,
    styles: [
        `.btn {
            line-height: 0.5
        }`
    ]
})
export class ChildMessageRenderer implements ICellRendererAngularComp {
    public params: any;

    agInit(params: any): void {
        this.params = params;
    }

    public invokeParentMethod() {
        this.params.context.componentParent.methodFromParent(`Row: ${this.params.node.rowIndex}, Col: ${this.params.colDef.headerName}`)
    }

    refresh(): boolean {
        return false;
    }
}

Вы можете использовать methodFromParent, нажав на свой собственный cellRenderer. Вы можете использовать это в родительском.

    methodFromParent(rowIndex) {
    console.log(row);
    this.openMydialogPopUp();
}

Чем вы должны использовать [frameworkComponents]="frameworkComponents" в своем HTML-теге ag-grid-angular И вы должны добавить свойство в ваш файл component.ts:

    this.frameworkComponents = {
  yourOwnNameOfCellRender: nameOfCellRenderComponent(ChildMessageRenderer for this example),
};

А чем вы можете воспользоваться в своей колонке Defes:

this.columnDefs = [
  {
    headerName: "HeaderName",
    field: "value",
    cellRenderer: "yourOwnNameOfCellRender",
  }
];

Answer 2

Мы можем добавить функцию (rowClicked)="openDialog()" на вкладке <ag-grid-angular>, которая будет вызывать метод openDialog в компоненте. Здесь мы можем написать код для открытия диалогового окна.