Skip to content

Documentation(EJ2-891499): Added code sample and UG content for json serialization feature. #3110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 21, 2024
Merged

Documentation(EJ2-891499): Added code sample and UG content for json serialization feature. #3110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a5e1dda
891499: Added code sample and UG content for Save as json feature.
jayachandran-jayasankar Jun 19, 2024
71a408c
891499: Added code sample and UG content for Save as json feature.
jayachandran-jayasankar Jun 20, 2024
5512d5b
891499: Added code sample and UG content for open from json feature.
jayachandran-jayasankar Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions ej2-asp-core-mvc/code-snippet/spreadsheet/open-from-json/openController.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
open.File = openRequest.Files[0];
return Content(Workbook.Open(open));
}

public void Save(IList<IFormFile> UploadFiles)
{
long size = 0;
try
{
foreach (var file in UploadFiles)
{
var filename = ContentDispositionHeaderValue
.Parse(file.ContentDisposition)
.FileName
.Trim('"');
filename = hostingEnv.WebRootPath + $@"\{filename}";
size += file.Length;
if (!System.IO.File.Exists(filename))
{
using (FileStream fs = System.IO.File.Create(filename))
{
//file.CopyTo(fs);
//fs.Flush();
}
}
else
{
using (FileStream fs = System.IO.File.Open(filename, FileMode.Append))
{
//file.CopyTo(fs);
//fs.Flush();
}
}
}
}
catch (Exception e)
{
Response.Clear();
Response.StatusCode = 204;
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
}
}


public void Remove(string UploadFile)
{
try
{
var filename = hostingEnv.WebRootPath + $@"\{UploadFile}";
if (System.IO.File.Exists(filename))
{
System.IO.File.Delete(filename);
}
}
catch (Exception e)
{
Response.Clear();
Response.StatusCode = 200;
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully";
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
}
}
97 changes: 97 additions & 0 deletions ej2-asp-core-mvc/code-snippet/spreadsheet/open-from-json/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<div id="Openfromjson">
<label id="Heading">Open From Json Options:</label> <br>
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
</div>
@Html.EJS().Uploader("UploadFiles").Success("onSuccess").AllowedExtensions(".xls, .xlsx,
.csv").showFileList(false).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings {
SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save",
RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" }).Render()
@Html.EJS().Spreadsheet("spreadsheet").SaveUrl("Home/Save").AllowSave(true).beforeOpen("beforeOpen").Render()

<style>
#Openfromjson {
margin-top: 10px;
margin-bottom: 20px;
}

#Openfromjson input[type="checkbox"] {
margin: 7px;
}

#Openfromjson label {
font-size: 14px;
}

#Heading {
font-weight: bold;
}
</style>

<script>

window.onload = function (args) {
var uploaderObj = document.getElementById("UploadFiles").ej2_instances[0];
uploaderObj.setProperties({
buttons: {
browse: 'Choose file'
}
});
}

function beforeOpen(args) {
args.cancel = true;
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
fetch(
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/open',
args.requestData
).then((response) => {
response.json().then((data) => {
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
ssObj.openFromJson({ file: data }, options)
});
});
}

function onSuccess(args) {
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
if (args.operation === 'upload')
ssObj.open({ file: args.file.rawFile });
}

function toggleCheckboxes() {
var valueOnlyCheckbox = document.getElementById('valueOnly');
var checkboxes = document.querySelectorAll('#Openfromjson input[type="checkbox"]:not(#valueOnly)');
checkboxes.forEach(checkbox => {
(checkbox).disabled = valueOnlyCheckbox.checked;
if (valueOnlyCheckbox.checked) {
(checkbox).checked = false;
}
});
}

function createOptions() {
const options = {};
options.ignoreStyle = document.getElementById('style').checked;
options.ignoreFormula = document.getElementById('formula').checked;
options.ignoreFormat = document.getElementById('format').checked;
options.ignoreConditionalFormat = document.getElementById('cf').checked;
options.ignoreValidation = document.getElementById('dv').checked;
options.ignoreFreezePane = document.getElementById('freeze').checked;
options.ignoreWrap = document.getElementById('wrap').checked;
options.ignoreChart = document.getElementById('chart').checked;
options.ignoreImage = document.getElementById('image').checked;
options.ignoreNote = document.getElementById('note').checked;
return options;
}
</script>
102 changes: 102 additions & 0 deletions ej2-asp-core-mvc/code-snippet/spreadsheet/open-from-json/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
@using Syncfusion.EJ2
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl =
"https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl =
"https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}
<div id="Openfromjson">
<label id="Heading">Open From Json Options:</label> <br>
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
</div>
<ejs-uploader id="UploadFiles" success="onSuccess" asyncSettings="@asyncSettings" allowedExtensions=".xls, .xlsx, .csv"
showFileList="false"> </ejs-uploader>
<ejs-spreadsheet id="spreadsheet" saveUrl="Home/Save" allowSave="true" beforeOpen="beforeOpen"> </ejs-spreadsheet>

<style>
#Openfromjson {
margin-top: 10px;
margin-bottom: 20px;
}

#Openfromjson input[type="checkbox"] {
margin: 7px;
}

#Openfromjson label {
font-size: 14px;
}

#Heading {
font-weight: bold;
}
</style>

<script>

window.onload = function (args) {
var uploaderObj = document.getElementById("UploadFiles").ej2_instances[0];
uploaderObj.setProperties({
buttons: {
browse: 'Choose file'
}
});
}

function beforeOpen(args) {
args.cancel = true;
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
fetch(
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/open',
args.requestData
).then((response) => {
response.json().then((data) => {
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
ssObj.openFromJson({ file: data }, options)
});
});
}

function onSuccess(args) {
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
if (args.operation === 'upload')
ssObj.open({ file: args.file.rawFile });
}

function toggleCheckboxes() {
var valueOnlyCheckbox = document.getElementById('valueOnly');
var checkboxes = document.querySelectorAll('#Openfromjson input[type="checkbox"]:not(#valueOnly)');
checkboxes.forEach(checkbox => {
(checkbox).disabled = valueOnlyCheckbox.checked;
if (valueOnlyCheckbox.checked) {
(checkbox).checked = false;
}
});
}

function createOptions() {
const options = {};
options.ignoreStyle = document.getElementById('style').checked;
options.ignoreFormula = document.getElementById('formula').checked;
options.ignoreFormat = document.getElementById('format').checked;
options.ignoreConditionalFormat = document.getElementById('cf').checked;
options.ignoreValidation = document.getElementById('dv').checked;
options.ignoreFreezePane = document.getElementById('freeze').checked;
options.ignoreWrap = document.getElementById('wrap').checked;
options.ignoreChart = document.getElementById('chart').checked;
options.ignoreImage = document.getElementById('image').checked;
options.ignoreNote = document.getElementById('note').checked;
return options;
}

</script>
103 changes: 103 additions & 0 deletions ej2-asp-core-mvc/code-snippet/spreadsheet/save-as-json/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<div id="Saveasjson">
<label id="Heading">Save As Json Options:</label> <br>
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
</div>
@Html.EJS().Button("save").Content("Save with JSON Serialization").Render();
@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpem(true).Render()

<style>
#Saveasjson {
margin-top: 10px;
margin-bottom: 20px;
}

#Saveasjson input[type="checkbox"] {
margin: 7px;
}

#Saveasjson label {
font-size: 14px;
}

#Heading {
font-weight: bold;
}
</style>

<script>

function toggleCheckboxes() {
let valueOnlyCheckbox = document.getElementById('valueOnly');
let checkboxes = document.querySelectorAll('#Saveasjson input[type="checkbox"]:not(#valueOnly)');
checkboxes.forEach(checkbox => {
checkbox.disabled = valueOnlyCheckbox.checked;
if (valueOnlyCheckbox.checked) {
checkbox.checked = false;
}
});
}

function createOptions() {
const options = {};
options.ignoreStyle = document.getElementById('style').checked;
options.ignoreFormula = document.getElementById('formula').checked;
options.ignoreFormat = document.getElementById('format').checked;
options.ignoreConditionalFormat = document.getElementById('cf').checked;
options.ignoreValidation = document.getElementById('dv').checked;
options.ignoreFreezePane = document.getElementById('freeze').checked;
options.ignoreWrap = document.getElementById('wrap').checked;
options.ignoreChart = document.getElementById('chart').checked;
options.ignoreImage = document.getElementById('image').checked;
options.ignoreNote = document.getElementById('note').checked;
return options;
}

var saveElement = document.getElementById("save");
if (saveElement) {
// Save button click event listener
saveElement.onclick = () => {
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
spreadsheetObj.saveAsJson(options).then((response) => {
var formData = new FormData();
formData.append(
'JSONData',
JSON.stringify(response.jsonObject.Workbook)
);
formData.append('fileName', 'Sample');
formData.append('saveType', 'Xlsx');
formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' })),
fetch(
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/save',
{
method: 'POST',
body: formData,
}
).then((response) => {
response.blob().then((data) => {
var anchor = ej.base.createElement('a', {
attrs: { download: 'Sample.xlsx' },
});
var url = URL.createObjectURL(data);
anchor.href = url;
document.body.appendChild(anchor);
anchor.click();
URL.revokeObjectURL(url);
document.body.removeChild(anchor);
});
});
});
};
}
</script>
6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/spreadsheet/save-as-json/saveController.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
open.File = openRequest.Files[0];
return Content(Workbook.Open(open));
}
Loading