Ag-grid disable a button from a specific row

Question

In my work they have this ag-grid in angular, and with cell renderer, they create a button for each row, but after certain condition they want me to disable the button, but I have no idea on how to do that

grid.ts

this.frameworkComponents = {
  buttonRenderer: BtnRendererComponent,
  viewButtonRenderer: BtnViewRendererComponent
};
this.submissionCols = [
  {
    headerName: 'Process', field: 'id', filter: true, sortable: true, width: 100, cellClass: 'grid-cell-centered',
    cellRenderer: 'viewButtonRenderer', hide: !this.hide,

    onCellClicked: this.onBtnClick.bind(this),
  },
  {
    headerName: this.hide ? 'Request Status' : 'Review Status', width: 150,
    field: 'reviewStatus',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Review Type',
    field: 'reviewType',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Reviewer',
    field: 'reviewer',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Request Type',
    field: 'reviewRequestItem',
    filter: true,
    sortable: true,
    hide: !this.hide
  },
  {
    headerName: 'In Reference To',
    field: 'reference',
    filter: true,
    sortable: true,
    hide: !this.hide
  },
  {
    headerName: 'Request Item',
    field: 'reviewRequestItem',
    filter: true,
    sortable: true,
    hide: this.hide
  },
  {
    headerName: 'Description',
    field: 'description',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Responded',
    field: 'responded',
    filter: true,
    sortable: true,
    cellRenderer: (data) => {
      if (data.data.responded != null) {
        return moment(data.data.responded).format('MM/DD/YYYY');
      }
    }
  }

];
}

here is my class for viewButtonRenderer:

export class BtnViewRendererComponent implements ICellRendererAngularComp {
    params;
    label: string;
    colored: string;
    textColored: string;
    icon: string;

    agInit(params): void {
         this.params = params;
         this.label = this.params.data.id || null;
         this.colored = "red";

         if (params.column.colDef.headerName === "View") {
             this.icon = "details";
         } else {
             this.icon = "note";
         }
    }

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

I'm new with ag-grid and I could really use a hand.

Answer 1

It is not clear what you want to achieve. Do you want to disable a button in a CellRenderer, several buttons from different rows, or several rows, or a few cells in a given row...

In a scenario, when you want to disable a button in a particular row due to some global state of the grid or a state of component that hosts that grid, you should pass that condition into your renderer as a variable (as indicated by Sharanya) either as a cellRendererParams

gridOptions: GridOptions = {
    ...,
    columnDefs: [
        ...,
        {
            headerName: 'Responded',
            field: 'responded',
            filter: true,
            sortable: true,
            cellRenderer: (data) => myCustomRenderer(data),
            cellRendererParams: { condition: myCondition }
        }
    ]
}

or as a context containing the parent itself with access to the variable/condition and have a possibility to communicate directly to the parent

gridOptions: GridOptions = {
    ...,
    context: {
        parent: this
    }
}

This is well explained in the official doc. Then in your renderer component you check the condition for disabling the button taking into account you row. In my example, which you can find here, I want to disable OK button until the validation is finished and passed for a form that consists of a row.

I hope that helps.