CODEWITHSUNDEEP
javascriptag-gridag-grid-angular
kundan kumar
kundan kumar

Reputation: 80

CellValueChanged event in master detail of ag-grid

I am developing an ag-grid with master-detail set to true, the first row of master-detail has a editable cell i.e. "contractID", I want to populate other cells of the master-detail depending upon the fetched contractID.

I tried adding cellValueChanged in the columnDef and also tried to set params.api.rowModel.gridApi.cellValueChanged explicitly in onFirstDataRendered method for the detailGrid, but found no luck.

Master detail grid code:

detailCellRendererParams = {
  detailGridOptions: {
    columnDefs: [
      { headerName: "Contact ID", field: "contractId", editable: true, [cellValueChanged]: "cellValueChanged()" },
      { headerName: "Contact Name", field: "contractName" },
      { headerName: "Category", field: "category" }]
  }
}

onFirstDataRendered(params) {
  params.api.rowModel.gridApi.cellValueChanged = function (params) {
    console.log("cellChanged");
  }
}

Upvotes: 0

Views: 5747

Answers (2)

Daria
Daria

Reputation: 43

In case someone still wonders, in detailGridOptions add:

onCellValueChanged: function ($event) {
          // your code here
        },

This will be triggered every time you change cell value.

Upvotes: 2

kundan kumar
kundan kumar

Reputation: 80

Fixed the problem using custom cellRenderer and added an eventListener for change event. I just wanted to have this functionality on the first row of the grid, so added a condition to the rowIndex. 

detailCellRendererParams = {
    detailGridOptions: {
        columnDefs: [{headerName: "Contact ID",field: "contractId",editable: true,
                cellRenderer: (params) => {
                    params.eGridCell.addEventListener('change', (e) => {
                        this.getDetails(e.target.value);
                    })
                },
                {headerName: "Contact Name", field: "contractName"},
                {headerName: "Category",field: "category"}]
        }
    }

 getDetails(id): void {
    this.apiService.getDetails(id)
      .subscribe(result => {
        this.gridApi.detailGridInfoMap.detail_0.api.forEachNode(node=> {
            if(node.rowIndex == 0){
              node.data = result;
              node.gridApi.refreshCells();
            }}
          );
      })}

Upvotes: 1

Related Questions