AG-Grid update agSelectCellEditor values after grid creation-CodePudding

I have an array which can change. I want to update the values for the agSelectCellEditor editor, based off this array, after the grid is created.

The agSelectCellEditor editor is a built in ag grid component which allows the use of a dropdown select for updating cell values. https://www.ag-grid.com/angular-data-grid/provided-cell-editors/#select-cell-editor

For the sake of the question, I have an example program: There is a list of sports which the user update manually after the grid is created. I am using an ag-grid table. Each entry has an AthleteName field and a sport field, which represents the sport they play. The user selects the sport from a select drop-down using agSelectCellEditor. How can I update the values of the select after the grid is created?

In the example below, the user need to add Tennis as a sport in the list of sports using the sportListInput. They change the value of sportListInput to Football, Tennis. They then need to select Tennis in Nadal's entry under the 'sport' field using the dropdown provided. How can I update the values of this select agSelectCellEditor as the value of sportListInput changes? When I pass a function under values it doesn't work.

(By the way - you might need to copy the code and test it since it wouldn't show the grid in the stackoverflow snippet for me)

<!DOCTYPE html>
<html>
    <head>
        <!--Import ag grid-->
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
    </head>
    <body>
        <input type="text" id="sportListInput" value="Football" placeholder="Separate sports with a comma"></input>
        <button onclick="init();this.setAttribute('style','display:none')">Load Athletes</button>
        <div id="gridDiv"  style="height: 500px;"></div>
        <script type="text/javascript">
            function init(){
                const data =[
                    {
                        AthleteName: "Rafael Nadal",
                        sport: "Football" //this data is wrong and the user wants to update, but they need to add tennis as a sport in the select editor
                    },
                    {
                        AthleteName: "Cristiano Ronaldo",
                        sport: "Football"
                    }
                ];

                const columnDefs = [
                    {
                        field: "AthleteName",
                    },
                    {
                        field: "sport",
                        cellEditor: 'agSelectCellEditor',
                        cellEditorPopup: true,
                        cellEditorParams: {
                            values: getSportList(),//THIS IS WHERE THE agSelectCellEditor IS DEFINED AND ITS VALUES, PASSING A FUNCTION TO UPDATE THE VALUES DOESN'T WORK
                        }
                    }
                ];
                const gridDiv = document.getElementById("gridDiv");
                const gridOptions = {
                    columnDefs: columnDefs,
                    defaultColDef: {sortable: true, filter: true, editable: true},
                };
                new agGrid.Grid(gridDiv, gridOptions);
            
                gridOptions.api.setRowData(data);
                gridOptions.api.sizeColumnsToFit();
                console.log(gridOptions)
            };

            function getSportList(){ //returns the list of sports inputted by the user
                const sportListInput = document.getElementById("sportListInput");
                return sportListInput.value.split(",").map(sport => sport.trim());
            };
        </script>
    </body>
</html>

Thanks in advance

CodePudding user response：

If you change your cellEditorParams to function definition it works as expected:

cellEditorParams: function () { return { values: getSportList() } }

// Or this for more concise/modern way:

cellEditorParams: () => ({ values: getSportList() })