I have a very simple grid as you see:
This is its html code:
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[enableSorting]="true"
[enableFilter]="true"
[pagination]="true"
[rowData]="getRowData()"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>
This is its correspondant typescript code:
columnDefs = [
{
headerName: "Probabilité",
headerToolName: "Consultez les échelles",
cellRenderer: 'dropDownCellRendererComponent'
},
{
headerName: "RiskBrut",
headerToolName: "Consultez les échelles",
field: "RskBrt",
}
];
rowData = [{}];
frameworkComponents = {
dropDownCellRendererComponent: DropDownCellRendererComponent
};
public getRowData() {
var rowData = [];
for (var i = 0; i < 1; i++) {
rowData.push({RskBrt: 'Risk1' });
rowData.push({RskBrt: 'Risk2'});
rowData.push({RskBrt: 'Risk3'});
rowData.push({RskBrt: 'Risk4'});
}
//THis makes the dropDown list stop working
return rowData;
}
The first column has a custom cell renderer defined in another component:
<select class="form-control">
<br>
<option id="1">1- Très improbable</option>
<option id="2">2- Peu probable</option>
<option id="3">3- Possible</option>
<option id="4">4- Probable</option>
</select>
My problem is that when I add the method that populates the second column:
public getRowData() {
var rowData = [];
for (var i = 0; i < 1; i++) {
rowData.push({RskBrt: 'Risk1' });
rowData.push({RskBrt: 'Risk2'});
rowData.push({RskBrt: 'Risk3'});
rowData.push({RskBrt: 'Risk4'});
}
//THis makes the dropDown list stop working
return rowData;
}
The dropList in the first column stops working. I.e: It doesn't open.
I really do not understand why this is occuring.
Why does populating the second column in that manner causes the dropDown list to stop functioning properly in the first column.
Any help?