React SpreadJs Designer importing files programmatically

React SpreadJs Designer importing files programmatically

Posted by: ivaylo.kostov on 21 September 2021, 9:55 am EST

• 

  ivaylo.kostov

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 September 2021, 9:55 am EST

  Hello,
  
  Is it possible to import/export files into the designer programmatically and not through the File->import/export buttons? I can’t seem to find any method/prop for this. I know using the regular SpreadSheets component, files can be imported with the fromJSON method and i’m interesed in using the Designer the same way or somehow combining them so that this case can be made possible.

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 22 September 2021, 5:18 am EST

  Hi,

  You may import the file using the form JSON in the designer component as well. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  loadFile = () => {
      var xhttp = new XMLHttpRequest();
      let self = this;
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          self.spread.fromJSON(JSON.parse(xhttp.responseText));
        }
      };
      xhttp.open(
        "GET",
        "https://jsonblob.com/api/jsonBlob/890163802520436736",
        true
      );
      xhttp.send();
    };
    render() {
      return (
        <div className="App">
          <button onClick={this.loadFile}>import sample template</button>
  
          <Designer
            designerInitialized={this.designerInitialized}
            styleInfo={this.hostStyle}
          ></Designer>
        </div>
      );
    }
  
  

  sample: https://codesandbox.io/s/spring-rgb-5i945?file=/src/index.js:1299-1970

  Regards,
  
  Avinash