How to create a custom column header using combo box?

How to create a custom column header using combo box?

Posted by: sundaydavid on 16 October 2019, 4:28 pm EST

• 

  sundaydavid

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 October 2019, 4:28 pm EST

  Hi,

  I’m trying to use a combo box as column headers. However, I was able to create the combo boxes but how do I make it clickable for selection? Clicks on the header is selecting the column body in the excel.

  Thanks.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 October 2019, 4:32 am EST

  Hi,

  Would you please confirm if you are trying to use GC.Spread.Sheets.CellTypes. ComboBox in the column header or you have created a custom CellType for the combo box?
  
  In case of custom CellType please make sure that you have implemented the gitHitInfo() method, and then you could override the processMouseDown method to make it clickable. Please refer to the following sample which demonstrates the correct way to implement custom headers:
  
  https://www.grapecity.com/demos/spread/JS/TutorialSample/Features/CellType/customHeaderCellType/purejs

  For GC.Spread.Sheets.CellTypes.ComboBox, we have asked the dev team to confirm if the ComboBox cell type could be used in the headers or not. We will let you know once we get more information regarding the same. Internal tracking Id for the case is SJS-2150.

  Regards
  
  Sharad

• 

  sundaydavid

  • Post Options:
  • Link
    Copy

  Posted 17 October 2019, 1:28 pm EST

  Hi,

  I’m using Combo Box in the column header. I tried using custom cell type but couldn’t figure it out… I’m trying to use it in an angular app.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 October 2019, 4:21 am EST

  Hi,

  For custom cell type, you need to override the getHitInfo method and set the isReservedLocation property of the returned hitInfo to handle click events. Please refer to the following code snippet and the sample which demonstrates the same:

   getHitInfo(x, y, cellStyle, cellRect, context) {
      let info = {
        x: x,
        y: y,
        row: context.row,
        col: context.col,
        cellRect: cellRect,
        sheetArea: context.sheetArea,
        sheet: context.sheet,
        isReservedLocation: false // return true to prevent stop spread from performing default operation i.e selecting the column
      };
  
      if (cellRect.x + cellRect.width - this.size - 10 < x) {
        info.isReservedLocation = true;
      }
  
      return info;
    }
  

  https://stackblitz.com/edit/angular-mwn2xf?file=src/app/app.component.ts
  
  The above sample just demonstrates the functionality by adding a select element on the header and not an actual combobox control. You could add any combobox of your choice.
  
  Please let us know if you would like us to prepare a sample for you by creating and attaching a basic combo box control but for that, we would need some time.

  Regards
  
  Sharad

• 

  sundaydavid

  • Post Options:
  • Link
    Copy

  Posted 18 October 2019, 1:36 pm EST

  Thank you Sharad, it works great!

  Please, can you give an idea on how to close the Combo box onSelection of an option? Right now the options only close on clicking outside the combo.

  Best!

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 2:36 am EST

  We could handle the click event on the select element to auto-close after selecting an option. I’ve updated the sample to demonstrate the same. Please refer to the following updated sample:
  
  https://stackblitz.com/edit/angular-vwxrjw?file=src/app/app.component.ts

  Regards

• 

  sundaydavid

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 1:42 pm EST

  Thank you Sharad, that was helpful!

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 October 2019, 12:01 am EST

  We are glad to be able to help

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 30 October 2019, 5:10 am EST

  Hi,

  Regarding using the GC.Spread.Sheets.CellTypes.ComboBox in headers, the dev team has confirmed that GC.Spread.Sheets.CellTypes.ComboBox is not supported for row/column headers.
  
  However, in v13 we are enhancing the combo box as drop-down menu styles in V13, which should be coming out in the next few weeks. This new style implementation will allow you to implement drop-down menus in the headers with ease.

  Regards
  
  Sharad

• 

  issam.elbaytam

  • Post Options:
  • Link
    Copy

  Posted 6 November 2019, 2:44 pm EST

  Hi, Can you please explain your case for us, why do you need to show a combo-box in the column header? to filter? input? what action do you perform once the combo-box item is selected.

  We try to understands the use case better in order to improve the feature and make it easier to use if possible.

  thank you.