How do i Customize Open,Export and Save of Spreadsheet for ej2,mvc

[Francisco]

Hi  Syncfusion,

can you help to use this example, but with the new ej2, mvc and spreadsheet.

i want to  “To save excel file in Server using AJAX” with ej2 Version=18.2500.0.45

Code Example:  

CSHTML 

 

<input type="text" id="fileName" /> 

<input type="button" value="Save as Excel" onclick="saveAsExcel()" /> 

 

@(Html.EJ().Spreadsheet<object>("Spreadsheet") 

    //.. 

) 

 

// Save excel file to the server. 

function saveAsExcel(args) { 

    var xlObj = $("#Spreadsheet").data("ejSpreadsheet"), fileName = $("#fileName").val(), exportProp = xlObj.XLExport.getExportProps(); 

    $.ajax({ 

        type: "POST", 

        url: "/Spreadsheet/saveAsExcel", 

        data: { fileName: fileName, sheetModel: exportProp.model, sheetData: exportProp.data }, 

        success: function () { 

            alert("File saved successfully"); 

        } 

    }); 

} 

 

 

 

CS 

 

// Save the Spreadsheet data as Excel to server. 

[AcceptVerbs(HttpVerbs.Post)] 

public string saveAsExcel(string fileName, string sheetModel, string sheetData) 

{ 

    //File Save to server here 

    ExcelEngine excelEngine = new ExcelEngine(); 

    IApplication application = excelEngine.Excel; 

    try 

    { 

        // Convert Spreadsheet data as Stream 

        var fileStream = Spreadsheet.Save(sheetModel, sheetData, ExportFormat.XLSX, ExcelVersion.Excel2013); 

        fileStream.Position = 0; //Reset reader position 

        IWorkbook workbook = application.Workbooks.Open(fileStream); 

        var filePath = Server.MapPath("~/Files/" + fileName); 

        workbook.SaveAs(filePath); 

        return "Success"; 

    } 

    catch (Exception ex) 

    { 

        return "Failure"; 

    } 

} 

 

 

the only step that i can do today is catch the save as event in cliente and in the controller deserialize JSONData to extract all the rows, after a postback

        public void Save(SaveSettings saveSettings)

        {

            string data = saveSettings.JSONData;

            dynamic stuff = JsonConvert.DeserializeObject(data);

            Workbook.Save(saveSettings);

        }

thanks

[Madhan Venkateshan]

Hi Francisco, 

 

Good day to you. 

 

You can use ‘saveAsJson’ method to get the JSONData of spreadsheet control and pass this data to server to achieve your requirement. Please refer the below code snippets and sample link. 

 

Index.cshtml 

<button class="e-btn" id="saveButton">Save To Server</button> 

@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Home/Open").SaveUrl("Home/Save").Created("onCreated").Render() 

 

<script> 

    document.getElementById('saveButton').addEventListener('click', function () { 

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

        ssObj.saveAsJson().then((response) => { 

                var formData = new FormData(); 

                formData.append('JSONData', JSON.stringify(response.jsonObject.Workbook)); 

                formData.append('fileName', 'Sample'); 

            formData.append('saveType', 'Xlsx'); 

            $.ajax({ 

                type: "POST", 

                url: "Home/SaveToServer", 

                data: { JSONData: JSON.stringify(response.jsonObject.Workbook), fileName: "Sample", saveType: "xlsx" }, 

                success: function () { 

 

                } 

            }) 

        }); 

        }); 

} 

</script> 

 

HomeController.cs 

public string SaveToServer(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 = HttpContext.Server.MapPath("~/Files/") + saveSettings.FileName + ".xlsx"; 

                workbook.SaveAs(filePath); 

                return "Spreadsheet saved successfully."; 

            } 

            catch (Exception ex) 

            { 

                // exception code comes here 

                return "Failure"; 

            } 

        } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/156307/ze/SSSaveToServerAjax13792561 

 

Regards, 

Madhan V 

[Francisco]

amazing, thanks synfusion

nice job Madhan Venkateshan

[Madhan Venkateshan]

Hi Francisco, 

 

Most welcome. 

 

Regards, 

Madhan V 

[Jaswandi]

It will be great if you help me , I have followed below steps,

File=>open excel file (attached sample file

click on save to server button but got error on line Stream fileStream = Workbook.Save<Stream>(saveSettings);

System.ArgumentNullException: 'Value cannot be null.

Parameter name: value'

I have refer below code

https://www.syncfusion.com/forums/156307/how-do-i-customize-open-export-and-save-of-spreadsheet-for-ej2-mvc?reply=NqAeMF

Attachment: Forecast_Valid_c1799650.zip

[Gayathri KarunaiAnandam]

Hi Jaswandi, 

 

We have prepared a sample in EJ2 MVC. Please ensure the below code snippets are used in your sample. Please check the code snippet. 

 

Code: 

 

function btnCompare_Click() { 

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

        var fileName = "Sample"; 

        var contentType = "Xlsx"; 

        var versionType = "Xlsx"; 

        var saveType = "Xlsx"; 

        var pdfSettings = { FitSheetOnOnePage: false };  

 

        spreadsheetObj.saveAsJson().then(Json => (fetch('/Home/Save', { 

            method: 'POST', 

            headers: { 

                'Content-Type': 'application/json', 

            }, 

            body: JSON.stringify({ FileName: fileName, JSONData: JSON.stringify(Json.jsonObject.Workbook), SaveType: saveType, FileContentType: contentType, VersionType: versionType, PDFLayoutSettings: JSON.stringify(pdfSettings) }), // send the filename, json data, content type, version type from client to server 

        }) 

            .then((response) => response.json()) 

            .then((data) => { 

                console.log(data); 

            }))) 

 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Workable-821151259 

 

Please refer the below KB for more details, 

 

KB: https://www.syncfusion.com/kb/11956/how-to-save-and-retrieve-the-spreadsheet-data-as-json-in-database 

 

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

 

Regards, 

Gayathri K