[TableSheet] Change and restore excute of openDateTimePicker in SpreadJS

[TableSheet] Change and restore excute of openDateTimePicker in SpreadJS

Posted by: lucas.nguyen on 9 December 2024, 6:19 am EST

• 

  lucas.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 December 2024, 6:19 am EST

  In TableSheet, I’ve customized the default openDateTimePicker to execute with my function to disable the DateTimePicker in some cells. When my TableSheet data changes (cell no longer disabled), I want to apply another customization to this command. However, TableSheet handles both the old and new commands. Is there a way to remove the old customization and replace it with a new one? Here is my example:

  
  let oldOpenDateTimeCmd =
          GC.Spread.Sheets.Commands.openDateTimePicker.execute
  GC.Spread.Sheets.Commands.openDateTimePicker.execute = function () {
          let options = arguments[1]
          if (disabledRows.includes(options.row)) return false
          return oldOpenDateTimeCmd.apply(this, arguments as any)
        }

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 11 December 2024, 5:25 am EST - Updated 11 December 2024, 5:30 am EST

  Hi,

  Based on my understanding, you have overridden the openDateTimePicker command to disable the date picker for certain cells. However, when the cell values are changed, the date picker gets enabled and opens as per the default behavior of openDateTimePicker.

  I tested this scenario on my end, and even after changing the values of cells where the date picker was disabled, it remained disabled and did not open. Please refer to the attached GIF “Steps.gif” and the sample file: Sample.zip.

  Gif:

  To assist you better, could you share a minimal working sample along with the steps to reproduce the behavior you’ve observed? Alternatively, you can modify the provided sample to replicate the issue. This will enable me to investigate the problem thoroughly. Additionally, a GIF or video illustrating the issue would be helpful.

  Regarding: “I want to apply another customization to this command.”
  
  You can add customizations to a command by overriding it, as demonstrated in the sample. If you encounter any issues while adding the customization, please share the specific issue along with a minimal working sample or a modified the provided sample.

  Regarding: “TableSheet handles both the old and new commands. Is there a way to remove the old customization and replace it with a new one?”
  
  I couldn’t fully understand this part. Could you elaborate further with examples or scenarios? This will help us to assist you better.

  Regards,
  
  Priyam

• 

  lucas.nguyen

  • Post Options:
  • Link
    Copy

  Posted 12 December 2024, 4:14 am EST - Updated 12 December 2024, 4:39 am EST

  Sorry for the confusion.
  
  I customized the datepicker for disabled rows to prevent it from opening on specific cells. After the data changes, the previously disabled cells are no longer disabled. For this behavior, I’ve placed the following code

  GC.Spread.Sheets.Commands.openDateTimePicker.execute = function () {
          let options = arguments[1]
          if (disabledRows.includes(options.row)) return false
          return oldOpenDateTimeCmd.apply(this, arguments as any)
        }

  
  
  in an useEffect with a dependency on my data. When my data changes, openDateTimePicker executes again with the new disabled rows. However, the old datetime picker that was disabled before still cannot open. After logging the information about the current disabled rows, it seems like the previous customization and disabled rows are still there and are being added to execute instead of replaced.

  GIF:
  
  

  After refresh the page, seem like everything works as expected!

  Regards,
  
  Lucas

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 13 December 2024, 1:55 am EST - Updated 13 December 2024, 2:00 am EST

  Hi Lucas,

  From my understanding, you aim to disable the date picker for specific rows initially when the date column values are empty and enable it when the date values change. However, you’re encountering an issue where the date picker still doesn’t open after the values are updated.

  While I’m unsure of your exact implementation, I attempted to simulate the scenario based on the provided details and was able to achieve the desired behavior. In my approach, I used the provided code within a useEffect hook, setting its dependency on the data for the disabled rows, and disable rows data gets updated whenever the value is changed. Please refer to the attached GIF “Steps.gif” and the sample link below:

  Gif:

  Sample: https://jscodemine.mescius.io/share/4xwOC6p2YEC-279nvTFPOg/?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.jsx"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.jsx"}

  You can use this sample for reference and test it on your end. If the issue persists or your implementation differs, please share a minimal working sample along with the steps to replicate the behavior. This will help me assist you further.

  Regards,
  
  Priyam