1. Home
  2. Forum
  3. Angular - EJ 2
  4. Life cycle of spreadsheet Component

Life cycle of spreadsheet Component

Hello!!
I m trying to wrap my head around how spreadsheet Component work.
I have downloaded file from server and loaded into Component .

but why all example on fourm use fetch API ? why not angular specific ?
how to send JWT token with spreadsheetobj.save  ?
if  spreadsheetobj.save is standard way then why don't we have spreadsheetobj.open ?  
does beforeSave called when ctrl + s is pressed to save locally ?
if possible please provide complete Life cycle of spreadsheet Component from loading to save.
asp.net core web api example will be good.
Thanx 

Regards 
Abdul Hanan

8 Replies 1 reply marked as answer
AB Abdul August 12, 2020 10:15 AM UTC


I m trying to save file on server this is my component.ts file

loadUrl = 'https://localhost:5001/Sheet/load';
saveUrl = 'https://localhost:5001/Sheet/SaveFile';

  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;

  constructor(private httpClient: HttpClient) {
    this.openFromServer();
  }



  openFromServer(): void {
   
    this.httpClient.get(this.loadUrl).subscribe((data) => {
      this.spreadsheetObj.openFromJson({ file: data });
    });
  }

  SavetoServer() {
    this.spreadsheetObj.save({
      fileName: 'test',
      url: this.saveUrl,
      saveType: 'Csv',
    });
  }

  beforeSave(args) {
    args.isFullPost = false;
    args.needBlobData = true;
  }

and this is component.html

<div class="sheet-container">
  <ejs-spreadsheet
    [saveUrl]="saveUrl"
    #spreadsheet
    (beforeSave)="beforeSave($event)"
  >
  </ejs-spreadsheet>
</div>

<button (click)="SavetoServer()">Save</button>

user can save with save button or  crtl + s.

by doing any of these save actions I'm getting this error.

Status Code: 415

this is server side code

   [HttpPost("SaveFile")]
        public string SaveFile(SaveSettings saveSettings)
        {
            ExcelEngine excelEngine = new ExcelEngine();
            IApplication application = excelEngine.Excel;
            try
            {
                // Convert Spreadsheet data as Stream
                Stream fileStream = Workbook.Save<Stream>(saveSettings);
                IWorkbook workbook = application.Workbooks.Open(fileStream);
                FileStream outputStream = new FileStream(filePath, FileMode.Create);
                workbook.SaveAs(outputStream);
                return "Spreadsheet saved in server";
            }
            catch (Exception ex)
            {
                return "Failure";
            }
        }


SD Saranya Dhayalan Syncfusion Team August 13, 2020 03:09 PM UTC

  
Hi Abdul, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported scenario, you can achieve this by using saveAsJson and openFromJson method in the button click event. You can get the spreadsheet data by using saveAsJSON. You can use this json and sent the json data to server. 
 
Client side 
 
App.component.html 
 
<div> 
    <button class="e-btn" (click)="saveToServer()">Save Back to Server</button> 
    <button class="e-btn" (click)="LoadFromDataBase()">Load Data</button> 
    <label>File name:</label> 
    <input type="text" id="filename" value="Sample" placeholder="Specify file name"> 
</div> 
 
 
App.component.ts 
 
saveToServer() { 
            this.spreadsheetObj.saveAsJson().then(Json => (fetch('https://localhost:44376/Home/SaveFiletoDB', { 
                method: 'POST', // or 'PUT' 
                headers: { 
                    'Content-Type': 'application/json', 
                }, 
                body: JSON.stringify({ name: (document.getElementById("filename") as HTMLInputElement).value, JSONData: JSON.stringify((Json as any).jsonObject) }), 
            }) 
                .then((response) => response.json()) 
                .then((data) => { 
                    console.log(data); 
                }))) 
        } 
        LoadFromDataBase() { 
            fetch('https://localhost:44376/Home/LoadFromDataBase', { 
                method: 'POST', // or 'PUT' 
                headers: { 
                    'Content-Type': 'application/json', 
                }, 
                body: JSON.stringify({ name: (document.getElementById("filename") as HTMLInputElement).value }), 
            }) 
                .then((response) => response.json()) 
                .then((data) => { 
                    this.spreadsheetObj.openFromJson({ file: data }); 
                }) 
        } 
 
 
Server side: 
 
    public IActionResult SaveFiletoDB([FromBody]SaveOptions saveSettings) 
        { 
            //Save JSON to database 
            SqlConnection sqlCon = new SqlConnection(connectionString); 
            sqlCon.Open(); 
            SqlCommand sqlComm = new SqlCommand("INSERT INTO [dbo].[SpreadsheetData]([filename], [data]) VALUES (@filename, @data)", sqlCon); 
            sqlComm.Parameters.AddWithValue("@filename", saveSettings.Name); 
            sqlComm.Parameters.AddWithValue("@data", saveSettings.JSONData); 
            sqlComm.ExecuteNonQuery(); 
            sqlCon.Close(); 
            return Content("Saved in Server"); 
        } 
 
 
 
        [HttpPost] 
        public string LoadFromDataBase([FromBody]FileOptions file) 
        { 
             
            OpenRequest open = new OpenRequest(); 
           //Load JSON from database 
            SqlConnection sqlCon = new SqlConnection(connectionString); 
            SqlCommand sqlComm = new SqlCommand("SELECT * FROM [dbo].[SpreadsheetData] WHERE [filename] = '" + file.Name + "'", sqlCon); 
            sqlCon.Open(); 
            SqlDataReader sqlDR = sqlComm.ExecuteReader(); 
            string JSONData = ""; 
            while (sqlDR.Read()) 
            { 
                JSONData = sqlDR.GetValue(1).ToString(); 
                open.File = JSONData; 
            } 
            sqlCon.Close(); 
            string data = JSONData ; 
            return data; // returning JSON data to spreadsheet control 
        } 
 
 
 
For your convenience we have prepared a sample. please find the below sample link: 
 
 
 
  
Query: does beforeSave called when ctrl + s is pressed to save locally ? 
 
We have checked your reported query, beforeSave event triggered when you click ctrl+s(save the file). 
 
Could you please check the above sample and get back to us if you need further assistance on this? 
 
Regards, 
Saranya D 


AB Abdul August 13, 2020 09:53 PM UTC

thanx for u response.

1- So beforeSave is called when we save with ctrl+s  and sheetcomponent.save function manually as well ? 
2- I'm trying to save file on server, but Workbook.Save(saveSettings); is throwing System.NullReferenceException: 'Object reference not set to an instance of an object.'
call stack



this is angular code

 saveToServer() {
    this.spreadsheetObj.saveAsJson().then((Json) => {
      const body = {
        fileName: 'sample.csv',
        JSONData: JSON.stringify(Json),
      };

      this.httpClient.post(this.saveUrl, body).subscribe(console.log);
    });
  }


this is server side 

   [HttpPost("SaveFile")]
        public string SaveFile([FromBody] SaveSettings saveSettings)
        {
            Console.Write("SaveFile");

            ExcelEngine excelEngine = new ExcelEngine();
            IApplication application = excelEngine.Excel;

            // Convert Spreadsheet data as Stream
            Stream fileStream = Workbook.Save(saveSettings);
            IWorkbook workbook = application.Workbooks.Open(fileStream);
            FileStream outputStream = new FileStream(filePath, FileMode.Create);
            workbook.SaveAs(outputStream);
            return "Spreadsheet saved in server";
        }




AB Abdul August 18, 2020 06:46 PM UTC

Friendly reminder !!!

SD Saranya Dhayalan Syncfusion Team August 19, 2020 06:06 AM UTC

Hi Abdul,  
 
Query: 1- So beforeSave is called when we save with ctrl+s  and sheetcomponent.save function manually as well ?  
 
Yes, beforeSave event triggered while saving the spreadsheet with ctrl+s and save function manually. 
 
2- I'm trying to save file on server, but Workbook.Save(saveSettings); is throwing System.NullReferenceException: 'Object reference not set to an instance of an object.' 
 
We have checked your reported query, you can resolve this by using save method to convert spreadsheet data as a stream. Please refer the code snippets below.  
 
HomeController.cs  
public string Save(SaveSettings saveSettings)  
        {  
            ExcelEngine excelEngine = new ExcelEngine();  
            IApplication application = excelEngine.Excel;  
            try  
            {  
                // Convert Spreadsheet data as Stream  
                Stream fileStream = Workbook.Save<Stream>(saveSettings);  
                IWorkbook workbook = application.Workbooks.Open(fileStream);  
                var filePath = Startup._env.ContentRootPath.ToString() + "/Files/Sample1.xlsx";  
                FileStream outputStream = new FileStream(filePath, FileMode.Create);  
                workbook.SaveAs(outputStream);  
                return "Spreadsheet saved in server";  
            }  
            catch (Exception ex)  
            {  
                return "Failure";  
            }  
        }  
 
Please check the above code snippet and get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


AB Abdul August 20, 2020 08:35 AM UTC

Still Getting Same Exception

this is angular2+ code
saveToServer() {
    this.spreadsheetObj.saveAsJson().then((Json) =>
      fetch(this.saveUrl, {
        method: 'POST', // or 'PUT'
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: 'FileName',
          JSONData: JSON.stringify((Json as any).jsonObject),
        }),
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
        })
    );

same code as u give, I have just changed saveUrl.

this is asp.net core webapi code.

 [HttpPost("SaveFile")]
        public string SaveFile([FromBody] SaveSettings saveSettings)
        {
            Console.Write("SaveFile");

            ExcelEngine excelEngine = new ExcelEngine();
            IApplication application = excelEngine.Excel;
            //  try
            {
                // Convert Spreadsheet data as Stream
                Stream fileStream = Workbook.Save(saveSettings);
                IWorkbook workbook = application.Workbooks.Open(fileStream);
                FileStream outputStream = new FileStream(filePath, FileMode.Create);
                workbook.SaveAs(outputStream);
                return "Spreadsheet saved in server";
            }
            //  catch (Exception ex)
            {
                //      return "Failure";
            }
            //  return "Spreadsheet saved in server";
        }

as u have told BUT

and I m still getting exception.












AB Abdul August 20, 2020 08:37 AM UTC

I did try to improve saveSetting but getting same exception



SD Saranya Dhayalan Syncfusion Team August 25, 2020 06:24 AM UTC

Hi Abdul, 
 
We have checked your reported issue, you can resolve this issue by sending the proper arguments from client side to server side. You need to send the jsonObject with workbook. Please find the below code snippet:

 
 
saveToServer() { 
        this.spreadsheetObj.saveAsJson().then((Json) => 
            fetch(this.saveUrl, { 
                method: 'POST', // or 'PUT' 
                headers: { 
                    'Content-Type': 'application/json', 
                }, 
                body: JSON.stringify({ 
                    FileName: 'FileName', 
                    JSONData: JSON.stringify((Json as any).jsonObject.Workbook), 
                    ContentType: "Xlsx", 
                    VersionType: "Xlsx", 
                }), 
            }) 
                .then((response) => response.json()) 
                .then((data) => { 
                    console.log(data); 
                }) 
        ); 
    } 
 
 
public string Save([FromBody] SaveSettings saveSettings) 
        { 
            Console.Write("SaveFile"); 
 
            ExcelEngine excelEngine = new ExcelEngine(); 
            IApplication application = excelEngine.Excel; 
              try 
            { 
                // Convert Spreadsheet data as Stream 
                Stream fileStream = Workbook.Save<Stream>(saveSettings); 
                IWorkbook workbook = application.Workbooks.Open(fileStream); 
                FileStream outputStream = new FileStream(filePath, FileMode.Create); 
                workbook.SaveAs(outputStream); 
                return "Spreadsheet saved in server"; 
            } 
             catch (Exception ex) 
            { 
                     return "Failure"; 
            } 
             return "Spreadsheet saved in server"; 
        } 
 
Please check the above code snippet and get back to us if you need further assistance on this 
 
Regards, 
Saranya D 


Marked as answer
Loader.
Up arrow icon