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

4
votes

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.

3
ag-grid
By disable, you mean remove it entirely from the columnDefs? or just leave it empty ? - Mark Yu
Actually lookupRenderer is a button and on it's click I am opening a popup. So want to enable/disable the button when some other value in grid changes. But look like cell renderer renderers cell data initially when grid loads and then when I change some value in other grid columns, that won't be reflected in renderer component. - Shruti

3 Answers

5
votes

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.

1
votes

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

}
0
votes

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