Multiple dropdown selection in ag-grid (link Attached)

Question

I need to have a column in ag-grid where i can select multiple values from dropdown. I just googled online to see if it is already implemented but i could find only one link.

https://gist.github.com/gaborsomogyi/00f46f3c0ee989b73c92

Can someone let me know how to implement it. show the full code as an example please.

Here is the code shared over there.

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

Answer 1

Hope this helps, this is just a snippet of my code what i'm doing is I'm fetching from an array using map and then creating my object which is col and returning it and this will repeat till the last index of that array.

                        var col = {};
                        col.field = "fieldName";
                        col.headerName = "colName";
                        col.headerCellTemplate = function() {
                            var eCell = document.createElement('span');
                            eCell.field = obj.expr;
                            eCell.headerName = obj.colName;
                            eCell.innerHTML = "<select>"+"<option>"+
                                'Abc'+"</option>" +"<option>"+
                                'Xyz'+"</option>" +"</select>"

                            //$scope.dropDownTemplate;
                            var eselect = eCell.querySelector('select');
                            eselect.focus();

                            return eCell;
                        };



                        return col ;
                    }));