web-dev-qa-db-fra.com

Cellule de rendu Ag-Grid avec clic de bouton

J'utilise un angular 5 avec une table de données ag-grid je ne peux pas déclencher un événement de clic à partir de la cellule en utilisant cellRenderer ici comment j'utilise ma ag-grid -> colDefs

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

si j'utilise onClick="alert("123")" -> cela fonctionne, mais je ne peux pas utiliser onClick="drop()" il jette une goutte d'indéfini,

j'ai essayé cela aussi à l'intérieur de cellRenderer -> params = params.$scope.drop = this.drop;

si j'utilise gridOptions avec angularCompileRows : true cela génère une erreur Cannot read property '$apply' of undefined. Dois-je installer ag-grid enterprise ??

javascripttypescriptangular5ag-gridag-grid-ng2
6
YuvaMac

Vous pouvez utiliser cellRenderer avec un composant bouton. Si vous voulez obtenir l'événement click sur le bouton de l'utilisateur sur la table, déclarez simplement la fonction de rappel que vous voulez cellRendererParams.

// app.component.ts
columnDefs = [
{
  headerName: 'Button Col 1',
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: 'Click'
  }
},
...
]

Le code ci-dessus n'est qu'une petite partie, consultez exemple complet sur Stackblitz

10
T4professor

Pour développer la réponse de @ T4professor, je publierai du code pour avoir également une étiquette dynamique sur ce bouton Click.

// Author: T4professor

import { Component, OnInit, AfterContentInit } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-button-renderer',
  template: `
    <button class="{{btnClass}}" type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {
    //https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src%2Fapp%2Fapp.component.ts
  params: any;
  label: string;
  getLabelFunction: any;
  btnClass: string;

  agInit(params: any): void {
    this.params = params;
    this.label = this.params.label || null;
    this.btnClass = this.params.btnClass || 'btn btn-primary';
    this.getLabelFunction = this.params.getLabelFunction;

    if(this.getLabelFunction && this.getLabelFunction instanceof Function)
    {
      console.log(this.params);
      this.label = this.getLabelFunction(params.data);
    }

  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(params);

    }
  }
}

Ensuite, dans le composant avec la grille, procédez comme suit:

columnDefs = [

    {
      headerName: 'Publish',
      cellRenderer: 'buttonRenderer',
      cellRendererParams: {
        onClick: this.onRowPublishBtnClick.bind(this),        
        label: 'Publish',
        getLabelFunction: this.getLabel.bind(this),
        btnClass: 'btn btn-primary btn-sm'
      }
    }  
]

onRowPublishBtnClick(e) {    
    this.rowDataClicked = e.rowData;
  }

  getLabel(rowData)
  {    
    console.log(rowData);
    if(rowData && rowData.hasIndicator)
      return 'Republish';
      else return 'Publish';
  }
1
Dragos Durlut

Vous rencontrez ce problème car vous invoquez drop () de manière incorrecte, vous devez le remplacer par this.drop ()

En général, vous devez utiliser la propriété cellRenderer avec une logique simple. Un moyen plus pratique pour le rendu logique complexe, vous devez utiliser cellRendererFramework: YourCustomRendererAngularComponent.

columnDefs = [
{
  headerName: 'Col Name',
  cellRendererFramwork: MyAngularRendererComponent, // RendererComponent suffix it is naming convention
  cellRendererParams: {
    onClick: (params) => this.click(params);  
  }
},
...
]

MyAngularRendererComponent devrait implémenter AgRendererComponent.

Aussi dans angular où vous utilisez MyAngualrRendererComponent n'oubliez pas de mettre ce code:

@NgModule({
 imports: [
   AgGridModule.withCompoennts([
      MyAngualrRendererComponent 
   ])
 ]
})
0
CREZi