How to edit column header inline?

How to edit column header inline?

Posted by: netbrains on 8 September 2017, 9:53 am EST

• 

  netbrains

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 September 2017, 9:53 am EST

  I’m populating a spreadsheet using a JSON datasource and sheet.bindColumns, and autoGenerateColumns=true.

  I want the user to be able to edit some of the column headers though. I have a solution with a context menu option that uses javascript prompt() to get the new name, but what I really want is to edit the column header inline like a cell.

  I see the 2015 v1 release has “Header CellType Enhancement” in the “whats new” page, but no details on what this is so I don’t know if it’ll help me.

  I’ve attached a full working example. Right-click on one on the Custom 1 or Custom 2 column header and select Rename to get the javascript prompt for a new name. It works, it’s just too ugly for production. The code is in js/testtable.js around line 80.

• 

  reeva

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:53 am EST

  Hello,

  Unfortunately, column headers are not editable hence we cannot change its text at runtime through user interaction.

  We regret the inconvenience caused.

  Thanks,
  
  Reeva

• 

  shreeja.shrimayee

  • Post Options:
  • Link
    Copy

  Posted 5 October 2021, 6:17 am EST

  Hi,
  
  Do we have new updates for solving the above mentioned issue currently?

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 6 October 2021, 6:32 am EST

  Hi,

  For this, you need to create a custom header. Please refer to the following sample and let me know if you face any issues.

  sample: https://codesandbox.io/s/optimistic-rhodes-h54ll?file=/index.html

  custom header demo: https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom-header#demo_source_name

  Regards
  
  Avinash

• 

  narender.n

  • Post Options:
  • Link
    Copy

  Posted 26 April 2022, 2:43 pm EST

  Hi Avinash,
  
  In the provided custom header column sample, Filter, Sort and Checkboxes are integrated but can we edit the names by adding rename to the options list or by double clicking the cell ?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 27 April 2022, 2:50 am EST

  Hi Narender,

  I couldn’t understand your requirement. Could you please elaborate your requirement?

  As per my understanding, you want to edit the Column Header by double clicking on the cell. By default column headers are not editable, and you need to create your own custom column header. you can refer to the attached sample above that demonstrates the same(https://codesandbox.io/s/optimistic-rhodes-h54ll?file=/src/HeaderCellType.js).

  You can also refer to the similar sample demonstrating the same: https://jscodemine.grapecity.com/share/z1NhmCiI60qGJdsCQdX1KQ/

  You can handle all other events on the input header.

  Custom Header Demo: https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom-header/purejs

  If the issue still persists for you, we request you to clarify what you are trying to achieve so that we can have a better understanding of your use case and assist you accordingly.

  Regards
  
  Ankit