How to conditionally enable/disable cell renderer in Ag-Grid?

问题

I am using ag-grid cell renderer and I have created a separate component for it. Based on some condition, I want to conditionally make the cell renderer component enable or disable.

{ headerName: 'Look up values', field: 'LOOKUP', editable: false, cellRenderer:'lookupRenderer'}

I want to enable/disable 'lookupRenderer' based on conditions.

回答1:

Inline cellRenderer should be used only for simple cases. To achieve button-click handling inside own cellRenderer you need to create component for that.

Your component would be like that:

@Component({
    selector: 'custom-button-cell',
    template: `<button [disabled]="!params.node.data.enableButton" (click)="handleClick()">{{params.value}}</button>`,
    styles: [``]
})

export class ConditionalRenderer implements ICellRendererAngularComp {
    private params: any;

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

    refresh(): boolean {
       return true;
    }

   handleClick() {
      alert(`Clicked: ${this.params.value}`);
   }
}

Here is worked plnkr

Don't forget, that your component should be included to frameworkComponents inside gridOptions or as [frameworkComponents] html attribute.

回答2:

I also had the same requirement and I achieved this via inline cell renderer

Code:

{ headerName: 'lookup',

    suppressMenu: true,
    width:130,
    suppressSorting: true, 
   cellRenderer: (params) => {

    const element = document.createElement('span');
    let buttonname;
    let template;
    if (params.data.USER_ROLE_END_DATE=='')
    {
      buttonname = 'Disable Role'
      template= `<button type="button" style="height: 25px;line-height: 0.5"data-action-type="Disablerole"  class="btn btn-outline-danger btn-xs btn-block" ;
      >
      ${buttonname} 
     </button>`
    }
    else
    {
      buttonname = 'Enable Role'
      template= `<button type="button" style="height: 25px;line-height: 0.5"data-action-type="Disablerole"  class="btn btn-outline-success btn-xs btn-block" ;
      >
      ${buttonname} 
     </button>`
    }


   element.innerHTML = template;
    return element;
   }

}

回答3:

Renderer Template -

<button type="button" (click)="placeOrder($event)" >Submit</button>

Renderer Component -

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

placeOrder(event: Event): void {
    event.stopPropagation();
    this.params.onClick(..);
  }

Grid component which defines coldefs -

columnDefs = [
    { headerName: '', field: "Test", cellRenderer: 'rendererName', 
      cellRendererParams: {
      onClick: this.placeOrder.bind(this)
      }
    }
private placeOrder(obj: any): void {
}

来源：https://stackoverflow.com/questions/52510746/how-to-conditionally-enable-disable-cell-renderer-in-ag-grid

标签

ag-grid