Search code examples
angularag-grid-angular

How do I supply cellEditorParams after ag-Grid has been initialized?


This is the classic example, which I am seeing in the docs and in online discussion, for supplying a 'dynamic' list of items to a cell pop-up list. But this isn't really dynamic. All of the values and relationships are known ahead of time and are hardcoded into the source.

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']
        };
    }
}

What if I am running an expanding business and I am adding new cities on a monthly basis to the list in which I maintain a corporate presence in different countries? I can't call a programmer every time I acquire a new customer. I need a way to supply this list dynamically, at run time, with a set of values which are fetched from the application database - not known ahead of time.

Can this be done?

I've documented my unsuccessful efforts to do this over here:

How do I Bind ag-Grid Dropdown to Array of Strings whose Values are not Known until Run Time?

If you can help me with a reply, either here or over there in my other inquiry, that will be most appreciated!


Solution

  • So here is the solution. Full disclosure - I don't know how or why it works, but the internet is wide and deep and if you cast your net for long enough there's no limit to what you can dredge up. I found the solution here:

    React and Ag-Grid: populating selectcelleditor through fetch gives 'state' of undefined

    that tip is for the react grid, but the solution worked for me. Here is the code for my solution:

    Here is the function which returns the list of values, in json format, I presume:

    private getCategoryArray() {
        return {
            values: this.Categories
        }
    }
    

    And here is how this is 'bound' to the ag-Grid column definition so that values are supplied dynamically at run time. It's the definition of cellEditorParams which is the critical item here.

        {
            headerName: 'Category',
            field: 'payeeCategory',
            sortable: true,
            width: 100,
            checkboxSelection: true,
            editable: true,
            cellEditor: "agSelectCellEditor",
            cellRenderer: ActiveCellRenderer,
            cellEditorParams: this.getCategoryArray.bind(this)
        },
    

    Again, I don't know how or why this works. If you'd like to post an explanation for how this works I will gladly give you the upvote for your explanation. Thanks!