How to get multiselect dropdown in AgGrid using Angular

Question

We have AgGrid and we need a multiselect dropdown for one of the column, and we are using Angular 7.

I am able to find multiselect dropdown but not for agGrid Cell.

Please help.

I a able to produce agGrid, tried using below link but unable to get.

https://www.c-sharpcorner.com/blogs/how-to-add-combobox-in-aggrid-or-edit-grid-coloumn-with-combobox

Expected : multi select dropdown in agGrid cell

Answer 1

I'll make it simple. It took me 2 days to make one with plain javascript. You can adjust it to your Angular needs.

Include

<script type="text/javascript" src="/assets/themes/frt/vendors/custom/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/assets/themes/frt/vendors/custom/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>

Style

<style> #commentSelection { width: 100%; } .input-widget-popup { width: 250px; height: 100px; } table { width: 100%; height: 100%; } td, th { text-align: center; padding: 8px; } </style>

Customize

var selectedComments = [];

class CommentCellRenderer {
    init(params) {
        this.eGui = document.createElement('span');
        if (params.value !== "" && params.value !== undefined && params.value !== null) {
            this.eGui.innerHTML = params.value;
        }
    }

    getGui() {
        return this.eGui;
    }
}

class CommentPopupCellEditor {
    init(params) {
        this.container = document.createElement('div');
        this.container.setAttribute('class', 'input-widget-popup');
        this._createTable(params);
        this.params = params;

        var commentUids = '';
        var commentNames = '';
        var rowSelectedComments = selectedComments.filter(comment => comment.rowId === params.node.id);
        for (var i = 0; i < rowSelectedComments.length; i++) {
            if (i > 0) {
                commentUids += ',';
                commentNames += ',';
            }
            commentUids += rowSelectedComments[i].uid;
            commentNames += rowSelectedComments[i].name;
        }
        this.selectComment(commentUids, commentNames);
    }

    selectComment(commentUids, commentNames) {
        this.commentList = commentNames;

        var rowNode = gridOptions.api.getRowNode(this.params.node.id);
        rowNode.setDataValue('comment_uid', commentUids);
        rowNode.setDataValue('comment_name', commentNames);
        setTimeout(() => {
            App.autoSizeAll(gridOptions);
        }, 1000);
    }

    getGui() {
        return this.container;
    }

    afterGuiAttached() {
        var that = this;
        $('#commentSelection').multiselect({
            buttonWidth: '100%',
            onChange: function(element, checked) {
                var x = element[0];
                var commentUid = $(x).val().toString();
                var commentName = $(x).text().toString();

                if (checked) {
                    var index = selectedComments.filter(comment => comment.rowId === that.params.node.id).map(function(e) { return e.uid; }).indexOf(commentUid);
                    if (index === -1) {
                        selectedComments.push({
                            rowId: that.params.node.id,
                            uid: commentUid,
                            name: commentName
                        });
                    }
                }
                else {
                    selectedComments = selectedComments.filter(comment => comment.rowId !== that.params.node.id || comment.uid !== commentUid);
                }

                var commentUids = '';
                var commentNames = '';
                var rowSelectedComments = selectedComments.filter(comment => comment.rowId === that.params.node.id);
                for (var i = 0; i < rowSelectedComments.length; i++) {
                    if (i > 0) {
                        commentUids += ',';
                        commentNames += ',';
                    }
                    commentUids += rowSelectedComments[i].uid;
                    commentNames += rowSelectedComments[i].name;
                }
                that.selectComment(commentUids, commentNames);
            }
        });
        this.container.focus();
    }

    getValue() {
        return this.commentList;
    }

    isPopup() {
        return true;
    }

    _createTable(params) {
        this.container.innerHTML = `
  <table>
    <tr>
        <th><?php echo COMMENTS; ?></th>
    </tr>
    <tr>
        <td>
            <select id="commentSelection" multiple="multiple">
            </select>
        </td>
    </tr>
  </table>
`;
        this.commentDropdown = this.container.querySelector('#commentSelection');
        for (let i = 0; i < comments.length; i++) {
            const option = document.createElement('option');
            option.setAttribute('value', comments[i].uid.toString());
            var index = selectedComments.filter(comment => comment.rowId === params.node.id).map(function(e) { return e.uid; }).indexOf(comments[i].uid);
            if (index !== -1) {
                option.selected = true;
            }
            option.innerText = comments[i].name;
            this.commentDropdown.appendChild(option);
        }
    }
}

Reference

{headerName: '', field: 'comment_name', editable: true, cellEditor: 'commentPopupCellEditor', cellRenderer: 'commentCellRenderer'},

Option

components: {
    commentCellRenderer: CommentCellRenderer,
    commentPopupCellEditor: CommentPopupCellEditor,
},

How it looks like

Answer 2

I have been working with Ag-grid for months and I can tell you it is very difficult to put something customized onto Aggrid cells.

Firstly, you can you use frameworkComponents parameter of GridOptions belonging to the related Ag-grid table.

Usage description: You have a independent component that providing you to select multiple item in a dropdown element. Let's name this component as MultiSelectComponent

Firstly, import GridOptons from any type of Ag-grid modules. I am using Enterprise.

import { GridOptions, ... } from '@ag-grid-enterprise/all-modules';
import { MultiSelectComponent} from './multi-select-component';

And inside Component class, declare details.

export class Component implements OnInit {
...
columnDefs: any;
...
gridOptions: GridOptions;
this.gridOptions = {
 frameworkComponents: {
  cellCustomComponent: MultiSelectComponent
 }
}

Here we define columns and their options we want. First column definition is containing our custom component in it. According to my Custom component can shown on Ag-grid in two ways:

1) It can be shown as the grid is ready. It is used with cellRenderer.

2) It can be displayed right after cell is clicked to edit. For this, you must declare the column to be editable as true. Also it is used with cellEditor and cellEditorParams.

Now We are using 1st option. I mean, cellRenderer one. I recommend you the same way too.

this.columnDefs = [
  {
    headerName: 'Names', field: 'names',
    cellRenderer: 'cellDatePicker', pinned: 'left',
  },
  // other columns definitions here
]

Now it is almost ready to display our own custom component right inside the cells under 'Names' column we just defined above. If our custom component is a datepicker, then it is shown as that datepicker. If it is an emoji selector picker, then it is as that is. (For example, click the link for cellEditor and cellRenderer)

My own custom component, datepicker:

Click resource on Aggrid site