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

user_1843970 0
Viewed 443

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:-

enter image description here

Can you please help me how to get Old Data and New Data value from checkbox that is dynamically generated?

ag-grid-angular angular8 checkbox
2 Answers

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

user_63329830

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) 
}
user_121692760
Related