Angular Grid Ag-Grid, make Column Editable dynamically

Question

Well, the title looks quite similar to other posts:

Angular Grid ag-grid columnDefs Dynamically change

AG-Grid: Make editable columns based on response from server

but I'm going to ask a slightly different question.

Now I have a bunch of columns stored in tableColumns variable.

Each column has a editable property.

For existing data, some columns are editable and some are not. This is achieved by below function. It is called when I define columnDefs.

checkEditable(columnName: string){
        var editable = false;
        this.configData.some((el) => {
          if (columnName == el.key.columnName){
            return el.editable == "Y";
          }
        });
        return editable;
      }

However, for newly inserted rows which got appended at the bottom of my grid, I want all columns to be editable for this record only.

This record can be identified by column isChanged = "inserted".

insertNewRow(){
    var newItem = this.createNewRowData();
    var res = this.gridOptions.api.updateRowData({add: [newItem]});

    var updatedColDefs = [];

    **//how can I update columnDefs here, so that all fields are editable for this record?**

    var col = this.gridOptions.api.setColumnDefs(updatedColDefs);

  }

  createNewRowData(){
    var newData = [];
    this.tableColumns.forEach(item => {
      if (item.headerName == "isChanged") {
        newData["isChanged"] = "inserted";
      } else {
      newData[item.headerName] = "";
      }
    });

    console.log(newData);
    return newData;
  }

Most likely I will have to create a function to achieve this, but seems like I am unable to assign function to 'editable' property of the column? What would be the correct syntax?

Paritosh Paritosh · Accepted Answer · 2018-05-15T04:03:17

It's not your syntax, but the approach.

Below approach will work for you.

Make editable true for all columns.
For new rows you are inserting, have a flag to specify that the record is newly inserted. You already have that as newData["isChanged"] = "inserted"
Use (cellEditingStarted)="onCellEditingStarted($event)" event to check whether the currently editing record is newly inserted record or not.
- If it is, then make it editable
- If its not, then check if the current column is editable or not.

Check this code

 onCellEditingStarted($event) {
    if($event.data.isChanged != 'inserted' && $event.colDef.editable != true)
    // check property is used at column level to identify editable or not in above statement
        this.gridApi.stopEditing();
}

For reference (not exact what you want, but you'll get idea): how to disable editing for only some rows in ag grid

Angular Grid Ag-Grid, make Column Editable dynamically

1 Answers