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

Shruti Published at Dev

139

Shruti

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.

un.spike

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.