ag-grid: Switch between fullRow editing and single cell editing based on rowNode content

Question

I have certain rows in my grid that should trigger fullRow editing because most of the data is blank. Some of the columns should be required columns as well. Is there a way to make certain rows (based on rowNode data) fullRow editable while maintaining cell edit mode for other rows?

Thanks

As far as I know, editType in grid options expects a string. However, it doesn't pass parameters like editable in column defs does, so I'm not sure if grid options can be evaluated based on the data. — anthozep, Aug 07 '19 at 23:55
Have you tried exploring gridApi and then setting the value based on click of the row as dynamic editType property? — Rikin, Aug 08 '19 at 15:04
@Rikin it looks like I can choose a cell editor based on this: https://www.ag-grid.com/javascript-grid-cell-editing/#many-editors-one-column however, I'm not seeing a way to switch the editType. I'm guessing I'd have to create custom cell editors that are copies of either the provided cell or fullRow editors. I'll give that a shot. — anthozep, Aug 08 '19 at 21:05
I tried the approach but it seemed to much wiring so did not go for it, but my approach was assign onRowClick or related handler in gridOptions and then once that handler is called you get an event object which had `api` exposed on it using which you may be able to go for cellDef and then change type of editType for the current row, not sure if that's possible but I did not explore much as it was too much time consuming and not a quick thing to try it out. — Rikin, Aug 09 '19 at 11:13

score 0 · Answer 1 · answered Apr 22 '21 at 03:54

You can do this pretty easily (took me 15 minutes).

In your onCellClicked($event) method set a module level variable for which column was clicked.

E.g:

  onCellClicked($event) {
      this.fullRowEditOnlyPopup = $event.colDef.field;

      if (this.editingRowIndex !== $event.rowIndex) {
        $event.api.startEditingCell({
          rowIndex: $event.rowIndex,
          colKey: $event.column.colId
        });
        this.editingRowIndex = $event.rowIndex;
      }
  }

I have a column with a button that pops up a ICellEditorAngularComp 'cdTargetLabourDetailRenderer' that should be the only editable item on the row when called:

this.columnDefs.push({
  headerName: '',
  field: 'popupEditColumn',
  cellStyle: { 'text-align': 'left' },
  cellEditor: 'cdTargetLabourDetailRenderer',
  cellRendererParams: { buttonType: 'settings' },
  cellRendererFramework: MatButtonComponent,

  cellEditorParams: (params) => {
    return {
      resource: this.getTargetResource(params)
    };
  },
  onCellValueChanged: (params: any) => {
    if (params.node && params.node.data && params.node.data.resource) {
      params.data.resource = params.node.data.resource;
      params.data.description = params.node.data.resource.description;
      this.gridApi.updateRowData(params.node.data);
    }

    this.gridApi.refreshCells();
  },
  editable: (params) => {
    return (this.fullRowEditOnlyPopup === 'popupEditColumn');
  },
});

I have 12 columns which I want to edit in full row mode, and return if they are editable depending on if the popup edit column was clicked, or a different column (including any of the 12 month columns):

this.months.forEach((month: any) => {
  this.columnDefs.push({
    headerName: this.datePipe.transform(month, 'MMM yy'),
    field: this.datePipe.transform(month, 'MMMyy'),
    type: 'numericColumn',
    cellStyle: {
      'text-align': 'right',
    },
    valueFormatter: this.labourFormatter,
    editable: (params) => {
      let editable = false;
      if (this.fullRowEditOnlyPopup === 'popupEditColumn') { return false; }

      // Perform other logic if needed for month columns
      if (!doingStuffAndThings) {
        editable = false;
      } else {
        editable = true;
      }

      return editable;
    },
  });
});

If I click on the 'popupEditorColumn' only the ICellEditorAngularComp displays. If I click on any other row, the full row edit of month-columns display as editable.

However, there is an annoying need to double click the cell to get into edit mode where the initial time it only requires a single click.

ag-grid: Switch between fullRow editing and single cell editing based on rowNode content

1 Answers1