How to get old and new value of dynamically generated checkbox column in agGrid - checkbox

Question

I am using agGrid where the columns are dynamically created. My objective is to get the old value and new value after checking the checkboxes. I try to use "onCellValueChanged" but it didnt work. If I use "onCellClicked" then I am not getting Old Value and New Value.
For your understanding I want to mean by Old Value and New Value that if user checked then Old Value is false and New Value is true.
HTML
<ag-grid-angular class="ag-theme-balham" [gridOptions]="siteJobDeptGridOptions"
[rowData]="siteJobDeptRowData" [columnDefs]="siteJobDeptColDef" [paginationPageSize]=10 [domLayout]="domLayout"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
TS File
export class SiteJobDeptConfigComponent implements OnInit {
ngOnInit() {
this.domLayout = "autoHeight";
this.getAllSiteJobConfig();
this.generateColumns();
}
onGridReady(params: any) {
params.api.sizeColumnsToFit();
params.api.resetRowHeights();
}
generateColumns()
{
let deptColDef = [];
let colSiteJob = {
field: 'SiteJobName', headerName: 'Site Job Name',resizable: true,
sortable: true, filter: true, editable: false,
}
this.siteJobDeptCommonService.getEntityData('getpublisheddepts')
.subscribe((rowData) => {
deptColDef.push(colSiteJob);
for(let dept of rowData)
{
deptColDef.push({
field: dept.DeptName, headerName: dept.DeptName, width:100,resizable: true,
cellClass: 'no-border',
cellRenderer : params => {
var input = document.createElement('input');
input.type="checkbox";
input.checked=params.data[dept.DeptName];
return input;
},
onCellValueChanged: this.siteDeptCellValueChanged.bind(this),
})
}
this.siteJobDeptColDef = deptColDef;
},
(error) => { alert(error) });
}
siteDeptCellValueChanged(dataCol: any) {
let checkedOldValue = "Old Check Value - " + dataCol.oldValue;
let checkedNewValue = "New Check Value - " + dataCol.newValue;
}
getAllSiteJobConfig()
{
let siteJobRowData = [];
this.siteJobDeptCommonService.getEntityData('getallsitedeptjob')
.subscribe((rowData) => {
for(let siteJobDetail of rowData)
{
for(let deptAllow of siteJobDetail.DeptAllow)
{
tempArray[deptAllow["DeptName"]] = deptAllow["IsAllow"];
}
siteJobRowData.push(tempArray);
}
this.siteJobDeptRowData = siteJobRowData;
},
(error) => { alert(error) });
}
}
The grid looks like below:-
Can you please help me how to get Old Data and New Data value from checkbox that is dynamically generated?

Answer 1

It should be "cellValueChanged" not "onCellValueChanged" in the column definition creation.
You can find here.

Answer 2

When you declare your method in the params object, there are oldValue and newValue properties that give the result that you are looking for:
onCellValueChanged: function(params) {
console.log(params.oldValue);
console.log(params.newValue)
}