AG-Grid render Bootstrap-Select as a dropdwon

Question

I have implemented editable AG-Grid. In the grid, one of the column displays country of the player as shown below:

Now in last column, when user click on the cell, I want to display list of available countries as a dropdown.

Here by default AG-Grid displays normal dropdown. Which I want to replace with Bootstrap-select.

To achieve this, I have implemented custom selector and using Bootstrap-select library.

But when cell is clicked, Dropdown is not being rendered. I am not getting any error though in console.

Here is the code of my custom cell-editor:

var selectCellEdior = function () { };
selectCellEdior.prototype = {
    init: function (params) {

        selector = document.createElement('select');

        for(var i = 0; i < params.values.length; i++) {
          var option = params.values[i];
          $('<option />', { value: option, text: option }).appendTo(selector);
        }

        this.cellSelector = selector;

        $(this.cellSelector).selectpicker({ size: 'auto' });


    },
    getValue: function () {
        return $(this.cellSelector).find('.btn-text').text();
    },
    getGui: function () {
        return this.cellSelector;
    },
    destroy: function () {
        $(this.cellSelector).remove();
    }
};

Here is the Sample Code

I dont understand what is the issue.

Jimmy Bosse Jimmy Bosse · Accepted Answer · 2019-04-08T13:09:07

The problem is the selectpicker jQuery method seems to add a display: none to the select element. Ag-Grid is adding it to the DOM you just can't see it. Additionally the getValue function is not returning the selected option's text.

The following changes to getValue and getGui will make the grid work:

  ...
  getValue: function () {
    return $(this.cellSelector).val();
  },
  getGui: function () {
    this.cellSelector.style.display = 'block';
    return this.cellSelector;
  },
  ...

Here is the modified Plunker

AG-Grid render Bootstrap-Select as a dropdwon

2 Answers