Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
80 changes: 71 additions & 9 deletions Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ Please find the below table for the beforeOpen event arguments.
| file | FileList or string or File | To get the file stream. `FileList` - contains length and item index. <br/> `File` - specifies the file lastModified and file name. |
| cancel | boolean | To prevent the open operation. |
| requestData | object | To provide the Form data. |
| parseOptions | WorkbookParseOptions | Specifies options to control how the Excel file is loaded. You can skip specific properties to optimize performance. |

> * Use `Ctrl + O` keyboard shortcut to open Excel documents.
> * The default value of the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowopen) property in previous code snippet.
Expand Down Expand Up @@ -301,36 +302,96 @@ The following code snippet demonstrates how to configure the deserialization opt

### Improving Excel file open performance with parsing options

Opening large Excel files into the EJ2 Spreadsheet control can sometimes lead to slower performance and increased memory usage. This is often caused by the processing of additional elements such as styles and number formats—even when the actual data content is minimal. For example, an Excel file with only a small amount of data but a large number of styled or formatted empty cells can significantly impact load time and memory consumption.
Opening large Excel files into the EJ2 Spreadsheet control can sometimes lead to slower performance and increased memory usage. This is often caused by the processing of additional elements such as styles, number formats, formulas, validations, conditional formats, merged cells, charts, and images—even when the actual data content is minimal. For example, an Excel file with only a small amount of data but a large number of styled or formatted empty cells can significantly impact load time and memory consumption.

To address this, we've introduced parsing options that allow users to selectively skip non-essential features during the open process. By enabling options like `IgnoreStyle` and `IgnoreFormat`, you can reduce the amount of data processed, resulting in:
To address this, we've introduced parsing options that allow users to selectively skip non-essential properties during the open process. By enabling parse options, you can reduce the amount of data processed, resulting in:
* Faster load times
* Lower memory usage
* Smaller JSON responses

These enhancements are especially beneficial for users working with large or complex Excel files, offering a more efficient and responsive experience.

> **Note:** These options are ideal when styles and number formats are not critical to your use case and the focus is on loading the actual data efficiently.
Please find the table below for available parsing options
| Option | Description |
|-------------------------|--------------------------------------------------------------------|
| `IgnoreStyle` | Skips cell styling such as font, color, borders, and alignment. |
| `IgnoreFormat` | Skips number formatting rules (e.g., currency, date formats). |
| `IgnoreFormula` | Skips formula cells and imports only the last calculated values. |
| `IgnoreValidation` | Skips data validation rules. |
| `IgnoreConditionalFormat` | Skips conditional formatting rules. |
| `IgnoreMergedCell` | Skips merged cell information. |
| `IgnoreChart` | Skips embedded chart objects. |
| `IgnoreImage` | Skips embedded images. |
---

**Note:** These options are ideal when styles, formats, formulas, and other visual elements are not critical to your use case and the focus is on loading the actual data efficiently.

**Ways to Configure Parsing Option**

You can configure parsing options in two ways:

**1. Server-Side Configuration:**
Set the parsing options directly in the `server-side` when handling the Excel file open request.

The code example below demonstrates how to configure the `IgnoreStyle` and `IgnoreFormat` parsing options on the `server-side`.

**Code Snippet:**

**Server-Side Configuration:**
```csharp
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
...
open.ParseOptions = new WorkbookParseOptions() {
IgnoreStyle = true,
IgnoreFormat = true
IgnoreFormat = true,
IgnoreFormula = true,
IgnoreValidation = true,
IgnoreConditionalFormat = true,
IgnoreMergedCell = true,
IgnoreChart = true,
IgnoreImage = true
};
...
return Content(Workbook.Open(open));
}
```

**2. Client-Side Configuration Using beforeOpen Event:**
Use the beforeOpen event in the EJ2 Spreadsheet control to pass parsing options before the file is opened. These options are then handled on the server side during deserialization.

The code example below demonstrates how to configure parse options on the `client-side`.

{% tabs %}
{% highlight js tabtitle="index.js" %}
{% include code-snippet/excel/spreadsheet/javascript-es5/open-save-cs9/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
{% include code-snippet/excel/spreadsheet/javascript-es5/open-save-cs9/index.html %}
{% endhighlight %}
{% endtabs %}
{% previewsample "https://helpstaging.syncfusion.com/document-processing/code-snippet/excel/spreadsheet/javascript-es5/open-save-cs9" %}

To receive and apply the parsing options passed from the client, add deserialization logic in the server-side open request handler

**Code Snippet:**

```csharp
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
...
// Assigning the parse options to control which properties to skip while loading Excel files.
var parseOptions = openRequest["ParseOptions"];
if (!string.IsNullOrEmpty(parseOptions))
{
open.ParseOptions = System.Text.Json.JsonSerializer.Deserialize<WorkbookParseOptions (parseOptions.ToString(), new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
}
...
return Content(Workbook.Open(open));
}
```

### Chunk response processing

When opening large Excel files with many features and data, the server response can become very large. This might cause memory issues or connection problems during data transmission. The `Chunk Response Processing` feature solves this by dividing the server response into smaller parts, called chunks, and sending them to the client in parallel. The client receives these chunks and combines them to load the Excel data smoothly into the spreadsheet.
Expand Down Expand Up @@ -426,8 +487,8 @@ public IActionResult Open(IFormCollection openRequest)

The following list of Excel file formats are supported in Spreadsheet:

* MS Excel (.xlsx)
* MS Excel 97-2003 (.xls)
* Microsoft Excel (.xlsx)
* Microsoft Excel 97-2003 (.xls)
* Comma Separated Values (.csv)
* Excel Macro-Enabled Workbook (.xlsm)
* Excel Binary Workbook(.xlsb)
Expand Down Expand Up @@ -464,6 +525,7 @@ Please find the below table for the beforeSave event arguments.
| isFullPost | boolean | It sends the form data from client to server, when set to true. It fetches the data from client to server and returns the data from server to client, when set to false. |
| needBlobData | boolean | You can get the blob data if set to true. |
| cancel | boolean | To prevent the save operations. |
| jsonConfig | SerializationOptions | Specifies options to control how the Excel file is saved. You can skip specific properties to optimize performance. |

> * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file.

Expand Down Expand Up @@ -762,8 +824,8 @@ The possible values are:

The following list of Excel file formats are supported in Spreadsheet:

* MS Excel (.xlsx)
* MS Excel 97-2003 (.xls)
* Microsoft Excel (.xlsx)
* Microsoft Excel 97-2003 (.xls)
* Comma Separated Values (.csv)
* Portable Document Format (.pdf)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@ public IActionResult Open(IFormCollection openRequest)

### Optimize Excel open with parsing options

To improve performance when opening large Excel files, use parsing options like `IgnoreStyle` and `IgnoreFormat` to skip unnecessary styles and formats. This reduces memory usage, speeds up loading, and minimizes JSON size—especially helpful for files with many styled but empty cells.
To improve performance when opening large Excel files, use parsing options to skip non-essential properties during import. These options help reduce memory usage, speed up loading, and minimize JSON size—especially useful for files with complex formatting or large datasets.

By configuring the parse options, you can load Excel files into the Spreadsheet while retaining only the necessary content. This ensures efficient handling of large or high-memory files without compromising essential data.

To learn how to configure these parsing options, please refer to the UG section below.
* [Configure Parsing Options](./open-save#improving-excel-file-open-performance-with-parsing-options)
Expand Down
75 changes: 65 additions & 10 deletions Document-Processing/Excel/Spreadsheet/Javascript-ES6/open-save.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ Please find the below table for the beforeOpen event arguments.
| file | FileList or string or File | To get the file stream. `FileList` - contains length and item index. <br/> `File` - specifies the file lastModified and file name. |
| cancel | boolean | To prevent the open operation. |
| requestData | object | To provide the Form data. |
| parseOptions | WorkbookParseOptions | Specifies options to control how the Excel file is loaded. You can skip specific properties to optimize performance. |

> * Use `Ctrl + O` keyboard shortcut to open Excel documents.
> * The default value of the [allowOpen](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowopen) property in previous code snippet.
Expand Down Expand Up @@ -305,35 +306,88 @@ The following code snippet demonstrates how to configure the deserialization opt

### Improving Excel file open performance with parsing options

Opening large Excel files into the EJ2 Spreadsheet control can sometimes lead to slower performance and increased memory usage. This is often caused by the processing of additional elements such as styles and number formats—even when the actual data content is minimal. For example, an Excel file with only a small amount of data but a large number of styled or formatted empty cells can significantly impact load time and memory consumption.
Opening large Excel files into the EJ2 Spreadsheet control can sometimes lead to slower performance and increased memory usage. This is often caused by the processing of additional elements such as styles, number formats, formulas, validations, conditional formats, merged cells, charts, and images—even when the actual data content is minimal. For example, an Excel file with only a small amount of data but a large number of styled or formatted empty cells can significantly impact load time and memory consumption.

To address this, we've introduced parsing options that allow users to selectively skip non-essential features during the open process. By enabling options like `IgnoreStyle` and `IgnoreFormat`, you can reduce the amount of data processed, resulting in:
To address this, we've introduced parsing options that allow users to selectively skip non-essential properties during the open process. By enabling parse options, you can reduce the amount of data processed, resulting in:
* Faster load times
* Lower memory usage
* Smaller JSON responses

These enhancements are especially beneficial for users working with large or complex Excel files, offering a more efficient and responsive experience.

> **Note:** These options are ideal when styles and number formats are not critical to your use case and the focus is on loading the actual data efficiently.
Please find the table below for available parsing options
| Option | Description |
|-------------------------|--------------------------------------------------------------------|
| `IgnoreStyle` | Skips cell styling such as font, color, borders, and alignment. |
| `IgnoreFormat` | Skips number formatting rules (e.g., currency, date formats). |
| `IgnoreFormula` | Skips formula cells and imports only the last calculated values. |
| `IgnoreValidation` | Skips data validation rules. |
| `IgnoreConditionalFormat` | Skips conditional formatting rules. |
| `IgnoreMergedCell` | Skips merged cell information. |
| `IgnoreChart` | Skips embedded chart objects. |
| `IgnoreImage` | Skips embedded images. |

The code example below demonstrates how to configure the `IgnoreStyle` and `IgnoreFormat` parsing options on the `server-side`.
> **Note:** These options are ideal when styles, formats, formulas, and other visual elements are not critical to your use case and the focus is on loading the actual data efficiently.

**Ways to Configure Parsing Option**

You can configure parsing options in two ways:

**1. Server-Side Configuration:**
Set the parsing options directly in the `server-side` when handling the Excel file open request.

The code example below demonstrates how to configure parse options on the `server-side`.

**Code Snippet:**

**Server-Side Configuration:**
```csharp
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
...
open.ParseOptions = new WorkbookParseOptions() {
IgnoreStyle = true,
IgnoreFormat = true
IgnoreFormat = true,
IgnoreFormula = true,
IgnoreValidation = true,
IgnoreConditionalFormat = true,
IgnoreMergedCell = true,
IgnoreChart = true,
IgnoreImage = true
};
...
return Content(Workbook.Open(open));
}
```
**2. Client-Side Configuration Using beforeOpen Event:**
Use the beforeOpen event in the EJ2 Spreadsheet control to pass parsing options before the file is opened. These options are then handled on the server side during deserialization.
The code example below demonstrates how to configure parse options on the `client-side`.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
{% include code-snippet/excel/spreadsheet/javascript-es6/open-save-cs9/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
{% include code-snippet/excel/spreadsheet/javascript-es6/open-save-cs9/index.html %}
{% endhighlight %}
{% endtabs %}
{% previewsample "https://helpstaging.syncfusion.com/document-processing/code-snippet/excel/spreadsheet/javascript-es6/open-save-cs9" %}
To receive and apply the parsing options passed from the client, add deserialization logic in the server-side open request handler
**Code Snippet:**
```csharp
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
...
// Assigning the parse options to control which properties to skip while loading Excel files.
var parseOptions = openRequest["ParseOptions"];
if (!string.IsNullOrEmpty(parseOptions))
{
open.ParseOptions = System.Text.Json.JsonSerializer.Deserialize<WorkbookParseOptions (parseOptions.ToString(), new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
}
...
return Content(Workbook.Open(open));
}
```

### Chunk response processing

Expand Down Expand Up @@ -432,8 +486,8 @@ public IActionResult Open(IFormCollection openRequest)

The following list of Excel file formats are supported in Spreadsheet:

* MS Excel (.xlsx)
* MS Excel 97-2003 (.xls)
* Microsoft Excel (.xlsx)
* Microsoft Excel 97-2003 (.xls)
* Comma Separated Values (.csv)
* Excel Macro-Enabled Workbook (.xlsm)
* Excel Binary Workbook(.xlsb)
Expand Down Expand Up @@ -470,6 +524,7 @@ Please find the below table for the beforeSave event arguments.
| isFullPost | boolean | It sends the form data from client to server, when set to true. It fetches the data from client to server and returns the data from server to client, when set to false. |
| needBlobData | boolean | You can get the blob data if set to true. |
| cancel | boolean | To prevent the save operations. |
| jsonConfig | SerializationOptions | Specifies options to control how the Excel file is saved. You can skip specific properties to optimize performance. |

> * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file.

Expand Down Expand Up @@ -769,8 +824,8 @@ The possible values are:

The following list of Excel file formats are supported in Spreadsheet:

* MS Excel (.xlsx)
* MS Excel 97-2003 (.xls)
* Microsoft Excel (.xlsx)
* Microsoft Excel 97-2003 (.xls)
* Comma Separated Values (.csv)
* Portable Document Format (.pdf)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,11 @@ public IActionResult Open(IFormCollection openRequest)

### Optimize Excel open with parsing options

To improve performance when opening large Excel files, use parsing options like `IgnoreStyle` and `IgnoreFormat` to skip unnecessary styles and formats. This reduces memory usage, speeds up loading, and minimizes JSON size—especially helpful for files with many styled but empty cells.
To improve performance when opening large Excel files, use parsing options to skip non-essential properties during import. These options help reduce memory usage, speed up loading, and minimize JSON size—especially useful for files with complex formatting or large datasets.

To learn how to configure these parsing options, please refer to the UG section below.
By configuring the parse options, you can load Excel files into the Spreadsheet while retaining only the necessary content. This ensures efficient handling of large or high-memory files without compromising essential data.

To learn how to configure the parsing options, please refer to the UG section below.
* [Configure Parsing Options](./open-save#improving-excel-file-open-performance-with-parsing-options)

## How to improve performance on formula calculation in Spreadsheet?
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpreadSheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for TypeScript Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/material.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="system.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='spreadsheet'></div>
</div>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

// Initialize the Spreadsheet control
const spreadsheet = new Spreadsheet({
allowOpen: true,
openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',
beforeOpen: function(args) {
args.parseOptions = {
ignoreStyle: true,
ignoreFormat: true,
ignoreChart: true,
ignoreImage: true,
ignoreMergedCell: true,
ignoreFormula: true,
ignoreValidation: true,
ignoreConditionalFormat: true,
};
},
});

// Append the spreadsheet to the DOM
spreadsheet.appendTo('#spreadsheet');
Loading