Проблемы с настраиваемым раскрывающимся списком AG-Grid при выборе

Question

Я работаю над ag-сеткой с Angular, и мне нужно, чтобы мой настраиваемый выпадающий компонент появлялся во всплывающем окне при двойном щелчке, как он появляется в редакторе ячеек, а также чтобы он отображался правильно, как другие ячейки. мы можем создать раскрывающийся список двумя способами.

Первый с cellEditor и второй с пользовательским компонентом. Я хотел бы использовать cellEditor с selectize jquery, но, похоже, это не работает. Следовательно, я использую selectize с настраиваемым компонентом

  {
    headerName: "Status", 
    field: "status", 
    suppressMovable: false,
    type: "drop down2",
    colId: 5,
    cellClass: "actions-button-cell", 
    cellEditor: 'dropdown', //Either this 
    cellEditorFramework:CustomDropdownComponent // or this
  },

с настраиваемым компонентом, мне пришлось использовать этот CSS, чтобы сделать раскрывающийся список видимым, что делает его видимым наружу, а также он отображается над выбранной строкой.

::ng-deep .actions-button-cell { 
    overflow:visible; 
  }

::ng-deep .ag-row {
      z-index: 0;
  }

::ng-deep .ag-row.ag-row-focus {
      z-index: 1;
  }

::ng-deep  .ag-root,
::ng-deep .ag-body-viewport,
::ng-deep .ag-body-viewport-wrapper {
    overflow: visible;
}

Теперь это выглядит плохо, и если я не использую css выше, раскрывающийся список будет скрыт внутри строки.

Во-вторых, скажем, я использую cellEditor, я не могу интегрировать его с selectize jquery. Ниже приведен раскрывающийся код для cellEditor

function getDropDown() {
  function DropDown() {}
  DropDown.prototype.init = function(params) {
    alert('here');
    this.select = document.createElement('select');
    // this.select.value = params.value;
    this.select.classList.add('email-select');
    this.select.style.height = '100%';
    this.select.style.width = '100%';
    $(this.select).selectize({
      valueField: 'name',
      labelField: 'name',
      placeholder: 'Select'
  ,    options: [
        {
            description: 'Nice Guy',
            name: 'Brian Reavis',
            imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
        }, 
        {
            description: 'Other nice guy',
            name: 'Nikola Tesla',
            imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
        }
      ]
  });
    // let option = document.createElement('option');
    // option.value = "One";
    // this.select.append= option;



  };
  DropDown.prototype.getGui = function() {
    return this.select;
  };
  DropDown.prototype.afterGuiAttached = function() {
    this.select.focus();
  };
  DropDown.prototype.getValue = function() {
    return this.select.value;
  };
  DropDown.prototype.destroy = function() {};
  DropDown.prototype.isPopup = function() {
    return false;
  };
  return DropDown;
}

Это дает функцию выбора ошибок, которая не существует, и иногда она работает, но не полностью применяется выборочно к полю выбора. Пожалуйста, помогите мне любым из двух способов.

Ожидаемый результат:

Я выделил два варианта. Если бы я мог найти решение для cellEditor, было бы здорово, если бы я просто нашел решение для выпадающего списка, появляющегося немного наружу и над выбором строки. Спасибо!