How to get data change when edit on Spreadsheet and save to file?

[Nguyen Gia Huy]

I opened file exel from URL and edited. I want to save data change to file. Can you support me to slove this.

[Madhan Venkateshan]

Hi Nguyen, 

 

Thanks for contacting Syncfusion support. 

 

Query #1: Opening a excel file from the server 

 

We would like to suggest that you can open an excel file from the server using open method of spreadsheet control after http request. Please refer the code snippets below. 

 

<button class="e-btn" onclick="saveToServer()">Save Back to Server</button> 

<ejs-spreadsheet id="spreadsheet" openUrl="Home/Open" saveUrl="Home/Save" created="onCreated"></ejs-spreadsheet> 

 

<script> 

    function onCreated() { 

        var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet'); 

        var request = new XMLHttpRequest(); 

        request.responseType = "blob"; 

        request.onload = () => { 

            var file = new File([request.response], "Sample1.xlsx"); 

            spreadsheetObj.open({ file: file }); 

        } 

        request.open("GET", "/Files/" + "Sample1.xlsx"); 

        request.send(); 

    } 

 

    function saveToServer() { 

        var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet'); 

        spreadsheetObj.save(); 

    } 

</script> 

 

Query #2: Save data back to the excel file 

 

You can able to achieve this by using save method of spreadsheet control to call the server controller method, In the controller method you can able to save back to the same excel file by using SaveAs method of XlsIO. 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"; 

            } 

        } 

 

We have prepared the sample for your requirement, please refer the sample link below 

 

https://www.syncfusion.com/downloads/support/forum/149335/ze/SpreadsheetSaveBacktoServer-788227466 

 

Regards, 

Madhan V 

[Nguyen Gia Huy]

Thank you so much for your reply.
I ran project example in your link, when i clicked on button "Save Back to Server", the button did not working. Press F12, in Console tab, i got error with message :"Uncaught Uncaught SyntaxError: Unexpected token 'function'" in file constants.js:93.
Please, support me to slove this plobrem. Thank you.

[Madhan Venkateshan]

Hi Nguyen, 

 

Sorry for the inconvenience caused. 

 

The reported issue is a known issue in our side. We have fixed the issue and it will be available in upcoming patch release on November 27 and appreciate your patience until then. We would suggest you to refer the below ej2 script of previous release version 17.3.16 until upcoming patch release as a workaround solution to resolve the issue at your end. 

 

_Layout.cshtml 

<script src="https://cdn.syncfusion.com/ej2/17.3.16/dist/ej2.min.js"></script> 

 

Regards, 

Madhan V 

[Nguyen Gia Huy]

Thank you  very much. I soved this problem. 

[Madhan Venkateshan]

Hi Nguyen, 

 

Thank you for your update, We will update you once the patch release has been rolled out. 

 

Regards, 

Madhan V 

[Madhan Venkateshan]

Hi Nguyen, 

  

Thank you for your patience. 

  

We have corrected the reported issue and included it in the patch release (17.3.0.29) version. So we would suggest you to use the updated JS file to resolve the issue in your end. Please find the link below. 

   

Script Link:  

https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js 

    

Could you please check the above links and get back to us, if you need any further assistance on this. 

 

Regards, 

Madhan V