diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/accessibility.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/accessibility.md index 673a28caf0..e47a45534e 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/accessibility.md @@ -1,22 +1,22 @@ --- layout: post -title: Accessibility in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Accessibility in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Accessibility in EJ2 JavaScript Spreadsheet control | Syncfusion +description: Learn here all about Accessibility in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Accessibility +control: Accessibility documentation: ug --- -# Accessibility in EJ2 Javascript Spreadsheet control +# Accessibility in EJ2 JavaScript Spreadsheet control -The [JavaScript Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The [JavaScript Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Spreadsheet control is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 ](https://www.w3.org/TR/WCAG22/) Support | Intermediate | -| [Section 508 ](https://www.section508.gov/) Support | Intermediate | +| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | Intermediate | +| [Section 508](https://www.section508.gov/) Support | Intermediate | | Screen Reader Support | Intermediate | | Right-To-Left Support | Yes | | Color Contrast | Yes | @@ -61,7 +61,7 @@ The Spreadsheet control followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/ ## Keyboard interaction -The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet control. +The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet control. | Press | To do this | |----------|-------------| @@ -100,14 +100,15 @@ The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/W | Tab | Complete the cell editing and select the next cell in the same row. | | Shift + Tab | Complete the cell editing and select the previous cell in the same row. | | Alt | Focus on the active ribbon tab. | -| Left | Move the focus to the previous items in the ribbon content. | -| Right | Move the focus to the next items in the ribbon content. | +| Left | Move the focus to the previous item in the ribbon content. | +| Right | Move the focus to the next item in the ribbon content. | | Alt + Down | Open the ribbon dropdown menu. | | Esc / Alt + Up | Close the ribbon dropdown menu. | ## Ensuring accessibility -The Spreadsheet control's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Spreadsheet control's accessibility levels are verified through the [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. + The accessibility compliance of the Spreadsheet control is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/spreadsheet.html) in a new window to evaluate the accessibility of the Spreadsheet control with accessibility tools. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-node-js-server.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-node-js-server.md index 2aaa97009c..e2cce878a2 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-node-js-server.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-node-js-server.md @@ -9,7 +9,7 @@ documentation: ug # AI Assist Node.js Server Setup in JavaScript Spreadsheet -AI Assist requires a backend service to process prompts and return AI-generated responses. This topic explains how to create a **Node.js** server with **Azure OpenAI** credentials. +AI Assist requires a backend service to process prompts and return AI-generated responses. This how-to guide shows how to create a **Node.js** server with **Azure OpenAI** credentials and connect it to the JavaScript Spreadsheet. ## Prerequisites @@ -80,7 +80,7 @@ Ensure your `package.json` includes `"type": "module"` to support ES module impo Create a `.env` file in the project root and add your Azure OpenAI credentials: -```csharp +```ini apiKey = Your_Azure_OpenAI_API_Key endpoint = https://your-resource.openai.azure.com/ deployment = Your_Deployment_Name @@ -91,7 +91,7 @@ apiVersion = Your_Azure_OpenAI_API_Version ## Configure required modules -Create `ai-model.js` to initialize the Azure OpenAI client using the credentials from `.env`: +Create `ai-model.js` in the project root to initialize the Azure OpenAI client using the credentials from `.env`. The client is created once and reused for every request. ```js import { AzureOpenAI } from "openai"; @@ -157,13 +157,13 @@ app.listen(PORT, () => { ## Run the server -Run the following command to start the server: +From the project root, start the server: ```bash npm start ``` -The server runs on `http://localhost:3000`. Update the AI Assist endpoint like below: +The AI Assist chat endpoint exposed by this server is: ``` http://localhost:3000/api/AIAssist/Chat @@ -206,8 +206,8 @@ The server accepts a `POST` request with the following JSON body: ```json { "messages": [ - { "role": "system", "content": "You are a spreadsheet assistant." }, - { "role": "user", "content": "Make the header row bold." } + { "role": "system", "content": "You are a spreadsheet assistant." }, + { "role": "user", "content": "Make the header row bold." } ] } ``` @@ -223,7 +223,7 @@ And returns: ## Sample -A Node.js server sample project is available for quick setup. Extract the archive, update the Azure OpenAI credentials in the `.env` file, and start the server using the following command +A Node.js server sample project is available for quick setup. Extract the archive, update the Azure OpenAI credentials in the `.env` file, and start the server using the following command: ```bash npm start diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-web-api.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-web-api.md index 0f8b9d7857..c3d6ed5184 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-web-api.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/ai-service/using-web-api.md @@ -58,7 +58,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI ## Configure credentials -Add the Azure OpenAI credentials in `appsettings.json` under `AI` section: +Add the Azure OpenAI credentials in `appsettings.json` under the `AI` section: ```json { @@ -201,7 +201,7 @@ https://localhost:{port}/api/AIAssist/Chat ## Connect to the JavaScript Spreadsheet -Once the server is listening, configure the `requestUrl` inside [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) to point to the server endpoint: +After the server is running, configure the `requestUrl` inside [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) to point to the server endpoint. ```js ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist); diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/integration.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/integration.md index a421ee1206..4111a0ffd3 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/integration.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/integration.md @@ -62,11 +62,11 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({ spreadsheet.appendTo('#element'); ``` -This enables the AI Assist into the spreadsheet. +This enables AI Assist in the Spreadsheet. ### Configure AI Assist Settings -Use the [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) property to connect the spreadsheet to the backend server and customize the AI Assist. +Use the [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) property to connect the Spreadsheet to the backend server and customize the AI Assist. ```js ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist); @@ -90,8 +90,8 @@ Your Spreadsheet is now integrated with AI Assist and ready to use. ### Open and Close the AI Panel * **Open**: Click the **AI Assist** button in the ribbon toolbar. -* **Close**: Click the **✕** button inside the panel header, or click the **AI Assist** ribbon button again. -* **Start new conversation.**: Click the **↺ (Refresh)** button in the panel header. +* **Close**: Click the **Close (✕)** button inside the panel header, or click the **AI Assist** ribbon button again. +* **Start a new conversation**: Click the **Refresh (↺)** button in the panel header. * **Resize the panel**: Drag the left edge of the panel to make it wider or narrower. ### Undo an AI Action @@ -100,7 +100,7 @@ All actions performed by AI Assist are recorded in the spreadsheet's undo/redo h ### How to Customize the Request Before Sending -Use the [`promptRequest`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptrequest) event to add custom data — such as a user ID or session token — to the request before it reaches your server. +Use the [`promptRequest`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptrequest) event to add custom data, such as a user ID or session token, to the request before it reaches your server. ```js ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist); @@ -122,8 +122,7 @@ You can also prevent the request entirely by setting `args.cancel = true`. ### How to Handle AI Responses -Use the [`promptResponse`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptresponse) event to run custom logic after the AI completes its task — for example, logging results or showing a notification. - +Use the [`promptResponse`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptresponse) event to run custom logic after the AI completes its task, for example logging results or showing a notification. ```js ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist); @@ -182,7 +181,7 @@ If the AI panel displays an error message: Type your request in plain English — no formulas or technical knowledge needed. -#### Data Analysis +#### Data analysis | What to say | What it does | |---|---| @@ -190,7 +189,7 @@ Type your request in plain English — no formulas or technical knowledge needed | *"What are the top 5 rows by sales?"* | Picks out the highest-performing records from your data | | *"Generate a full report for this sheet"* | Creates a structured report with KPIs, top records, and chart suggestions | -#### Data Operations +#### Data operations | What to say | What it does | |---|---| @@ -207,7 +206,7 @@ Type your request in plain English — no formulas or technical knowledge needed | *"Make the text italic and red in column C"* | Applies italic style and red font color to the column | | *"Make the text fit inside the cells in column D"* | Turns on text wrapping so long text does not overflow | -#### Rules & Validation +#### Rules and validation | What to say | What it does | |---|---| @@ -216,7 +215,7 @@ Type your request in plain English — no formulas or technical knowledge needed | *"Only allow values between 1 and 100 in column B"* | Adds a data validation rule to restrict input | | *"Add a dropdown list with Yes and No options to column C"* | Creates a dropdown for easy, consistent data entry | -#### Structure Management +#### Structure management | What to say | What it does | |---|---| @@ -233,7 +232,7 @@ Type your request in plain English — no formulas or technical knowledge needed | *"Show me only the rows where the region is India"* | Applies a filter so only matching rows are visible | | *"Find all cells that say 'Pending' and change them to 'Done'"* | Runs a find and replace across the sheet | -#### Clipboard Actions +#### Clipboard actions | What to say | What it does | |---|---| diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/overview.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/overview.md index e0af46dad6..91b0c484ce 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/ai-assist/overview.md @@ -9,7 +9,7 @@ documentation: ug # AI Assist in JavaScript Spreadsheet control -**AI Assist** brings AI-powered capabilities directly into the spreadsheet. Instead of manually applying formatting, writing formulas, or organizing data, you can describe what you want in plain English — and the AI Assist performs the action for you. +**AI Assist** brings AI-powered capabilities directly into the Spreadsheet control. Instead of manually applying formatting, writing formulas, or organizing data, you can describe what you want in plain English — and the AI Assist performs the action for you. ![Spreadsheet AI Assist panel](../images/spreadsheet_ai_assist.gif) @@ -19,7 +19,7 @@ AI Assist integrates seamlessly into your JavaScript Spreadsheet application wit For complete setup instructions, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration). -## How AI Assist Works in spreadsheet +## How AI Assist Works in the Spreadsheet Understanding how AI Assist processes your request helps you write better prompts and get more reliable results. @@ -31,14 +31,14 @@ When you submit a prompt in the AI Assist panel, the following happens behind th Your prompt is sent to the AI server, which reads it and determines what type of action you want — for example, formatting, editing, generating a report, or creating a chart. This step figures out the *what*. - **Command Generation** -Once the intent is known, the spreadsheet's current data and the identified action are sent back to the AI. The AI then generates a precise set of instructions — such as which cells to update, what styles to apply, or what chart data to use. This step figures out the *how*. +Once the intent is known, the Spreadsheet's current data and the identified action are sent back to the AI. The AI then generates a precise set of instructions — such as which cells to update, what styles to apply, or what chart data to use. This step figures out the *how*. - **Execution** -The generated instructions are applied directly to the spreadsheet. The result appears instantly in the grid, and a confirmation message is shown in the AI panel. Every change is also added to the undo history, so nothing is permanent. +The generated instructions are applied directly to the Spreadsheet. The result appears instantly in the grid, and a confirmation message is shown in the AI panel. Every change is also added to the undo history, so nothing is permanent. ## Supported Features -AI Assist supports a wide range of spreadsheet operations through natural language prompts: +AI Assist supports a wide range of Spreadsheet operations through natural language prompts. | Feature | Description | |---|---| diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/global-local.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/global-local.md index 233a5791f5..bbdc73bc94 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/global-local.md @@ -1,18 +1,17 @@ --- layout: post -title: Global local in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Global local in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Global local in EJ2 JavaScript Spreadsheet control | Syncfusion +description: Learn here all about Global local in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing control: Global local documentation: ug --- -# Global local in EJ2 Javascript Spreadsheet control +# Globalization and Localization in EJ2 JavaScript Spreadsheet control ## Localization -The [`Localization`](https://ej2.syncfusion.com/javascript/documentation/common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the -[`locale`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#locale) value and translation object. +The [Localization](https://ej2.syncfusion.com/javascript/documentation/common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on features such as cell formatting, Merge, and Data validation. You can change this text to other cultures (Arabic, Deutsch, French, and so on) by setting the [`locale`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#locale) property and providing a translation object via the [`L10n`](https://ej2.syncfusion.com/javascript/documentation/api/base/l10n) class. The following list of properties and their values are used in the Spreadsheet. @@ -137,7 +136,7 @@ RADIANS | Converts degrees into radians. MATCH | Returns the relative position of a specified value in the given range. DefineNameExists | This name already exists try a different name. CircularReference | When a formula refers to one or more circular references this may result in an incorrect calculation. -ShowRowsWhere | Show rows where | +ShowRowsWhere | Show rows where CustomFilterDatePlaceHolder | Choose a date CustomFilterPlaceHolder | Enter the value CustomFilter | Custom Filter @@ -197,12 +196,12 @@ ProtectAllowUser | Allow all users of this worksheet to | EditAlert | The cell you're trying to change is protected. To make a change, unprotect the sheet. FindReplaceTooltip | Find & Replace InsertingEmptyValue | Reference value is not valid. -ByRow | By Row +ByRow | By Row ByColumn | By Column MatchExactCellElements | Match Exact Cell Contents EntercellAddress | Enter Cell Address FindAndReplace | Find and Replace -ReplaceAllEnd | matches replaced with. +ReplaceAllEnd | matches replaced with. FindNextBtn | Find Next FindPreviousBtn | Find Previous ReplaceBtn | Replace @@ -213,7 +212,7 @@ SearchWithin | Search within SearchBy | Search by Reference | Reference Workbook | Workbook -NoElements | We couldn’t find what you were looking for. +NoElements | We couldn't find what you were looking for. FindWhat | Find what ReplaceWith | Replace with EnterValue | Enter Value @@ -411,7 +410,7 @@ The following example demonstrates the Spreadsheet in French [`fr-CH`] culture. ## Right to left (RTL) -RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the [`enableRtl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#enablertl) to true. +RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experience and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the [`enableRtl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#enablertl) to true. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/change-active-sheet.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/change-active-sheet.md index bd74c5987b..37313f2b5e 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/change-active-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/change-active-sheet.md @@ -1,15 +1,15 @@ --- layout: post title: Change active sheet in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about changing active sheet index when import a file in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +description: Learn how to change the active sheet index when importing a file in the Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Spreadsheet +control: Spreadsheet documentation: ug --- -# Changing the active sheet in EJ2 Javascript Spreadsheet control +# Changing the active sheet in the EJ2 JavaScript Spreadsheet control -You can change the active sheet of imported file by updating [`activeSheetIndex`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#activesheetindex) property on the [`openComplete`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#opencomplete) event. +You can change the active sheet of imported file by updating [`activeSheetIndex`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#activesheetindex) property on the [`openComplete`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#opencomplete) event. The following code example shows how to set the active sheet when importing an Excel file. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/create-a-object-structure.md index a492de01dd..d866beefb0 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/create-a-object-structure.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/create-a-object-structure.md @@ -1,7 +1,7 @@ --- layout: post -title: Create a object structure in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Create a object structure in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Create object structure in EJ2 Javascript Spreadsheet | Syncfusion +description: Learn here all about creating an object structure in the Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing control: Create a object structure documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Create a object structure in EJ2 Javascript Spreadsheet control -This topic guides you to construct a JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#properties) of the spreadsheet as value. +This topic describes the JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method to render the Spreadsheet. The JSON structure is an object with the key `Workbook` whose value contains the [`properties`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#properties) of the spreadsheet. ```js @@ -72,7 +72,7 @@ The following table defines each property of the `Cell`. | rowSpan | number | Specifies the row-wise cell merge count. | | style | `CellStyle` | Specifies the cell style options. | | validation | `Validation` | Specifies the validation of the cell. | -| image | `Image[]` | Specifies the image of the cell. | +| image | `Image[]` | Specifies the images anchored to the cell. | The following table defines each property of the `CellStyle`. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/identify-the-context-menu-opened.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/identify-the-context-menu-opened.md index 9bb2037fb8..5ed29addbf 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/identify-the-context-menu-opened.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/how-to/identify-the-context-menu-opened.md @@ -1,17 +1,17 @@ --- layout: post -title: Identify the context menu opened in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about how to identify the context menu opened in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Identify context menu opened in Javascript Spreadsheet | Syncfusion +description: Learn here all about how to identify the context menu opened in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Spreadsheet +control: Spreadsheet documentation: ug --- -# Identify the context menu opened in EJ2 Javascript Spreadsheet control +# Identify the context menu opened in EJ2 JavaScript Spreadsheet control The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears. -The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#contextmenubeforeopen) event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below. +The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#contextmenubeforeopen) event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below. | Class name | Context menu name | |-------|---------| diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/keyboard-shortcuts.md index 340bfb25e8..1bd9af35a2 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/keyboard-shortcuts.md @@ -1,24 +1,24 @@ --- layout: post -title: Keyboard shortcuts in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Keyboard shortcuts in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Keyboard shortcuts in EJ2 JavaScript Spreadsheet control | Syncfusion +description: Learn here all about Keyboard shortcuts in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Keyboard shortcuts +control: Keyboard shortcuts documentation: ug --- -# Keyboard shortcuts in EJ2 Javascript Spreadsheet control +# Keyboard shortcuts in EJ2 JavaScript Spreadsheet control -The keyboard shortcuts supported in the spreadsheet are, +The following tables list the built-in keyboard shortcuts supported by the Syncfusion EJ2 JavaScript Spreadsheet control. Use this page as a quick reference while working in the spreadsheet UI. | Shortcut | Description | |-------|---------| -| Ctrl + O | Displays dialog to open a file. | +| Ctrl + O | Displays the **Open** dialog to open a file. | | Ctrl + S / Alt + F2 | Saves the workbook. | -| Ctrl + P | Print the active worksheet when the spreadsheet is in focus. | -| F2 | Enables edit mode. | -| ESC | Cancel edit mode and discard the changes. | -| Backspace and SPACE | Clears content of the active cell and enables edit mode. | +| Ctrl + P | Prints the active worksheet when the spreadsheet is in focus. | +| F2 | Enables Edit mode for the active cell. | +| ESC | Cancels Edit mode and discards the changes. | +| Backspace | Clears the content of the active cell and enables Edit mode. | | Ctrl + C | Copies the selected cells. | | Ctrl + X | Cuts the selected cells. | | Ctrl + V | Paste the clipboard(cut or copied) content in the new selected range. | @@ -28,11 +28,11 @@ The keyboard shortcuts supported in the spreadsheet are, | Ctrl + 5 | Applies or removes ~~strikethrough~~. | | Ctrl + Z | Reverses (Undo) the last action. | | Ctrl + Y | Repeats (Redo) the last reversed action. | -| Ctrl + K | It opens the `Insert Hyperlink` dialog for adding new hyperlink to a cell. If the selected cell already contains hyperlink, it opens the `Edit Hyperlink` dialog. | -| Ctrl + F / Shift + F5 | Opens `Find` dialog. | -| Ctrl + H | Opens `Find and Replace` dialog. | -| Ctrl + G | Opens `GoTo` dialog, which helps to navigate to cell. | -| Ctrl + Shift + L | Applies filter to the first row of the selected range or used range. | +| Ctrl + K | Opens the `Insert Hyperlink` dialog. If the active cell already contains a hyperlink, opens the `Edit Hyperlink` dialog instead. | +| Ctrl + F / Shift + F5 | Opens the `Find` dialog. | +| Ctrl + H | Opens the `Find and Replace` dialog. | +| Ctrl + G | Opens the `GoTo` dialog to navigate to a specific cell. | +| Ctrl + Shift + L | Applies a filter to the first row of the selected range or used range. | | Alt + F | Opens the `File` menu. | | Alt + H | Go to `Home` tab. | | Alt + N | Go to `Insert` tab. | diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/mobile-responsiveness.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/mobile-responsiveness.md index a00b35b6e9..2a73ea86bc 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/mobile-responsiveness.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/mobile-responsiveness.md @@ -1,17 +1,17 @@ --- layout: post -title: Mobile responsiveness in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Mobile responsiveness in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Mobile responsiveness in EJ2 JavaScript Spreadsheet | Syncfusion +description: Learn here all about Mobile responsiveness in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Mobile responsiveness +control: Mobile responsiveness documentation: ug --- -# Mobile responsiveness in EJ2 Javascript Spreadsheet control +# Mobile responsiveness in EJ2 JavaScript Spreadsheet control -The spreadsheet control rendered in desktop mode will be adaptive in all mobile devices where the layout gets adjusted based on their parent element’s dimensions to accommodate any resolution. +The Spreadsheet control rendered in desktop mode is adaptive on supported mobile devices, where the layout adjusts based on its parent element’s dimensions to fit different screen resolutions. -You can see the overflowed items of ribbon header, ribbon content, and sheet tab using touch and swipe action. The right navigation arrow is added at the end of the ribbon content through which the user can navigate towards overflowed items. Once you reached the rightmost end of the ribbon content, the right navigation arrow will change to left navigation arrow through which you can navigate to the left of the ribbon content. +You can view the overflow items in the ribbon header, ribbon content, and sheet tabs using touch and swipe actions. A right navigation arrow appears at the end of the ribbon content, allowing you to navigate to the overflow items. Once you reach the rightmost end of the ribbon content, the right navigation arrow changes to a left navigation arrow, allowing you to navigate back toward the start of the ribbon content. ![Spreadsheet Adaptive Mode](./images/spreadsheet_adaptive_mode.gif) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md index a7cc02cd4c..81c954e182 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md @@ -3,7 +3,7 @@ layout: post title: Performance best practices in EJ2 JavaScript Spreadsheet | Syncfusion description: Learn here all about how to optimize the performance EJ2 JavaScript Spreadsheet control, its elements and more. platform: document-processing -control: Performance +control: Performance documentation: ug --- @@ -15,7 +15,7 @@ Performance optimization is crucial when working with large datasets in the [Jav ### Virtual scrolling -Virtual scrolling is an essential performance feature in the EJ2 Spreadsheet that enhances rendering efficiency when handling large datasets. Instead of loading all rows and columns into the DOM at once, it renders only the cells visible within the viewport. As the user scrolls, additional rows or columns are dynamically loaded and rendered. +Virtual scrolling is an essential performance feature in the Spreadsheet that enhances rendering efficiency when handling large datasets. Instead of loading all rows and columns into the DOM at once, it renders only the cells visible within the viewport. As the user scrolls, additional rows or columns are dynamically loaded and rendered. This approach significantly reduces initial load time, DOM size, and memory usage — resulting in smoother rendering and interaction, especially when working with thousands of rows or columns. @@ -36,7 +36,7 @@ Serialization options in the EJ2 Spreadsheet allow you to exclude specific featu This is particularly useful when: * You need only the raw data without formatting. -* You're opening the `Workbook JSON object` in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method. +* You are opening the `Workbook JSON object` in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method. * You want to minimize the size of the JSON payload and optimize processing speed. Refer to the following UG section to learn how to configure these options: @@ -82,26 +82,26 @@ To improve performance when opening large Excel files, use parsing options like 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) -## How to improve performance on formula calculation in Spreadsheet? +## How to improve performance for formula calculation in the Spreadsheet? ### Manual calculation mode Manual Calculation Mode in the EJ2 Spreadsheet is a performance optimization feature that allows you to delay formula recalculations until they are explicitly triggered. By default, the Spreadsheet automatically recalculates formulas whenever a dependent cell is edited or changed. While this behavior works well for small datasets, it can result in noticeable lag or UI freezing when working with large spreadsheets that contain many formulas or complex calculation chains. -To prevent such performance issues during bulk operations—such as importing data, applying formats, or setting multiple formulas — manual calculation mode gives developers control over when recalculations should occur. +To prevent such performance issues during bulk operations—such as importing data, applying formats, or setting multiple formulas—manual calculation mode gives developers control over when recalculations should occur. Enabling manual mode is highly beneficial when: * Importing large Excel or JSON files with formula-heavy sheets. * Performing bulk updates (e.g., updating rows or columns via code). * Applying formulas dynamically to a large number of cells. -* You want to postpone calculations until all content or changes are finalized. +* Postponing calculations until all content or changes are finalized. To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/formulas#manual-mode). ## How to improve save performance in the Spreadsheet? ### Handling large file saves with `isFullPost` option -When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook. +When saving large Excel files with extensive data and features using **File → Save As** or the [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#save) method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook. To mitigate these issues during the save operation, you can set the [`isFullPost`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/beforeSaveEventArgs#isfullpost) property to **false** in the [`beforeSave`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event of the Spreadsheet. @@ -121,7 +121,7 @@ Serialization options in the EJ2 Spreadsheet allow you to exclude specific featu This is particularly useful when: * You need only the raw data without formatting. -* You're saving the `Workbook JSON object` using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method in the Spreadsheet. +* You are saving the `Workbook JSON object` using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method in the Spreadsheet. * You want to minimize the size of the JSON payload and optimize processing speed. Proper use of serialization options during save improves performance and reduces the time taken during the save process. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/print.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/print.md index e019d3a432..99ee5532f9 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/print.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about print feature in EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Print in EJ2 JavaScript Spreadsheet control | Syncfusion +description: Learn here all about print feature in EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing control: Print documentation: ug --- -# Print in EJ2 Javascript Spreadsheet control +# Print in EJ2 JavaScript Spreadsheet control The printing functionality allows end-users to print all contents, such as tables, charts, images, and formatted contents, available in the active worksheet or entire workbook in the Spreadsheet. You can enable or disable print functionality by using the `allowPrint` property, which defaults to **true**. @@ -19,9 +19,9 @@ The active worksheet in the Spreadsheet can be printed by selecting the **File > ## Custom printing -The active worksheet or entire workbook can be printed with customized options using the `print` method. The `print` method takes one parameter, that is, `printOptions`, which can be used for customization. +The active worksheet or entire workbook can be printed with customized options using the [`print`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#print) method. The `print` method takes one parameter, that is, `printOptions`, which can be used for customization. -The `printOptions` contain three properties, as described below. +The `printOptions` is an object of the [`PrintOpts`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#printopts) interface and contains three properties, as described below. * `type` - It specifies whether to print the current sheet or the entire workbook. The value for this property is either **ActiveSheet** or **Workbook**. * `allowGridLines` - This property specifies whether grid lines should be included in the printing or not. The grid lines will be included in the printed copy when set to **true**. When set to **false**, it will not be available. @@ -42,7 +42,7 @@ The `printOptions` contain three properties, as described below. ## Disable printing -The printing functionality in the Spreadsheet can be disabled by setting the [`allowPrint`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowprint) property to **false**. After disabling, the **"Print"** option will not be available in the **"File"** menu of the ribbon and as a keyboard shortcut. +The printing functionality in the Spreadsheet can be disabled by setting the [`allowPrint`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowprint) property to **false**. After disabling, the **Print** option is removed from the **File** menu of the ribbon, and the Ctrl+P keyboard shortcut is also disabled. ![Spreadsheet with print option disabled](./images/spreadsheet_print_disable.png) @@ -59,6 +59,6 @@ The printing functionality in the Spreadsheet can be disabled by setting the [`a ## Limitations -* When printing the document, changing the page orientation to landscape is not supported in both the `print` method and print preview dialog of the web browser. -* The styles provided for the data validation functionality will not be available in the printed copy of the document. -* The content added to the cell templates, such as HTML elements, Syncfusion® controls, and others, will not be available in the printed copy of the document. +* Changing the page orientation to landscape is not supported in either the `print` method or the browser's print preview dialog. +* Styles applied through the data validation feature (such as highlight colors and error indicators) are not included in the printed copy. +* Content added to cell templates, such as HTML elements, Syncfusion® controls, or custom components, is not included in the printed copy. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/styles.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/styles.md index 7b2e44fc69..93c1e0dd18 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/styles.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/styles.md @@ -1,19 +1,19 @@ --- layout: post -title: Styles in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Styles in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Styles in EJ2 JavaScript Spreadsheet Control | Syncfusion +description: Learn here all about Styles in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Styles +control: Styles documentation: ug --- -# Styles in EJ2 Javascript Spreadsheet control +# Styles in EJ2 JavaScript Spreadsheet Control To modify the Spreadsheet appearance, you need to override the default CSS of the spreadsheet. Please find the CSS structure that can be used to modify the Spreadsheet appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). ## Customizing the Spreadsheet -Use the below CSS to customize the Spreadsheet root element. +Use the following CSS to customize the Spreadsheet root element. ``` @@ -27,7 +27,7 @@ Use the below CSS to customize the Spreadsheet root element. ### Customizing the Spreadsheet Ribbon -Use the below CSS to customize the Spreadsheet Ribbon. +Use the following CSS to customize the Spreadsheet Ribbon. ``` @@ -37,9 +37,9 @@ Use the below CSS to customize the Spreadsheet Ribbon. ``` -### Customizing the Spreadsheet formula bar panel +### Customizing the Spreadsheet Formula Bar Panel -You can customize the Spreadsheet formula bar panel by using this CSS. +Use the following CSS to customize the Spreadsheet formula bar panel. ``` @@ -49,7 +49,7 @@ You can customize the Spreadsheet formula bar panel by using this CSS. ``` -### Customizing the Spreadsheet formula bar text +### Customizing the Spreadsheet Formula Bar Text You can customize the Spreadsheet formula bar text by using this CSS. @@ -63,9 +63,9 @@ You can customize the Spreadsheet formula bar text by using this CSS. ## Sheet -### Customizing the Spreadsheet sheet element +### Customizing the Spreadsheet Sheet Element -Using this CSS, you can customize the Spreadsheet sheet element. +Use the following CSS to customize the Spreadsheet sheet element. ``` @@ -75,9 +75,9 @@ Using this CSS, you can customize the Spreadsheet sheet element. ``` -### Customizing the Spreadsheet sheet header +### Customizing the Spreadsheet Sheet Header -Use the below CSS to customize the Spreadsheet sheet header. +Use the following CSS to customize the Spreadsheet sheet header. ``` @@ -87,9 +87,9 @@ Use the below CSS to customize the Spreadsheet sheet header. ``` -### Customizing the Spreadsheet row header +### Customizing the Spreadsheet Row Header -Use the below CSS to customize the Spreadsheet row header. +Use the following CSS to customize the Spreadsheet row header. ``` .e-spreadsheet .e-row-header .e-header-cell { @@ -98,9 +98,9 @@ Use the below CSS to customize the Spreadsheet row header. ``` -### Customizing the Spreadsheet column header +### Customizing the Spreadsheet Column Header -Use the below CSS to customize the Spreadsheet column header. +Use the following CSS to customize the Spreadsheet column header. ``` .e-spreadsheet .e-column-header .e-header-cell { @@ -109,9 +109,9 @@ Use the below CSS to customize the Spreadsheet column header. ``` -### Customizing the Spreadsheet selection element +### Customizing the Spreadsheet Selection Element -Customize the Spreadsheet selection element. +The selection element is the highlighted range when one or more cells are selected. Use the following CSS to customize it. ``` @@ -121,9 +121,9 @@ Customize the Spreadsheet selection element. ``` -### Customizing the Spreadsheet active cell element +### Customizing the Spreadsheet Active Cell Element -Customize the Spreadsheet active cell element. +The active cell element is the focused single cell within the selection. Use the following CSS to customize it. ``` @@ -133,9 +133,9 @@ Customize the Spreadsheet active cell element. ``` -### Customizing the Spreadsheet cell element +### Customizing the Spreadsheet Cell Element -Using this CSS, you can customize the Spreadsheet cell element. +Use the following CSS to customize the Spreadsheet cell element. ``` @@ -147,9 +147,9 @@ Using this CSS, you can customize the Spreadsheet cell element. ## Ribbon Items -### Customizing the Spreadsheet sorting icon +### Customizing the Spreadsheet Sorting Icon -Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet ribbon. You can use the available Syncfusion® [icons](https://ej2.syncfusion.com/documentation/appearance/icons/#material) based on your theme. +Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet ribbon. You can use the available Syncfusion® [icons](https://ej2.syncfusion.com/documentation/appearance/icons#material) based on your theme. ``` @@ -160,9 +160,9 @@ Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet r ``` -### Customizing the filter dialog content +### Customizing the Filter Dialog Content -Use the below CSS to customize the Spreadsheet filter dialog content element. +Use the following CSS to customize the Spreadsheet filter dialog content element. ``` @@ -172,9 +172,9 @@ Use the below CSS to customize the Spreadsheet filter dialog content element. ``` -### Customizing the filter dialog footer +### Customizing the Filter Dialog Footer -Spreadsheet filter dialog footer element can be customized by using the below CSS. +Use the following CSS to customize the Spreadsheet filter dialog footer element. ``` @@ -184,9 +184,9 @@ Spreadsheet filter dialog footer element can be customized by using the below CS ``` -### Customizing the filter dialog input element +### Customizing the Filter Dialog Input Element -Use the below CSS to customize the Spreadsheet filter dialog input element. +Use the following CSS to customize the Spreadsheet filter dialog input element. ``` @@ -196,9 +196,9 @@ Use the below CSS to customize the Spreadsheet filter dialog input element. ``` -### Customizing the filter dialog button element +### Customizing the Filter Dialog Button Element -Use the below CSS to customize the Spreadsheet filter dialog button element. +Use the following CSS to customize the Spreadsheet filter dialog button element. ``` @@ -208,9 +208,9 @@ Use the below CSS to customize the Spreadsheet filter dialog button element. ``` -### Customizing the Excel filter dialog number filters element +### Customizing the Excel Filter Dialog Number Filters Element -Spreadsheet Excel filter dialog number filters element can be customized by using the below CSS. +Use the following CSS to customize the Spreadsheet Excel filter dialog number filters element. ``` @@ -222,9 +222,9 @@ Spreadsheet Excel filter dialog number filters element can be customized by usin ## Footer -### Customizing the Spreadsheet sheet tab panel +### Customizing the Spreadsheet Sheet Tab Panel -Spreadsheet sheet tab panel can be customized by using the below CSS. +Use the following CSS to customize the Spreadsheet sheet tab panel. ``` @@ -234,7 +234,7 @@ Spreadsheet sheet tab panel can be customized by using the below CSS. ``` -### Customizing the Spreadsheet sheet tab +### Customizing the Spreadsheet Sheet Tab Spreadsheet sheet tab element can be customized by using the below CSS. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/suspend-resume.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/suspend-resume.md index 6dc34ae636..0f2405be6b 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/suspend-resume.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/suspend-resume.md @@ -1,13 +1,13 @@ --- layout: post -title: Suspend and Resume UI Refresh in Javascript Spreadsheet | Syncfusion -description: Improve performance in Syncfusion EJ2 Javascript Spreadsheet by using suspendRefresh and resumeRefresh to group multiple updates and avoid repeated rendering. +title: Suspend and Resume UI Refresh in JavaScript Spreadsheet | Syncfusion +description: Improve performance in Syncfusion EJ2 JavaScript Spreadsheet by using suspendRefresh and resumeRefresh to group multiple updates and avoid repeated rendering. platform: document-processing control: Spreadsheet documentation: ug --- -# Suspend and Resume UI Refresh in JavaScript Spreadsheet +# Suspend and Resume UI Refresh in the JavaScript Spreadsheet The Spreadsheet refreshes its UI after each operation performed through public methods, such as updating a cell, applying formatting, or inserting rows. This immediate rendering works well for a few actions, but it can lead to performance issues when many operations are executed one after another. @@ -31,8 +31,8 @@ For a few operations, this feature is usually not required. Use the following methods: -- `suspendRefresh` — pauses UI rendering -- `resumeRefresh` — applies all pending visual updates +- `suspendRefresh` — pauses UI rendering. +- `resumeRefresh` — applies all pending visual updates. ### Step 1: Suspend UI refresh @@ -70,10 +70,10 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({ Suspends visual updates in the Spreadsheet. **Behavior:** -- Prevents the UI from refreshing after each operation -- Allows multiple actions to be grouped together -- Keeps internal model updates running -- Must be paired with `resumeRefresh` +- Prevents the UI from refreshing after each subsequent operation. +- Allows multiple actions to be grouped together. +- Internal model and data updates continue to run. +- Must be paired with `resumeRefresh()` to restore rendering. ### resumeRefresh @@ -99,7 +99,7 @@ Resumes visual updates and applies all pending changes. ## Supported operations -The following types of operations can be performed between `suspendRefresh` and `resumeRefresh`: +The following types of operations can be performed between `suspendRefresh` and `resumeRefresh`. - **Cell operations:** `updateCell`, `autoFill`, `clear` - **Row and column operations:** `insertRow`, `insertColumn`, `hideRow`, `hideColumn`, `setRowsHeight`, `setRowHeight`, `setColWidth`, `setColumnsWidth`, `autoFit` @@ -122,7 +122,7 @@ The following types of operations can be performed between `suspendRefresh` and - Use suspend and resume UI refresh when multiple operations are executed together. - Avoid using it for few or simple operations. -- Useful during initialization and large data updates. +- It is useful during initialization and large data updates. - Data and model changes are processed during the suspended state; only visual refresh is delayed. ## See Also