CODEWITHSUNDEEP
angularangular6ag-gridag-grid-angular
user1298426
user1298426

Reputation: 3717

How to add pop up on ag-grid data in angular 6?

I have a model which has answers as array of strings.

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

In component I am setting up data to show on UI.

...

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

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

and on 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>

The data is shown correctly but I don't want to show answers on the same grid but on pop up window where they can change answers or add answers which altogether can be different component. How to show pop up window on some button click on ag-grid?

Upvotes: 0

Views: 11991

Answers (3)

Anton Skybun
Anton Skybun

Reputation: 1649

You can use Cellrenderer form make column witch have button or icon and add a method for click on button/icon.Than you can use this method for open dialog. Than you can reusable your cell renderer. And you can also pass data to popup from selected row. Some links for info: https://www.ag-grid.com/javascript-grid-cell-rendering-components/ Here you can find how use different solution of cell renderer.

If you wanna make your own cell renderer you can use:

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

You can use methodFromParent to use by click on your own cellRenderer. you can use like this in you parent.

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

Than you must use [frameworkComponents]="frameworkComponents" in you html tag ag-grid-angular And you must to add property to your component.ts file :

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

And than you can use in your columnDefs:

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

Upvotes: 3

ResolveError
ResolveError

Reputation: 155

try this

 onRowClicked(event) {

    this.dialog.open(CommentsComponent);
  }

Upvotes: 0

user1298426
user1298426

Reputation: 3717

We can add a function (rowClicked)="openDialog()" in <ag-grid-angular> tab which will call openDialog method in component. Here we can write a code to open dialog box.

Upvotes: 0

Related Questions