typescript - Angular 6 ag-grid cell renderer click function

typescript – Angular 6 ag-grid cell renderer click function

typescript – Angular 6 ag-grid cell renderer click function

I use cellRenderFramework:

    {
    headerName: , width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: {
      icon: fa-download,
      action: this.downloadAttachmentAction
    }
  }

and than I have custom Component

@Component({
  selector: cu-download-link-cell-renderer,
  template: `
  <div class=text-center>
    <i class=fa {{params.icon}} (click)=onClick() aria-hidden=true></i>
  </div>`
})
export class ActionCellRendererComponent {

    params;

    constructor() {
    }

    agInit(params): void {
        this.params = params;
        if (_.isNil(params.action)) {
            throw new Error(Missing action parameter for ActionCellRendererComponent);
       }
   }

   onClick(): void {
       this.params.action(this.params);
   }
}

export type CellAction = (params) => void;

Use cellRendererFramework to add action Buttons.

App.component.ts

columnDefs = [
  { headerName: First Name, field: firstName, sortable: true, filter: true },
  { headerName: Last Name, field: lastName, sortable: true, filter: true },
  { headerName: Email, field: email, sortable: true, filter: true },
  { headerName: User Name, field: userIdName, sortable: true, filter: true },
  { headerName: Role, field: role, sortable: true, filter: true },
  { headerName: Actions, field: action, cellRendererFramework: CellCustomComponent }];

rowData: any;

ngOnInit() {
  const empDatas = localStorage.getItem(user);
  const finalData = JSON.parse(this.empDatas);
  this.rowData = this.finalData;
}

In the above code, we can see CellCustomComponent. Create that component & add the buttons.

cell-custom.component.html

<button type=button class=btn-success (click)=editRow()>Edit</button>
<button type=button class=btn-success (click)=viewRow()>View</button>

Now in the cell-custom.component.ts add the functions

cell-custom.component.ts

export class CellCustomComponent implements OnInit {
  data: any;
  params: any;
  constructor(private http: HttpClient, private router: Router) {}

  agInit(params) {
    this.params = params;
    this.data = params.value;
  }

  ngOnInit() {}

  editRow() {
    let rowData = this.params;
    let i = rowData.rowIndex;
    console.log(rowData);
  }

  viewRow() {
    let rowData = this.params;
    console.log(rowData);
  }
}

After this we need to add this component in App.module.ts

app.Module.ts

@NgModule({
  declarations: [AppComponent, CellCustomComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([AppComponent])
  ],
  providers: [],
  entryComponents: [CellCustomComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now we can trigger a method in the component file using Button.

Ag-Grid

typescript – Angular 6 ag-grid cell renderer click function

Yes, use the cellRendererFramework to handle the rendering.

In your columnDefs:

this.columnDefs = [
  {
    headerName: Header Name, field: field,
    cellRendererFramework: ColRenderer,
    cellRendererParams: { context: this },
    sortable: true, filter: true
  },
  ...
 ];

Then in your ColRenderer:

@Component({
  template: `<a (click)=clickHandler(rowData)>{{rowData.Member}}</a>`
})
export class ColRenderer implements ICellRenderer {
  public rowData: any;
  private params: any;

  public agInit(params: { data: any, context: any }) {
    this.rowData= params.data;
    this.params = params;
  };

  public clickHandler(data: any) {
    this.params.context.onEditClick(data);
  }
  ...
}

Change the names above obviously as needed. Just know the context is the key. You pass the context of your component to the renderer then use that context to call the function you want on click within your renderer.

Related posts on typescript :

Leave a Reply

Your email address will not be published.