Access the selection and update the text of RadioButtonList

Access the selection and update the text of RadioButtonList

Posted by: rsystems on 9 July 2024, 1:37 am EST

• 

  rsystems

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 July 2024, 1:37 am EST

  Hi team,

  I am trying to implement the following functionality using SpreadJs component (PureJS). But I cannot find a proper documentation to achieve that. I have three radio buttons in a cell (added as CellType) named “Yes”, “No”, and “NA”.

  Question 1, need to update the text (“Yes”, “No”, and “NA”) to different language programmatically.
  
  Question 2, need to get the selected item value out of three options programmatically.

  Thanks,
  
  Prabakaran

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 9 July 2024, 10:14 pm EST

  Hi,

  You can change the language of items in a radio cell type by adding new items with the desired language and then setting the radio cell type again. Refer to the attached snippet.

  document.getElementById("language").addEventListener("click", (e) => {
      radio.items([
          { text: "YesChange", value: "YesChange" },
          { text: "NoChange", value: "NoChange" },
          { text: "NAChange", value: "NAChange" },
      ]);
      sheet.setCellType(0, 1, radio, GC.Spread.Sheets.SheetArea.viewport);
  });

  You can get the selected value using the getValue method. Refer to the attached snippet.

  document.getElementById("getValue").addEventListener("click", (e) => {
      const value = sheet.getValue(0, 1);
      console.log(value);
  });

  I have attached a sample for your reference:

  Sample: https://jscodemine.mescius.io/share/3eTlpeRCj0ORkFQw-YoFxw/?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:

  getValue: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getvalue

  Regards,
  
  Priyam

• 

  rsystems

  • Post Options:
  • Link
    Copy

  Posted 9 July 2024, 11:23 pm EST

  Hi,

  Regarding the Q1 (update the text of radio cell type), your solution is for adding a new radio cell type. But in my case, it’s already there in the sjs file (Designed the layout using designer). So, I just need to access the radio button cell type and update its text based on the selected language.

  Thanks,
  
  Prabakaran

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2024, 9:41 pm EST

  Hi,

  To access an already present radio cell type in a cell, you can use the getCellType method. Then, you can modify the items using the items method of the cell type and update it using the setCellType method. Here’s an example snippet:

  let radioCellType = sheet.getCellType(1, 1);
  radioCellType.items([
      { text: "languageChange", value: 1 },
      { text: "languageChange2", value: 2 }
  ]);
  sheet.setCellType(1, 1, radioCellType);

  References:

  getCellType: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getcelltype

  setCellType: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#setcelltype

  items: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.RadioButtonList#items

  Regards,
  
  Priyam

• 

  rsystems

  • Post Options:
  • Link
    Copy

  Posted 10 July 2024, 10:05 pm EST

  Thank you. It works. Is there a way to get all the radio button cell types in a sheet? For example, I have the radio button cell type at three places, how can I know the row and column of those radio button cell types programmatically?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 11 July 2024, 8:09 pm EST

  Hi,

  There is no direct API to get all radio cell types in SpreadJS, but you can traverse all cells in all sheets and check if the cell type is a radio type. You can improve search time by using the getUsedRange method, which provides the cell range where the cell type can be present, reducing the number of cells to search. Refer to the attached snippet and sample for reference.

  spread.sheets.forEach(sheet => {
      const range = sheet.getUsedRange(GC.Spread.Sheets.UsedRangeType.style);
      for (let i = range.row; i < range.row + range.rowCount; i++) {
          for (let j = range.col; j < range.col + range.colCount; j++) {
              let cellType = sheet.getCellType(i, j);
              if (cellType.typeName == 11) {
                  console.log("Radio cell type detected", sheet.name(), "row:", i, "col:", j);
              }
          }
      }
  });

  Sample: https://jscodemine.mescius.io/share/obP6ZBHsUkST33qcHa3w1Q/?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:

  getUsedRange: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getusedrange

  Regards,
  
  Priyam