slickgrid中的Selectize下拉菜单隐藏在slick网格边界之外。 我怎样才能使它达到最高？

Question

I am using selectize to provide inline cell editing in slickgrid. I am able to load this component within cell. But when dropdown options container pops up and it goes beyond the slickgrid viewport, dropdown options container is getting truncated by slickgrid boundary. It should come over the grid. How can I bring the dropdown options container to the top.

var grid;
var columns = [
  { id: 'title', name: 'Title', field: 'title' },
  { id: 'duration', name: 'Duration', field: 'duration' },
  { id: '%', name: '% Complete', field: 'percentComplete' },
  { id: 'start', name: 'Start', field: 'start' },
  { id: 'finish', name: 'Finish', field: 'finish' },
  {
    id: 'effort-driven',
    name: 'Effort Driven',
    field: 'effortDriven',
    editor: IEditor
  },
];

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
  editable: true,
  autoHeight: true
};

function IEditor(args) {
  var selectElement = $('<input type="text"/>');
  args.container.append(selectElement[0]);
  selectElement.selectize({
    create: false,
    maxElements: 1,
    options: [
      {
        name: 'A',
        value: 'a'
      },
      {
        name: 'B',
        value: 'b'
      },
      {
        name: 'C',
        value: 'c'
      },
      {
        name: 'D',
        value: 'd'
      },
      {
        name: 'E',
        value: 'e'
      },
      {
        name: 'F',
        value: 'f'
      },
    ],
    labelField: 'name',
    valueField: 'value'
  });

  /*********** REQUIRED METHODS ***********/

  this.destroy = function() {
    // remove all data, events & dom elements created in the constructor
  };

  this.focus = function() {
    // set the focus on the main input control (if any)
  };

  this.isValueChanged = function() {
    // return true if the value(s) being edited by the user has/have been changed
    return false;
  };

  this.serializeValue = function() {
    return '';
  };

  this.loadValue = function(item) {
  };

  this.applyValue = function(item, state) {
  };

  this.validate = function() {
    return { valid: false, msg: 'This field is required' };
  };
}

$(function() {
  var data = [];
  for (var i = 0; i < 3; i++) {
    data[i] = {
      title: 'Task ' + i,
      duration: '5 days',
      percentComplete: Math.round(Math.random() * 100),
      start: '01/01/2009',
      finish: '01/05/2009',
      effortDriven: i % 5 == 0,
    };
  }

  grid = new Slick.Grid('#myGrid', data, columns, options);
  grid.init();
});

I have added selectize drop down in Effort Driven column in this plunker

Answer 1

I used to use chosen as my enhanced select but I ran into exactly this problem, and it wasn't solvable due to the HTML it used. I had to jump ship to Select2 . There are examples for this here - check out 'Select2 javascript drop-down editor' and 'Select2 Multiselect javascript drop-down editor'.

Answer 2

Make sure your z-index is bigger than the ones SlickGrid uses. If I remember correctly SlickGrid's highest one was 11 or 12, so with a 13 you should be good to go. Also check the overflow of the cells' css classes; it might happen that your context menu is simply cut off.