Dynamically Setting Column Names on Insertion in SpreadJS

Dynamically Setting Column Names on Insertion in SpreadJS

Posted by: clingam on 29 August 2024, 7:12 pm EST

• 

  clingam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 August 2024, 7:12 pm EST

  Hello SpreadJS Community,

  I am currently enhancing the usability of our SpreadJS implementation by allowing users to insert new columns into a sheet. However, instead of using the default column labels (e.g., A, B, C) provided by SpreadJS, I want to prompt the user to provide a name for the new column, which will then be set as the column header.

  Could anyone suggest the best approach to implement this functionality? Specifically, I am looking for a way to:

  *Trigger a prompt when a new column is inserted.
  *Take the user's input for the column name.
  *Apply this input as the header name of the newly inserted column.
  

  I appreciate any guidance, code snippets, or references to documentation that could help achieve this feature.

  Thank you for your support!

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2024, 2:24 am EST - Updated 30 August 2024, 2:29 am EST

  Hi,

  You could use the ColumnChanged Event to detect the event when the user inserts a new column, take the new column name using prompt and then set the column name to the newly inserted column.

  Kindly refer to the following code snippet and the sample:

  // Bind the Changed Event
  spread.bind(GC.Spread.Sheets.Events.ColumnChanged, (sender, args) => {
      console.log(args);
      if (args.propertyName === "addColumns") {
          const colName = prompt("Please enter column name: ");
          if (colName) {
              sheet.suspendEvent();
              sheet.setValue(0, args.col, colName, GC.Spread.Sheets.SheetArea.colHeader);
              sheet.resumeEvent();
          }
      }
  });

  Sample: https://jscodemine.mescius.io/share/LQE_YIInok2l9r2ENT8DbA/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  ColumnChanged Event: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Events#columnchanged

  Regards,

  Ankit