diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index d6e00e49b..dee571dc1 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5614,6 +5614,12 @@
  • Paste only values without formatting and styles
    • +
  • Troubleshooting + +
  • Mobile Responsiveness
  • Features Availability
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/images/image.png b/Document-Processing/Excel/Spreadsheet/React/images/image.png new file mode 100644 index 000000000..82fec6a26 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/image.png differ diff --git a/Document-Processing/Excel/Spreadsheet/React/troubleshooting/http-413-entity-too-large.md b/Document-Processing/Excel/Spreadsheet/React/troubleshooting/http-413-entity-too-large.md new file mode 100644 index 000000000..22fe26207 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/troubleshooting/http-413-entity-too-large.md @@ -0,0 +1,55 @@ +--- +layout: post +title: HTTP 413 "Entity too large" in React Spreadsheet component | Syncfusion +description: Resolve the HTTP 413 'Entity too large' error when exporting large Excel files from React Spreadsheet by increasing server request limits. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Troubleshoot HTTP 413 "Entity too large" error + +Sometimes, when exporting the Spreadsheet with a large dataset, an `Entity too large` issue may occur. This is related to an HTTP request attempting to receive a large amount of data. To resolve this, configure your server to handle larger data transfers. + +## Solutions + +To resolve this, configure your local Web API back-end to accept larger request bodies. Add the following settings to increase the allowed request size: + +### Step 1: Update web.config (Server-side) + +Add or update the `requestLimits` configuration in your WebAPI's `web.config` file to increase the maximum allowed content length: + +```xml + + + + + + + + + + +``` + +### Step 2: Update Program.cs (Server-side) + +Configure the Form Options in your `Program.cs` to handle larger form submissions: + +```csharp +builder.Services.Configure(options => +{ + options.ValueLengthLimit = int.MaxValue; // or set a custom larger value + options.KeyLengthLimit = int.MaxValue; + options.MultipartBodyLengthLimit = long.MaxValue; +}); +``` + +Additionally, we recommend setting the `isFullPost` property to `false` in the `beforeSave` event when exporting large Excel files. When `isFullPost` is `false`, to mitigate Spreadsheet can lead to performance issues such as timeouts or delays, particularly due to the size and complexity during export. See the `isFullPost` [documentation]((https://help.syncfusion.com/document-processing/excel/spreadsheet/react/performance-best-practices#handling-large-file-saves-with-isfullpost-option) ) for details. + +## See Also + +* [Performance Best Practices](../performance-best-practices) +* [Open excel files](../open-excel-files.md) +* [Save Excel files](../save-excel-files.md) +* [Web Service](../web-services/webservice-overview.md) diff --git a/Document-Processing/Excel/Spreadsheet/React/troubleshooting/spreadsheet-double-header.md b/Document-Processing/Excel/Spreadsheet/React/troubleshooting/spreadsheet-double-header.md new file mode 100644 index 000000000..67a943ec9 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/troubleshooting/spreadsheet-double-header.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Double header issue in React Spreadsheet component | Syncfusion +description: Resolve duplicate or misplaced header caused by multiple refresh/resize actions in React Spreadsheet component. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Issue + +In some scenarios, the Spreadsheet header appears twice or is rendered below the data instead of at the top. This typically occurs when multiple refresh or resize actions are triggered simultaneously or in rapid succession. + +**Common cause:** +```js + this.spreadsheet.refresh(); + this.spreadsheet.resize(); // Multiple operations queued without waiting +``` + +The image below illustrates the double header rendering issue: + +![Double header example](../images/image.png) + +--- +## Troubleshooting checklist (in order) + +Follow these steps in order to diagnose and fix the double-header issue: + +1. **Ensure only one refresh/resize at a time:** Avoid triggering multiple `refresh()` or `resize()` actions simultaneously or before previous operations complete. + +2. **Avoid refresh in rapid UI updates:** Do not call `refresh()` during frequent UI updates, loops, or multiple event triggers. + +3. **Use lifecycle events carefully:** Use event handlers (`created`, `dataBound`, `actionComplete`, etc.) without redundant `refresh()` or `resize()` calls. + +4. **Verify package version:** Ensure you are using the latest version of the Spreadsheet package. Known issues related to double headers may already be resolved in newer versions. + +5. **Initialization & mounts:** Ensure the Spreadsheet component is initialized only once and that no duplicate mounts occur in your application. + +6. **Inspect frozen panes and merged cells:** If your Spreadsheet uses frozen panes, hidden rows, or merged cells, verify these features aren't interfering with header rendering. + +7. **Inspect CSS/layout issues:** Use browser developer tools to inspect and rule out CSS-related issues (position, z-index, transforms) that may visually duplicate or misplace the header. + +--- + +## See Also + +* [Performance Best Practices](../performance-best-practices) +* [Resize handling](../mobile-responsiveness) +* [Freeze panes](../freeze-pane)