How to create a custom column header using combo box?

Posted by: sundaydavid on 16 October 2019, 7:28 am EST

  • Posted 16 October 2019, 7:28 am 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.
  • Replied 16 October 2019, 7:32 pm 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
  • Replied 17 October 2019, 4:28 am 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.
  • Replied 17 October 2019, 7:21 pm 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

  • Replied 18 October 2019, 4:36 am 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!
  • Marked as Answer

    Replied 20 October 2019, 5:36 pm 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
  • Replied 21 October 2019, 4:42 am EST

    Thank you Sharad, that was helpful!
  • Replied 21 October 2019, 3:01 pm EST

    We are glad to be able to help
  • Replied 29 October 2019, 8:10 pm 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
  • Replied 6 November 2019, 5:44 am EST

    sundaydavid said:
    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.

    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.
Need extra support?

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

Learn More

Forum Channels