modified dropdown editor for ag-grid to create multiple dropdowns in a grid; depends on lodash

agDropDownEditor.js

 function agDropDownEditor(params, optionsName, optionsList) {

		_.set(params.$scope, optionsName+'.optionsList', optionsList);
		
        var html = '<span style="width:100%; display:inline-block" ng-show="!'+optionsName+'.editing" ng-click="'+optionsName+'.startEditing()">{{data.'+params.colDef.field+'}}</span> ' +
            '<select style="width:100%" ng-blur="'+optionsName+'.editing=false" ng-change="'+optionsName+'.editing=false" ng-show="'+optionsName+'.editing" ng-options="item for item in '+optionsName+'.optionsList" ng-model="data.'+params.colDef.field+'">';

        // we could return the html as a string, however we want to add a 'onfocus' listener, which is not possible in AngularJS
        var domElement = document.createElement("span");
        domElement.innerHTML = html;

        _.set(params.$scope, optionsName+'.startEditing', function() {
            _.set(params.$scope, optionsName+'.editing', true); // set to true, to show dropdown

            // put this into $timeout, so it happens AFTER the digest cycle,
            // otherwise the item we are trying to focus is not visible
            $timeout(function () {
                var select = domElement.querySelector('select');
                select.focus();
            }, 0);
        });

        return domElement;
    }

Hi gaborsomogyi,

I am very interested in how this works. I have multiple drop downs currently and replicate the code, but as a result have some strange behaviors. I think this may assist in fixing it but was wondering how you go about calling this method?

For example, currently i have
{ headerName: "Group", field: "GroupId", width: 70, cellRenderer: GroupDropDowns },
I would need to change it to something like:
{ headerName: "Market", field: "MarketId", width: 75, cellRenderer: agDropDownEditor(????) },
but what goes into the ???. How do I parse in Params, what is Params, I think I understand that OptionName would be a string, and OptionList would be an array of options.

Can you provide me a copy of the full code you used for this example as that may help me figure out what I am doing incorrectly?

Thanks in advance
Pete