Dropdown appear above cell

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

  • Posted 9 September 2019, 5:31 pm 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?
  • Marked as Answer

    Replied 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
  • Replied 11 September 2019, 2:07 am EST

    Thanks for your support.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels