CODEWITHSUNDEEP
angularangular6ag-gridag-grid-angular
Yatharth Mishra
Yatharth Mishra

Reputation: 107

How to load different options in AG-Grid select dropdown ,based on other cell value in the same row with Angular 6?

I am using the following code in the Column Definition :

 { headerName: 'Part', field: 'part', 
    cellStyle: {'background-color': 'cyan'}, editable: true, 
    cellEditor:'agSelectCellEditor', cellEditorParams:

I have other column in the grid ex-

   { headerName: 'Colour', field: 'colour', 
    cellStyle: {'background-color': 'cyan'}, editable: true, 
    cellEditor:'agSelectCellEditor', cellEditorParams: function(params) { 
    var selectedPart = params.data.type; if (selectedPart==='R&S') { 
    return { values: this.partTypeListRS }; } else if(selectedPart==='WiFi') 
    { return { values: this.partTypeListWifi }; } else 
    if(selectedPart==='Other') { return { values: this.partTypeListOther }; 
    }}},
    }

I am getting the error cannot read property this.partTypeListRS of undefined ,if I click on a row where selectedPart==='R&S' condition is satisfied and respectively for all the other conditions .

Upvotes: 1

Views: 8923

Answers (2)

Yatharth Mishra
Yatharth Mishra

Reputation: 107

Instead of function(params) ,I used the arrow function (params)=> , then I was able to access this inside CellEditorParams

Upvotes: 1

Pratik Bhat
Pratik Bhat

Reputation: 7614

You can define your cellEditorParams function in a way that returns different values depending on values of another column.

Here is a sample from the ag-grid site -

cellEditor : 'agSelectCellEditor';
cellEditorParams: function(params) {
    var selectedCountry = params.data.country;
    if (selectedCountry==='Ireland') {
        return {
            values: ['Dublin','Cork','Galway']
        };
    } else {
        return {
            values: ['New York','Los Angeles','Chicago','Houston']
        };
    }
}

Take a look at this example from official docs.

Upvotes: 2

Related Questions