After selecting an item from a dropdown menu, I want to remove the select element and display the selected item in an ag-grid. Although the row is added to the grid successfully, the name/id properties do not appear correctly and the select element remains visible. The issue can be seen in the following screenshot:
The freeze button executes the following code:
freeze(firmCatId) {
const rowObj = this.firmCategories.filter(x => x.id === firmCatId);
this.rowData.push(rowObj);
this.firmCategories.filter(x => {
x.id !== firmCatId
});
this.gridApi.setRowData(this.rowData);
}
Upon debugging, it was observed that the selected rowObj is added to the ag-grid successfully but the column names are not displayed correctly. Additionally, the firmCategories array, which populates the dropdown list, does not have any impact on the data. The structure of the data is as follows:
`0: Object {id: "Bicycle", name: "Bicycle Facilities and Enhancement Design"} id:"Bicycle" name:"Bicycle Facilities and Enhancement Design" ....`