Hi, How to open comboBox's dropdown list when editing started

Hi, How to open comboBox's dropdown list when editing started

Posted by: pyoh on 4 January 2024, 2:07 am EST

• 

  pyoh

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 January 2024, 2:07 am EST

  comboBox’s dropdown list opened only click ‘arrow icon’ of comboBox cell.

  but, I need to open when editing cell by keyboard typing

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 January 2024, 10:13 am EST

  Hi,

  I am currently working on your request. I will update you soon about my findings.

  Regards,

  Ankit

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 8 January 2024, 8:23 am EST - Updated 8 January 2024, 8:30 am EST

  Hi,

  You can achieve this requirement by overriding the activateEditor function of the comboBox. The activateEditor function is executed every time a combobox cell enters edit mode.
  
  In the overridden activateEditor function, first, call the old activateEditor function and then display the drop-down list using the showDropDownList method found in the combobox property of the editing element. Refer to the snippet and sample below.
  
  const oldActiveEdtior = GC.Spread.Sheets.CellTypes.ComboBox.prototype.activateEditor;
  
  GC.Spread.Sheets.CellTypes.ComboBox.prototype.activateEditor = function(editorContext, cellStyle, cellRect, context){
  
  // old activate editor function
  
  oldActiveEdtior.apply(this, arguments);

  // show drop down list
  const comboBoxElement = document.querySelector('div[gcuielement="gcComboBox"]')
  if(!comboBoxElement){
      return;
  }
  
  comboBoxElement.comboBox.showDropDownList();
  

  }

  sample: https://jscodemine.grapecity.com/share/n8xKXvGWgE2u-W7tTA6lNw/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
  
  references:

  activateEditor: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.ComboBox#activateeditor

  Best regards,