Dropdown appear above cell

Dropdown appear above cell

Posted by: rpatel on 9 September 2019, 5:31 pm EST

• 

  rpatel

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 September 2019, 5:31 pm EST - Updated 3 October 2022, 1:42 am EST

  Hi,

  I have stuck in production issue where in sheet js I have implemented dropdown cellType for one column. It’s working fine but we have lots of records and for last row when we click on cell and dropdown display half and rest of part is hinding of scrollbar like below screenshot:

  

  Apprently it’s working fine on MS excel and display above cell like below screenshot:

  

  Would you please provide me solution for this?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 September 2019, 7:43 pm EST

  Hi,

  You may override the updateEditor method of ComboBox to achieve the required functionality. Please refer to the following code snippet and the sample demonstrating the same:

  var oldFn = GC.Spread.Sheets.CellTypes.ComboBox.prototype.updateEditor;
  GC.Spread.Sheets.CellTypes.ComboBox.prototype.updateEditor = function(
    editorContext,
    cellStyle,
    cellRect,
    context
  ) {
    oldFn.apply(this, arguments);
    var dropdown = editorContext.parentElement.querySelector(
      '[gcuielement="gcDropDownWindow"]'
    );
    var height = dropdown.clientHeight;
    if (!height) {
      height =
        this.itemHeight() *
        Math.min(this.maxDropDownItems(), this.items().length);
    }
  
    // check if dropdown needs to be positioned on top
    var dropDownOnTop = false;
  
    var lastVisibleRow = context.sheet.getViewportBottomRow(1);
    var lastCellRect = context.sheet.getCellRect(
      lastVisibleRow,
      context.col,
      1,
      1
    );
    dropDownOnTop =
      lastCellRect.y + lastCellRect.height - (cellRect.y + cellRect.height) <
      height;
  
    if (dropDownOnTop) {
      dropdown.style.top = -height - 3 + "px";
    }
  };
  

  https://codesandbox.io/s/spread-js-starter-k1t29

  Regards

• 

  rpatel

  • Post Options:
  • Link
    Copy

  Posted 11 September 2019, 2:07 am EST

  Thanks for your support.