Skip to content

Commit 5512d5b

Browse files
jayachandran-jayasankarjayachandran-jayasankar
committed
891499: Added code sample and UG content for open from json feature.
1 parent 71a408c commit 5512d5b

File tree

4 files changed

+290
-0
lines changed

4 files changed

+290
-0
lines changed

‎ej2-asp-core-mvc/code-snippet/spreadsheet/open-from-json/openController.cs

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
public IActionResult Open(IFormCollection openRequest)
2+
{
3+
OpenRequest open = new OpenRequest();
4+
open.File = openRequest.Files[0];
5+
return Content(Workbook.Open(open));
6+
}
7+
8+
public void Save(IList<IFormFile> UploadFiles)
9+
{
10+
long size = 0;
11+
try
12+
{
13+
foreach (var file in UploadFiles)
14+
{
15+
var filename = ContentDispositionHeaderValue
16+
.Parse(file.ContentDisposition)
17+
.FileName
18+
.Trim('"');
19+
filename = hostingEnv.WebRootPath + $@"\{filename}";
20+
size += file.Length;
21+
if (!System.IO.File.Exists(filename))
22+
{
23+
using (FileStream fs = System.IO.File.Create(filename))
24+
{
25+
//file.CopyTo(fs);
26+
//fs.Flush();
27+
}
28+
}
29+
else
30+
{
31+
using (FileStream fs = System.IO.File.Open(filename, FileMode.Append))
32+
{
33+
//file.CopyTo(fs);
34+
//fs.Flush();
35+
}
36+
}
37+
}
38+
}
39+
catch (Exception e)
40+
{
41+
Response.Clear();
42+
Response.StatusCode = 204;
43+
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
44+
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
45+
}
46+
}
47+
48+
49+
public void Remove(string UploadFile)
50+
{
51+
try
52+
{
53+
var filename = hostingEnv.WebRootPath + $@"\{UploadFile}";
54+
if (System.IO.File.Exists(filename))
55+
{
56+
System.IO.File.Delete(filename);
57+
}
58+
}
59+
catch (Exception e)
60+
{
61+
Response.Clear();
62+
Response.StatusCode = 200;
63+
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully";
64+
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
65+
}
66+
}

‎ej2-asp-core-mvc/code-snippet/spreadsheet/open-from-json/razor

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<div id="Openfromjson">
2+
<label id="Heading">Open From Json Options:</label> <br>
3+
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
4+
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
5+
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
6+
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
7+
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
8+
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
9+
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
10+
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
11+
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
12+
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
13+
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
14+
</div>
15+
@Html.EJS().Uploader("UploadFiles").Success("onSuccess").AllowedExtensions(".xls, .xlsx,
16+
.csv").showFileList(false).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings {
17+
SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save",
18+
RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" }).Render()
19+
@Html.EJS().Spreadsheet("spreadsheet").SaveUrl("Home/Save").AllowSave(true).beforeOpen("beforeOpen").Render()
20+
21+
<style>
22+
#Openfromjson {
23+
margin-top: 10px;
24+
margin-bottom: 20px;
25+
}
26+
27+
#Openfromjson input[type="checkbox"] {
28+
margin: 7px;
29+
}
30+
31+
#Openfromjson label {
32+
font-size: 14px;
33+
}
34+
35+
#Heading {
36+
font-weight: bold;
37+
}
38+
</style>
39+
40+
<script>
41+
42+
window.onload = function (args) {
43+
var uploaderObj = document.getElementById("UploadFiles").ej2_instances[0];
44+
uploaderObj.setProperties({
45+
buttons: {
46+
browse: 'Choose file'
47+
}
48+
});
49+
}
50+
51+
function beforeOpen(args) {
52+
args.cancel = true;
53+
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
54+
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
55+
fetch(
56+
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/open',
57+
args.requestData
58+
).then((response) => {
59+
response.json().then((data) => {
60+
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
61+
ssObj.openFromJson({ file: data }, options)
62+
});
63+
});
64+
}
65+
66+
function onSuccess(args) {
67+
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
68+
if (args.operation === 'upload')
69+
ssObj.open({ file: args.file.rawFile });
70+
}
71+
72+
function toggleCheckboxes() {
73+
var valueOnlyCheckbox = document.getElementById('valueOnly');
74+
var checkboxes = document.querySelectorAll('#Openfromjson input[type="checkbox"]:not(#valueOnly)');
75+
checkboxes.forEach(checkbox => {
76+
(checkbox).disabled = valueOnlyCheckbox.checked;
77+
if (valueOnlyCheckbox.checked) {
78+
(checkbox).checked = false;
79+
}
80+
});
81+
}
82+
83+
function createOptions() {
84+
const options = {};
85+
options.ignoreStyle = document.getElementById('style').checked;
86+
options.ignoreFormula = document.getElementById('formula').checked;
87+
options.ignoreFormat = document.getElementById('format').checked;
88+
options.ignoreConditionalFormat = document.getElementById('cf').checked;
89+
options.ignoreValidation = document.getElementById('dv').checked;
90+
options.ignoreFreezePane = document.getElementById('freeze').checked;
91+
options.ignoreWrap = document.getElementById('wrap').checked;
92+
options.ignoreChart = document.getElementById('chart').checked;
93+
options.ignoreImage = document.getElementById('image').checked;
94+
options.ignoreNote = document.getElementById('note').checked;
95+
return options;
96+
}
97+
</script>

‎ej2-asp-core-mvc/code-snippet/spreadsheet/open-from-json/tagHelper

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@using Syncfusion.EJ2
2+
@{
3+
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl =
4+
"https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl =
5+
"https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
6+
}
7+
<div id="Openfromjson">
8+
<label id="Heading">Open From Json Options:</label> <br>
9+
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
10+
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
11+
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
12+
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
13+
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
14+
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
15+
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
16+
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
17+
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
18+
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
19+
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
20+
</div>
21+
<ejs-uploader id="UploadFiles" success="onSuccess" asyncSettings="@asyncSettings" allowedExtensions=".xls, .xlsx, .csv"
22+
showFileList="false"> </ejs-uploader>
23+
<ejs-spreadsheet id="spreadsheet" saveUrl="Home/Save" allowSave="true" beforeOpen="beforeOpen"> </ejs-spreadsheet>
24+
25+
<style>
26+
#Openfromjson {
27+
margin-top: 10px;
28+
margin-bottom: 20px;
29+
}
30+
31+
#Openfromjson input[type="checkbox"] {
32+
margin: 7px;
33+
}
34+
35+
#Openfromjson label {
36+
font-size: 14px;
37+
}
38+
39+
#Heading {
40+
font-weight: bold;
41+
}
42+
</style>
43+
44+
<script>
45+
46+
window.onload = function (args) {
47+
var uploaderObj = document.getElementById("UploadFiles").ej2_instances[0];
48+
uploaderObj.setProperties({
49+
buttons: {
50+
browse: 'Choose file'
51+
}
52+
});
53+
}
54+
55+
function beforeOpen(args) {
56+
args.cancel = true;
57+
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
58+
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
59+
fetch(
60+
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/open',
61+
args.requestData
62+
).then((response) => {
63+
response.json().then((data) => {
64+
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
65+
ssObj.openFromJson({ file: data }, options)
66+
});
67+
});
68+
}
69+
70+
function onSuccess(args) {
71+
var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
72+
if (args.operation === 'upload')
73+
ssObj.open({ file: args.file.rawFile });
74+
}
75+
76+
function toggleCheckboxes() {
77+
var valueOnlyCheckbox = document.getElementById('valueOnly');
78+
var checkboxes = document.querySelectorAll('#Openfromjson input[type="checkbox"]:not(#valueOnly)');
79+
checkboxes.forEach(checkbox => {
80+
(checkbox).disabled = valueOnlyCheckbox.checked;
81+
if (valueOnlyCheckbox.checked) {
82+
(checkbox).checked = false;
83+
}
84+
});
85+
}
86+
87+
function createOptions() {
88+
const options = {};
89+
options.ignoreStyle = document.getElementById('style').checked;
90+
options.ignoreFormula = document.getElementById('formula').checked;
91+
options.ignoreFormat = document.getElementById('format').checked;
92+
options.ignoreConditionalFormat = document.getElementById('cf').checked;
93+
options.ignoreValidation = document.getElementById('dv').checked;
94+
options.ignoreFreezePane = document.getElementById('freeze').checked;
95+
options.ignoreWrap = document.getElementById('wrap').checked;
96+
options.ignoreChart = document.getElementById('chart').checked;
97+
options.ignoreImage = document.getElementById('image').checked;
98+
options.ignoreNote = document.getElementById('note').checked;
99+
return options;
100+
}
101+
102+
</script>

‎ej2-asp-core-mvc/spreadsheet/open-save.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,31 @@ spreadsheet.openFromJson({ file: file }, { ignoreStyle: true });
164164
| ignoreImage | If **true**, images will be excluded when loading the JSON data. |
165165
| ignoreNote | If **true**, notes will be excluded when loading the JSON data. |
166166

167+
The following code snippet demonstrates how to configure the deserialization options and pass them as arguments to the openFromJson method:
168+
169+
{% if page.publishingplatform == "aspnet-core" %}
170+
171+
{% tabs %}
172+
{% highlight cshtml tabtitle="CSHTML" %}
173+
{% include code-snippet/spreadsheet/open-from-json/tagHelper %}
174+
{% endhighlight %}
175+
{% highlight c# tabtitle="OpenController.cs" %}
176+
{% include code-snippet/spreadsheet/open-from-json/openController.cs %}
177+
{% endhighlight %}
178+
{% endtabs %}
179+
180+
{% elsif page.publishingplatform == "aspnet-mvc" %}
181+
182+
{% tabs %}
183+
{% highlight razor tabtitle="CSHTML" %}
184+
{% include code-snippet/spreadsheet/open-from-json/razor %}
185+
{% endhighlight %}
186+
{% highlight c# tabtitle="OpenController.cs" %}
187+
{% include code-snippet/spreadsheet/open-from-json/openController.cs %}
188+
{% endhighlight %}
189+
{% endtabs %}
190+
{% endif %}
191+
167192
### External workbook confirmation dialog
168193

169194
When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data.

0 commit comments

Comments
 (0)