How to load json string to Spreadjs 16

How to load json string to Spreadjs 16

Posted by: priyatama.bhadke on 30 August 2023, 12:33 pm EST

• 

  priyatama.bhadke

  • Post Options:
  • Link
    Copy

  Posted 30 August 2023, 12:33 pm EST

  Hi,

  Please find attached json string and let me know how to load this string to spreadsheet.

  Regards,
  
  Priya Btst.zip

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2023, 11:03 pm EST

  Hi,

  Please refer to the following sample that demonstrates how you can import and export JSON files.

  sample: https://codesandbox.io/s/spread-js-json-import-export-forked-dt6579?file=/index.html

  Regards,
  
  Avinash

• 

  priyatama.bhadke

  • Post Options:
  • Link
    Copy

  Posted 5 September 2023, 6:24 pm EST

  Hi Avinash,

  How to make the spreadhsheet fullscreen?

  Regards,
  
  Priya B

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2023, 8:57 pm EST

  Hi Priya,

  You could use the following code to enable the full screen for the SpreadJS.

      document.getElementById("btn").addEventListener("click", () => {
          let element = spread.getHost();
          if (element.requestFullscreen) {
              element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen();
          } else if (element.webkitRequestFullScreen) {
              element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
          }
      });

  Sample: https://jscodemine.grapecity.com/share/SEBX9yXjTECW1vBZbeCxcg/?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["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Please note that for the Designer Component, full screen doesn’t works well. In Designer Component, you wont’ be able to open any modals/dialogs. This is limited by our current design. The reason is that all the pop-up dialog host DOM elements was appended in the body and not in the designer host. No matter how we change the dialog div, it could not show on the current screen.

  This issue is already known to us and currently handled by the dev team. The internal tracking id for the issue is: SJS-12638. Currently, we don’t have an ETA when this will be resolved.

  So, if you are only using the SpreadJS and not the Designer Component, you could use the above mentioned screen to view the SpreadJS in full screen. Also, it is requested that you create separate cases/tickets for separate queries.

  Regards,

  Ankit

• 

  priyatama.bhadke

  • Post Options:
  • Link
    Copy

  Posted 7 September 2023, 5:48 pm EST

  Hi Ankit,

  In this spreadjs demo (https://www.grapecity.com/spreadjs/designer/index.html) spreadsheet and designer both are full screen. I tried to import a excel on above demo and it was also full screen then why its not full screen to current version.

  Regards,
  
  Priya B

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 10 September 2023, 4:02 pm EST

  Hi Priya,

  Sorry for the misunderstanding, I thought you want to enable the full screen for the SpreadJS as shown in the sample that I shared earlier. I think your requirement is that the SpreadJS/Designer Component takes the full width and height of the available screen (viewport).

  You could simply achieve this by defining the height and width of the host element of the SpreadJS/Designer Component.

  For example, if you are using the SpreadJS, you could define the height and width of the host element as:

  <div id="ss" style="width:100%;height:98vh;border:1px solid darkgray"></div>

  SpreadJS Sample: https://jscodemine.grapecity.com/share/9rmAonqLS0CfJqFAmd8i5g/?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"ActiveFile"%3A"%2Findex.html"}

  And if you are using the Designer Component, you could define the height and width of the host element as:

  <div id="designer-container" style="width:100%;height:98vh;border:1px solid darkgray"></div>

  Designer Sample: https://jscodemine.grapecity.com/share/nmGHmOd5QkCzKCtL9UAtXg/?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"%2Fpackage.json"]%2C"ActiveFile"%3A"%2Fpackage.json"}

  Regards,

  Ankit