diff --git a/Document-Processing/Excel/Spreadsheet/Angular/accessibility.md b/Document-Processing/Excel/Spreadsheet/Angular/accessibility.md index ad97b89b0c..b1c34b57f2 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/accessibility.md @@ -39,12 +39,12 @@ The accessibility compliance for the Spreadsheet component is outlined below. ## WAI-ARIA attributes -The Spreadsheet component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet component: +The Spreadsheet component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet component: | Attributes | Purpose | |-------|---------| | `grid` (role) | This role is added to the spreadsheet content table and describes the collection of rows and columns. | -| `gridcell` (role) | This role is added to the cell element and describes the rows `` element. | +| `gridcell` (role) | This role is added to the cell element and describes the cell `` element. | | `rowheader` (role) | This role is added to the row header and describes the header of the rows. | | `colheader` (role) | This role is added to the column header and describes the header of the columns. | | `aria-rowindex` (attribute) | This attribute describes the table's row index in the spreadsheet. | @@ -61,7 +61,7 @@ The Spreadsheet component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/ap ## Keyboard interaction -The Spreadsheet component 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 component. +The Spreadsheet component follows 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 component. | Press | To do this | |----------|-------------| diff --git a/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/ai-service/using-web-api.md b/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/ai-service/using-web-api.md index 8ce6faec75..efef9e32dd 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/ai-service/using-web-api.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/ai-service/using-web-api.md @@ -3,7 +3,7 @@ layout: post title: AI Assist Web API Server Setup in Angular Spreadsheet | Syncfusion description: Learn how to set up and connect an ASP.NET Core Web API server for the AI Assist feature in the Syncfusion Angular Spreadsheet component. platform: document-processing -control: AI Assist Web API Server Setup +control: Spreadsheet documentation: ug --- diff --git a/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/integration.md b/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/integration.md index 3a1518f142..b18d825640 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/integration.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/integration.md @@ -1,13 +1,13 @@ --- layout: post -title: AI Assist Integration in Angular Spreadsheet component | Syncfusion +title: AI Assist Integration in Angular Spreadsheet Component | Syncfusion description: Learn how to set up and configure AI Assist in the Syncfusion Angular Spreadsheet component for AI-powered features. platform: document-processing control: AI Assist documentation: ug --- -# AI Assist Integration in Angular Spreadsheet component +# AI Assist Integration in Angular Spreadsheet Component ## Integration @@ -24,7 +24,7 @@ Ensure the following before integrating AI Assist: ### Add CSS references -Add the following AI Assist dependent style references to the `src/styles.css` file. +Add the following AI Assist dependent style references to the `src/styles.css` file: ```css @import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css'; diff --git a/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/overview.md b/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/overview.md index a07ad36b0a..cc3583fa45 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/ai-assist/overview.md @@ -17,7 +17,7 @@ documentation: ug AI Assist integrates seamlessly into your Angular Spreadsheet application with minimal configuration. This includes injecting the module, enabling the feature, configuring the backend server connection, handling events, and exploring the full range of supported prompts. -For complete setup instructions, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration). +For complete setup steps, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration). ## How AI Assist Works in spreadsheet diff --git a/Document-Processing/Excel/Spreadsheet/Angular/cell-range.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-range.md index 3cb99854a6..1d83063454 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-range.md @@ -3,7 +3,7 @@ layout: post title: Cell Range in Angular Spreadsheet Component | Syncfusion description: Learn here all about cell range in Syncfusion Essential Angular Spreadsheet component, it's elements and more. platform: document-processing -control: Cell range +control: Cell range documentation: ug --- @@ -21,7 +21,7 @@ Wrap text can be applied or removed to a cell or range of cells in the following * Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range. * Using the [`wrap`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#wrap) method, you can apply or remove the wrap text once the component is loaded. -The following code example shows the wrap text functionality in spreadsheet. +The following code example shows the wrap text functionality in the Spreadsheet. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -55,10 +55,10 @@ You can merge the range of cells in the following ways, The available merge options in spreadsheet are, | Type | Action | -|-------|---------| -| Merge All | Combines all the cells in a range in to a single cell (default). | -| Merge Horizontally | Combines cells in a range as row-wise. | -| Merge Vertically | Combines cells in a range as column-wise. | +|------|--------| +| Merge All | Combines all the cells in a range into a single cell (default). | +| Merge Horizontally | Combines cells in a range row-wise (across columns). | +| Merge Vertically | Combines cells in a range column-wise (across rows). | | UnMerge | Splits the merged cells into multiple cells. | The following code example shows the merge cells operation in spreadsheet. @@ -169,7 +169,7 @@ The following code example demonstrates how to add custom data validation with a The following features have some limitations in Data Validation: -* Entire row data validation. +* Applying data validation to an entire row. * Insert row between the data validation. * Copy/paste with data validation. * Delete cells between data validation applied range. @@ -183,7 +183,7 @@ You can do this by one of the following ways, * Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element. * Use the autoFill() method programmatically. -The available parameters in `autoFill()` method are, +The available parameters in `autoFill()` method are: | Parameter | Type | Description | |-----|------|----| diff --git a/Document-Processing/Excel/Spreadsheet/Angular/clipboard.md b/Document-Processing/Excel/Spreadsheet/Angular/clipboard.md index b675484378..ebed9d4a2d 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/clipboard.md @@ -3,7 +3,7 @@ layout: post title: Clipboard in Angular Spreadsheet component | Syncfusion description: Learn here all about Clipboard in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Clipboard +control: Clipboard documentation: ug --- @@ -46,7 +46,7 @@ It is used to paste the clipboard data to the selected range, rows or columns. Y * `Paste Special` - You can paste the values with formatting. * `Paste` - You can paste only the values without formatting. -It also performs for external clipboard operation. If you perform cut and paste, clipboard data will be cleared, whereas in copy and paste the clipboard contents will be maintained. If you perform paste inside the copied range, the clipboard data will be cleared. +It also supports external clipboard operations. If you perform cut and paste, the clipboard data will be cleared, whereas in copy and paste the clipboard contents will be maintained. If you perform paste inside the copied range, the clipboard data will be cleared. **User Interface**: diff --git a/Document-Processing/Excel/Spreadsheet/Angular/comment.md b/Document-Processing/Excel/Spreadsheet/Angular/comment.md index 40bd6eb17b..ebeeedfd9d 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/comment.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/comment.md @@ -25,7 +25,7 @@ The Syncfusion Spreadsheet does not automatically track user identity. To tag ne selector: 'app-root', standalone: true, imports: [SpreadsheetAllModule], - // Set the author name. If not set, "Guest User" will be shown by default.. + // Set the author name. If not set, "Guest User" will be shown by default. template: `` }) export class AppComponent { @@ -71,7 +71,7 @@ You can edit the content of a comment or its replies directly within the comment The **Resolve thread** option marks a comment thread as completed when the discussion or issue is addressed. When a thread is resolved, its background color changes to indicate the resolved state, and the reply input box and reply menu actions are hidden. Use **Reopen** to restore the comment if further discussion is needed. ### Resolve a comment -* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**. +* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**. ### Reopen a comment * In the comment editor, click the **Reopen** button in the header to make the thread active again. @@ -102,7 +102,7 @@ You can delete either a specific reply or an entire comment thread (including al ### Deleting a comment thread * **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**. * **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment. -* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment. +* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment, or use the **Delete Thread** button in the header for a resolved comment. Deleting a thread removes the comment and all its replies from the cell. @@ -162,7 +162,7 @@ You can save spreadsheet data along with **comments** using **File > Save As > M ### Why comments are not saved in `.xls` The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**. -Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`. +Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`. > To retain threaded comments, always save the workbook in **.xlsx** format. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md b/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md index b06fe00aac..1105a44077 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md @@ -3,7 +3,7 @@ layout: post title: Context menu in Angular Spreadsheet component | Syncfusion description: Learn here all about Context menu in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Context menu +control: Context menu documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug Context Menu is used to improve user interaction with Spreadsheet using the popup menu. This will open when right-clicking on Cell/Column Header/Row Header/ Pager in the Spreadsheet. You can use [`enableContextMenu`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enablecontextmenu) property to enable/disable context menu. -> The default value for the `enableContextMenu` property is `true`. +> The default value of the `enableContextMenu` property is `true`. ## Context Menu Items in Row Cell @@ -52,11 +52,11 @@ Please find the table below for default context menu items and their actions. | `Delete` | Delete the selected worksheet from the spreadsheet. | | `Rename` | Rename the selected worksheet. | | [`Protect Sheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. | -| [`Hide`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hide) |Hide the selected worksheet. | +| [`Hide`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hide) | Hide the selected worksheet. | ## Context Menu Customization -You can perform the following context menu customization options in the spreadsheet +You can perform the following context menu customization options in the spreadsheet: * Add Context Menu Items * Remove Context Menu Items diff --git a/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md b/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md index 7611e7bd62..043d8251ca 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md @@ -3,13 +3,13 @@ layout: post title: Data binding in Angular Spreadsheet component | Syncfusion description: Learn here all about Data binding in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Data binding +control: Data binding documentation: ug --- # Data binding in Angular Spreadsheet component -The Spreadsheet uses [DataManager](https://helpej2.syncfusion.com/angular/documentation/data), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [DataManager](https://helpej2.syncfusion.com/angular/documentation/data) or JavaScript object array collection. +The Spreadsheet uses [DataManager](https://ej2.syncfusion.com/angular/documentation/data), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [DataManager](https://ej2.syncfusion.com/angular/documentation/data) or JavaScript object array collection. > To bind data to a cell, use `cell data binding` support. @@ -31,7 +31,7 @@ Refer to the following code example for local data binding. {% previewsample "/document-processing/samples/spreadsheet/angular/local-data-binding-cs1" %} -> The local data source can also be provided as an instance of the [DataManager](https://helpej2.syncfusion.com/angular/documentation/data). By default, [DataManager](https://helpej2.syncfusion.com/angular/documentation/data) uses [`JsonAdaptor`](https://ej2.syncfusion.com/angular/documentation/data/adaptors#json-adaptor) for local data-binding. +> The local data source can also be provided as an instance of the [DataManager](https://ej2.syncfusion.com/angular/documentation/data). By default, [DataManager](https://ej2.syncfusion.com/angular/documentation/data) uses [`JsonAdaptor`](https://ej2.syncfusion.com/angular/documentation/data/adaptors#json-adaptor) for local data-binding. ### Customizing column data mapping @@ -55,7 +55,7 @@ The following code example demonstrates how to customize the mapping of column d ## Remote data -To bind remote data to the Spreadsheet control, assign service data as an instance of [DataManager](https://helpej2.syncfusion.com/angular/documentation/data) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`. +To bind remote data to the Spreadsheet control, assign service data as an instance of [DataManager](https://ej2.syncfusion.com/angular/documentation/data) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`. Refer to the following code example for remote data binding. @@ -107,7 +107,7 @@ You can use WebApiAdaptor to bind spreadsheet with Web API created using OData e ## Cell data binding -The Spreadsheet control can bind the data to individual cell in a sheet . To achieve this you can use the `value` property. +The Spreadsheet control can bind the data to an individual cell in a sheet. To achieve this you can use the `value` property. Refer to the following code example for cell data binding. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/docker-deployment.md b/Document-Processing/Excel/Spreadsheet/Angular/docker-deployment.md index c6c3a42713..2c36202ca5 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/docker-deployment.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/docker-deployment.md @@ -3,11 +3,11 @@ layout: post title: Docker image deployment in Angular Spreadsheet component | Syncfusion description: Learn here all about Docker image deployment in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Docker deployment +control: Docker deployment documentation: ug --- -# Docker Image Overview in Angular Spreadsheet component +# Docker Image Deployment in Angular Spreadsheet Component The [**Angular Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents. @@ -26,7 +26,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins ## How to deploy the Spreadsheet Docker Image -**Step 1:** Pull the spreadsheet-server image from Docker Hub. +**Step 1:** Pull the `spreadsheet-server` image from Docker Hub. ```console docker pull syncfusion/spreadsheet-server diff --git a/Document-Processing/Excel/Spreadsheet/Angular/editing.md b/Document-Processing/Excel/Spreadsheet/Angular/editing.md index 63c02ac6f9..c31fec403e 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/editing.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/editing.md @@ -3,7 +3,7 @@ layout: post title: Editing in Angular Spreadsheet component | Syncfusion description: Learn here all about Editing in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Editing +control: Editing documentation: ug --- @@ -31,7 +31,7 @@ If the cell is in editable state, you can save the edited cell by one of the fol ## Cancel editing -To cancel the editing without saving the changes, you can use one of the following ways, +To cancel editing without saving the changes, use one of the following: * Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content. * Using the [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#closeedit) method. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/ej1-api-migration.md b/Document-Processing/Excel/Spreadsheet/Angular/ej1-api-migration.md index a0f2ae931d..8d301da649 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/ej1-api-migration.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/ej1-api-migration.md @@ -151,7 +151,7 @@ This article describes the API migration process of the Spreadsheet component fr | Enables or disables the import feature | **Property:** *allowImport*

``
``| **Property:** *allowOpen*

``
``| | Enables or disables the exporting feature | **Property:** *exportSettings.allowExporting*

``
``
**Ts**
`this.exportSettings = { allowExporting: true }`| **Property:** *allowSave*

``
``| | Defines the excelUrl to export to the excel format | **Property:** *exportSettings.excelUrl*

``
``
**Ts**
`this.exportSettings = { excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" }`| **Property:** *saveUrl*

``
``| -| Defines the csvUrl to export to the csv format | **Property:** *exportSettings.csvUrl*

``
``
**Ts**
`this.exportSettings = { csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport" }`| **Property:** *saveUrl*

You can use the same service url and specify saveType as Csv in the beforeSave event``
``
**Ts**
`beforeSave(args: BeforeSaveEventArgs) { args.saveType = 'Csv' }`| +| Defines the csvUrl to export to the CSV format | **Property:** *exportSettings.csvUrl*

``
``
**Ts**
`this.exportSettings = { csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport" }`| **Property:** *saveUrl*

You can use the same service url and specify saveType as Csv in the beforeSave event``
``
**Ts**
`beforeSave(args: BeforeSaveEventArgs) { args.saveType = 'Csv' }`| | Import mapper to perform the import feature | **Property:** *importSettings.importMapper*

``
``
**Ts**
`this.importSettings= { importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" };`| **Property:** *openUrl*

``
``| | Import excel file | **Method:** *import*

``
``
**TS**
`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.import({ file: file }); }`| **Method:** *open*

``
``
**TS**
`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`
`this.spreadsheetObj.open({ file: file });`| | Load JSON data of the Spreadsheet | **Method:** *loadFromJSON*

``
``
**TS**
`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response); }`| **Method:** *openFromJson*

``
``
**TS**
`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`
`this.spreadsheetObj.saveAsJson().then(response => (this.spreadsheetObj.openFromJson({ file: response.jsonObject })));`| @@ -184,13 +184,13 @@ This article describes the API migration process of the Spreadsheet component fr |Behavior | API in Essential® JS 1 | API in Essential® JS 2 | |--------- | ----------- | ----------- | | Enables or disables the cell type feature | **Property:** *allowCellType*

``
``| By default, it is enabled. | -| Specifies the cell types for a cell or range | **Property:** *sheets.cellTypes*

``
``
**Ts**
`this.sheets = [{ cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, background-color': 'yellow', color: 'black', text: 'BUTTON' } }] }];`| **Property:** *sheets.ranges.template*

``
``
``| +| Specifies the cell types for a cell or range | **Property:** *sheets.cellTypes*

``
``
**Ts**
`this.sheets = [{ cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, background-color: 'yellow', color: 'black', text: 'BUTTON' } }] }];`| **Property:** *sheets.ranges.template*

``
``
``| ## Merge |Behavior | API in Essential® JS 1 | API in Essential® JS 2 | |--------- | ----------- | ----------- | -| Enables or disables the merge feature | **Property:** *allowMerging*

``
``| **Property:** *allowMerge*

``
``| +| Enables or disables the merge feature | **Property:** *allowMerging*

``
``| **Property:** *allowMerge*

``
``| | Merge cells across | **Method:** *mergeAcrossCells*

``
``
**TS**
`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.mergeAcrossCells("A3:B5"); }`| **Method:** *merge*

``
``
**TS**
`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`
`this.spreadsheetObj.merge("A3:B5", "Horizontally");`| | Merge the specified ranges | **Property:** *sheets.mergeCells*

``
``
**Ts**
`this.sheets = [{ mergeCells:["A1:A2"] }]`| **Property:** *sheets.rows.cells.rowSpan & sheets.rows.cells.colSpan*

``
``
``| | Method to merge the specified ranges | **Method:** *mergeCells*

``
``
**TS**
`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.mergeCells("A3:B5"); }`| **Method:** *merge*

``
``
**TS**
`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`
`this.spreadsheetObj.merge("A3:B5", "All");`| @@ -247,7 +247,7 @@ This article describes the API migration process of the Spreadsheet component fr | Perform goto operation | **Method:** *XLScroll.goTo*

``
``
**TS**
`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLScroll.goTo("A30"); }`| **Method:** *goTo*

``
``
**TS**
`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`
`this.spreadsheetObj.goTo('A30');`| | Scroll the sheet content to the specified cell address | **Method:** *XLScroll.scrollToCell*

``
``
**TS**
`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLScroll.scrollToCell("A30"); }`| **Method:** *goTo*

``
``
**TS**
`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`
`this.spreadsheetObj.goTo('A30');`| -## Comparision between EJ1 and EJ2 Spreadsheet features +## Comparison between EJ1 and EJ2 Spreadsheet features The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features. @@ -311,7 +311,7 @@ The following table compares Excel functionality with the availability of EJ1 an | Enables or disables the keyboard navigation feature | **Property:** *allowKeyboardNavigation*

``
``| **Property:** *enableKeyboardNavigation*

``
``| | Enables or disables the resizing feature | **Property:** *allowResizing*

``
``| **Property:** *allowResizing*

``
``| | Add the CSS class to the root element to customize the appearance | **Property:** *cssClass*

``
``| **Property:** *cssClass*

``
``| -| Enables or disables the touch support | **Property:** *enableTouch*

``
``| By default, it is enabled. | +| Enables or disables the touch support | **Property:** *enableTouch*

``
``| By default, it is enabled. | | Overrides the global culture and localization | **Property:** *locale*

``
``| **Property:** *locale*

``
``| | Enables or disables the picture feature | **Property:** *pictureSettings.allowPictures*

``
``
**Ts**
`this.pictureSettings = { allowPictures: true }`| **Property:** *allowImage*

``
``| | Set the height of the Spreadsheet | **Property:** *scrollSettings.height*

``
``
**Ts**
`this.scrollSettings = { height: 600 };`| **Property:** *height*

``
``| diff --git a/Document-Processing/Excel/Spreadsheet/Angular/filter.md b/Document-Processing/Excel/Spreadsheet/Angular/filter.md index dfeccde5ac..e0b18c56f9 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/filter.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/filter.md @@ -7,7 +7,7 @@ control: Filter documentation: ug --- -# Filter in Angular Spreadsheet component +# Filter in Angular Spreadsheet Component Filtering helps you to view specific rows in the Spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowfiltering) property to enable or disable filtering functionality. @@ -17,7 +17,7 @@ By default, the `Filter` module is injected internally into Spreadsheet to perfo ## Apply filter on UI -In the active Spreadsheet, select a range of cells to filter by value of the cell. The filtering can be done by any of the following ways: +In the active Spreadsheet, select a range of cells to filter by the values of the cells. The filtering can be done by any of the following ways: * Select the filter item in the Ribbon toolbar. * Right-click the sheet, select the filter item in the context menu. @@ -26,7 +26,7 @@ In the active Spreadsheet, select a range of cells to filter by value of the cel > * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog. -## Filter by criteria +## Filter by Criteria The [`applyFilter()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. @@ -47,11 +47,11 @@ The following code example shows `filter` functionality in the Spreadsheet contr {% previewsample "/document-processing/samples/spreadsheet/angular/filter-cs1" %} -## Filter by cell value +## Filter by Cell Value To apply a filter for a cell value, right-click the cell and choose filter -> `Filter By Selected Cell's Value` option from the menu. It applies the filter based on the value of the selected cell in the current sheet. -## Clear filter +## Clear Filter After applying filter to a certain column, you may want to clear it to make all filtered rows visible again. It can be done in the following ways, @@ -59,7 +59,7 @@ After applying filter to a certain column, you may want to clear it to make all * Use the `clearFilter()` method programmatically, to clear the applied filters in spreadsheet for all fields. -## Clear filter on a field +## Clear Filter on a Field After filtering, you can clear/reset the filter for a field alone. It can be done in the following ways, @@ -67,7 +67,7 @@ After filtering, you can clear/reset the filter for a field alone. It can be don * You can right-click on a filtered column cell and choose `Clear Filter from .` option from the context menu. * Use the `clearFilter(field)` method programmatically, to clear the filter in a particular column. -## Reapply filter +## Reapply Filter When you want to reapply the filter after some changes happened in the rows. It can be done in the following ways, diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting.md index 91f8bb76ac..ca6dc8436f 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/formatting.md @@ -18,7 +18,7 @@ Formatting options make your data easier to view and understand. The different t ## Number Formatting -Number formatting provides a type for your data in the [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor). Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are, +Number formatting provides a type for your data in the [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor). Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in the Spreadsheet are: | Types | Format Code | Format ID | |---------|---------|---------| @@ -43,7 +43,7 @@ Number formatting can be applied in following ways, Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the pre-defined number formats do not meet your needs, you can set your own custom formats using custom number formats dialog or `numberFormat` method. -The different types of custom number format populated in the custom number format dialog are, +The different types of custom number formats populated in the custom number format dialog are, | Type | Format Code | Format ID | |-------|---------|---------| @@ -110,7 +110,7 @@ The spreadsheet allows customization of formats in the custom format dialog usin Compared to Excel, the date, time, currency, and accounting formats vary across different cultures. For example, when an Excel file with the date format `'m/d/yyyy'` is imported in the `en-US` culture, the spreadsheet displays the date in that format. However, when the same file is imported in the German culture, the date format changes to `'dd.MM.yyyy'`, which is the default for that region. The default number format ID for the date is 14. To customize the date format based on the culture, you should map the default number format ID to the appropriate culture-specific format code, like this: `{ id: 14, code: 'dd.MM.yyyy' }` in the `configureLocalizedFormat` method. -> The format code should use the default decimal separator (.) and group separator (,). +> The format code should use the default decimal separator (`.`) and group separator (`,`). The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German (de)` culture. @@ -159,18 +159,18 @@ The following code example demonstrates how to configure culture-based formats f ## Text and cell formatting -Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowcellformatting) property to enable or disable the text and cell formatting option in Spreadsheet. You can set the formats in following ways, +Text and cell formatting enhance the look and feel of your cells. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowcellformatting) property to enable or disable the text and cell formatting option in the Spreadsheet. You can set the formats in the following ways: * Using the `style` property, you can set formats to each cell at initial load. * Using the [`cellFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#cellformat) method, you can set formats to a cell or range of cells. -* You can also apply by clicking the desired format option from the ribbon toolbar. +* You can also apply formats by clicking the desired format option from the **Home** tab in the ribbon toolbar. ### Fonts -Various font formats supported in the spreadsheet are font-family, font-size, bold, italic, strike-through, underline and font color. +The supported font formats in the Spreadsheet are font-family, font-size, bold, italic, strike-through, underline, and font color. ### Text Alignment -You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` property. +You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` properties. ### Indents @@ -178,7 +178,7 @@ To enhance the appearance of text in a cell, you can change the indentation of a ### Fill color -To highlight cell or range of cells from whole workbook you can apply background color for a cell using `backgroundColor` property. +To highlight a cell or range of cells from the whole workbook, you can apply a background color to a cell using `backgroundColor` property. ### Borders @@ -210,9 +210,9 @@ You can also change the color, size, and style of the border. The size and style | Double | Used to create the `double` border.| Borders can be applied in the following ways, -* Using the `border`, `borderLeft`, `borderRight`, `borderBottom` properties, you can set the desired border to each cell at initial load. -* Using the `setBorder` method, you can set various border options to a cell or range of cells. -* Selecting the border options from ribbon toolbar. +* Using the `border`, `borderLeft`, `borderRight`, and `borderBottom` properties, you can set the desired border to each cell at initial load. +* Using the [`setBorder`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#setborder) method, you can set various border options to a cell or range of cells. +* Selecting the border options from the **Home** tab in the ribbon toolbar. The following code example shows the style formatting in text and cells of the spreadsheet. @@ -243,11 +243,11 @@ Conditional formatting helps you to format a cell or range of cells based on the ### Apply Conditional Formatting -You can apply conditional formatting by using one of the following ways, +You can apply conditional formatting in one of the following ways: -* Select the conditional formatting icon in the Ribbon toolbar under the Home Tab. +* Select the **Conditional Formatting** icon in the ribbon toolbar under the **Home** tab. * Using the [`conditionalFormat()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#conditionalformat) method to define the condition. -* Using the `conditionalFormats` in sheets model. +* Using the `conditionalFormats` property in the sheets model. Conditional formatting has the following types in the spreadsheet, @@ -301,7 +301,7 @@ The following options can be given for the icon sets as type, ### Custom Format -Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. +Using the custom format for conditional formatting, you can set cell styles such as color, background color, font style, font weight, and underline. In the MAY and JUN columns, we have applied conditional formatting custom format. @@ -309,9 +309,9 @@ In the MAY and JUN columns, we have applied conditional formatting custom format ### Clear Rules -You can clear the defined rules by using one of the following ways, +You can clear the defined rules in one of the following ways: -* Using the “Clear Rules” option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells. +* Using the **Clear Rules** option in the **Conditional Formatting** button on the **Home** tab in the ribbon to clear the rule from the selected cells. * Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#clearconditionalformat) method to clear the defined rules. {% tabs %} @@ -358,7 +358,7 @@ Set `verticalAlign: 'super'` for superscript and `verticalAlign: 'sub'` for subs You can apply subscript and superscript formatting in following ways: -1. Select the desired portion of text within a cell, then click the Subscript or Superscript option in the ribbon to apply the formatting. +1. Select the desired portion of text within a cell, then click the **Subscript** or **Superscript** option in the **Home** tab of the ribbon to apply the formatting. ![Subscript and superscript in Spreadsheet](./images/spreadsheet_richtext.gif) @@ -416,4 +416,4 @@ You can refer to our [Angular Spreadsheet Editor](https://www.syncfusion.com/spr * [Hyperlink](./link) * [Sorting](./sort) * [Filtering](./filter) -* [`Ribbon customization`](./ribbon#ribbon-customization) \ No newline at end of file +* [Ribbon customization](./ribbon#ribbon-customization) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formulas.md b/Document-Processing/Excel/Spreadsheet/Angular/formulas.md index 620c18cc23..cf14e42747 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/formulas.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/formulas.md @@ -3,7 +3,7 @@ layout: post title: Formulas in Angular Spreadsheet component | Syncfusion description: Learn here all about Formulas in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Formulas +control: Formulas documentation: ug --- @@ -62,7 +62,7 @@ The following code example shows an unsupported formula in the spreadsheet. {% previewsample "/document-processing/samples/spreadsheet/angular/formula-cs1" %} -Second, if you want to directly compute any formula or expression, you can use the [computeExpression](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#computeexpression) method. This method will work for both built-in and used-defined/custom formula. +Second, if you want to directly compute any formula or expression, you can use the [computeExpression](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#computeexpression) method. This method will work for both built-in and user-defined/custom formula. The following code example shows how to use `computeExpression` method in the spreadsheet. @@ -84,7 +84,7 @@ Formula bar is used to edit or enter cell data in much easier way. By default, t ## Named Ranges -You can define a meaningful name for a cell range and use it in the formula for calculation. It makes your formula much easier to understand and maintain. You can add named ranges to the Spreadsheet in the following ways, +You can define a meaningful name for a cell range and use it in a formula for calculation. Named ranges make formulas much easier to understand and maintain. You can add named ranges to the Spreadsheet in the following ways: * Using the [`definedNames`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#definednames) collection, you can add multiple named ranges at initial load. * Use the [`addDefinedName`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#adddefinedname) method to add a named range dynamically. @@ -118,7 +118,7 @@ You can configure the calculate mode using the [`calculationMode`](https://ej2.s In Automatic Mode, formulas are recalculated instantly whenever a dependent cell is modified. This mode is perfect for scenarios where real-time updates are essential, ensuring that users see the latest results without additional actions. -For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, `C1` updates immediately without requiring any user intervention. You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#calculationmode) property to `Automatic`. +For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, `C1` updates immediately without requiring any user intervention. To enable this mode, set the [`calculationMode`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#calculationmode) property to `Automatic`. The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. @@ -138,7 +138,7 @@ The following code example demonstrates how to set the Automatic calculation mod In Manual Mode, formulas are not recalculated automatically when cell values are modified. Instead, recalculations must be triggered explicitly. This mode is ideal for scenarios where performance optimization is a priority, such as working with large datasets or computationally intensive formulas. -For example, imagine a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, the value in `C1` will not update automatically. Instead, the recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. To manually initiate recalculation, the Spreadsheet provides two options: +For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, the value in `C1` will not update automatically. Instead, the recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. To manually initiate recalculation, the Spreadsheet provides two options: * `Calculate Sheet`: Recalculates formulas for the active sheet only. * `Calculate Workbook`: Recalculates formulas across all sheets in the workbook. @@ -159,7 +159,7 @@ The following code example demonstrates how to set the Manual calculation mode i ## Supported Formulas -The list of supported formulas can be find in following [`link`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/formulas#supported-formulas). +The list of supported formulas can be found in the following [`link`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/formulas#supported-formulas). ## Formula Error Dialog diff --git a/Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md b/Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md index 4c963c3f32..479b7b362b 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md @@ -3,7 +3,7 @@ layout: post title: Freeze pane in Angular Spreadsheet component | Syncfusion description: Learn here all about Freeze pane in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Freeze pane +control: Freeze pane documentation: ug --- diff --git a/Document-Processing/Excel/Spreadsheet/Angular/global-local.md b/Document-Processing/Excel/Spreadsheet/Angular/global-local.md index 030e191564..f867f4cba0 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/global-local.md @@ -11,7 +11,7 @@ documentation: ug ## Localization -The [Localization](https://helpej2.syncfusion.com/angular/documentation/common/globalization/localization) library allows you to localize the default text content of the Spreadsheet. The [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) 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/angular/documentation/api/spreadsheet/index-default#locale) value and translation object. +The [Localization](https://ej2.syncfusion.com/angular/documentation/common/globalization/localization) library allows you to localize the default text content of the Spreadsheet. The [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) 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/angular/documentation/api/spreadsheet/index-default#locale) value and translation object. The following list of properties and their values are used in the Spreadsheet. @@ -189,10 +189,10 @@ UnprotectSheet | Unprotect Sheet SelectCells | Select cells FormatCells | Format cells FormatRows | Format rows -Format Columns | Format columns +FormatColumns | Format columns InsertLinks | Insert links ProtectContent | Protect the contents of locked cells -ProtectAllowUser | Allow all users of this worksheet to | +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. @@ -212,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 @@ -238,7 +238,7 @@ EqualTo | Equal to NotEqualTo | Not equal to Greaterthan | Greater than Lessthan | Less than -GreaterThanOrEqaulTo | Greater than or eqaul to +GreaterThanOrEqualTo | Greater than or equal to LessThanOrEqualTo | Less than or equal to InCellDropDown | In-cell-dropdown Sources | Sources @@ -361,7 +361,7 @@ VerticalAxisTitle | Vertical Axis Title HorizontalAxisTitle | Horizontal Axis Title EnterTitle | Enter Title ProtectWorkbook | Protect Workbook -Password | Password (optional) | +Password | Password (optional) unProtectPassword | Password EnterThePassword | Enter the password ConfirmPassword | Confirm Password @@ -376,7 +376,7 @@ IsProtected | is protected ### Loading translations -To load translation object in an application, use [`load`](https://helpej2.syncfusion.com/angular/documentation/common/globalization/internationalization#loading-cldr-json-data) function of the [`L10n`](https://helpej2.syncfusion.com/angular/documentation/common/globalization/internationalization) class. +To load translation object in an application, use [`load`](https://ej2.syncfusion.com/angular/documentation/common/globalization/internationalization#loading-cldr-json-data) function of the [`L10n`](https://ej2.syncfusion.com/angular/documentation/common/globalization/internationalization) class. The following example demonstrates the Spreadsheet in `French` culture. In the below sample we have translated the ribbon tab names and Home tab content (clipboard, cell style). @@ -394,7 +394,7 @@ The following example demonstrates the Spreadsheet in `French` culture. In the b ## Internationalization -The Internationalization library is used to globalize number, date, and time values in the spreadsheet component. +The Internationalization library is used to globalize number, date, and time values in the Spreadsheet component. For importing json files in your application, you need to include the json-typings.d.ts file. @@ -443,4 +443,4 @@ You can refer to our [Angular Spreadsheet Editor](https://www.syncfusion.com/spr ## See Also -* [Localization](https://helpej2.syncfusion.com/angular/documentation/common/globalization/localization) +* [Localization](https://ej2.syncfusion.com/angular/documentation/common/globalization/localization) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md index dc7442bd88..745e1eb0ef 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md @@ -3,11 +3,11 @@ layout: post title: Create a object structure in Angular Spreadsheet | Syncfusion description: Learn here all about Create a object structure in Syncfusion Angular Spreadsheet Component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Create a object structure +control: Create an object structure documentation: ug --- -# Create an object structure in Angular Spreadsheet Component +# Create an Object Structure in Angular Spreadsheet Component This topic guides you to construct a JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openfromjson) method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#properties) of the spreadsheet as value. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/identify-the-context-menu-opened.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/identify-the-context-menu-opened.md index 0d79cca2f6..f6d1101ff3 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/how-to/identify-the-context-menu-opened.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/identify-the-context-menu-opened.md @@ -15,10 +15,10 @@ The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.co | Class name | Context menu name | |-------|---------| -| .e-sheet-content | Cell context menu | -| .e-toolbar-item | Footer context menu | -| .e-rowhdr-table | Row header context menu | -| .e-colhdr-table | Column header context menu | +| `.e-sheet-content` | Cell context menu | +| `.e-toolbar-item` | Footer context menu | +| `.e-rowhdr-table` | Row header context menu | +| `.e-colhdr-table` | Column header context menu | The following code example shows how to identify the context menu opened. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md b/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md index 4d88486d52..d675abb63f 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Illustrations in Angular Spreadsheet component | Syncfusion description: Learn here all about Illustrations in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. @@ -19,17 +19,17 @@ Adding images to a spreadsheet can enhance the visual appeal and help to convey ### Insert Image -You can insert the image by using one of the following ways, +You can insert an image in one of the following ways: * Selecting the Insert tab in the Ribbon toolbar, and then choose the Image tab. * Use the `insertImage()` method programmatically. -The available parameters in `insertImage()` method are, +The available parameters in `insertImage()` method are: | Parameter | Type | Description | |-----|------|----| -| images | `ImageModel` | Specifies the options to insert image in spreadsheet. | -| range(optional) | `string` | Specifies the range in spreadsheet. | +| images | `ImageModel` | Specifies the options to insert an image in the spreadsheet. | +| range(optional) | `string` | Specifies the range in the spreadsheet. | The available arguments in `ImageModel` are: @@ -47,12 +47,12 @@ The available arguments in `ImageModel` are: * If you want to delete the image, just select the image, and then press the Delete key. * Use the `deleteImage()` method programmatically. -The available parameters in `deleteImage()` method are, +The available parameters in `deleteImage()` method are: | Parameter | Type | Description | |-----|------|----| | id | `string` | Specifies the id of the image element to be deleted. | -| range(optional) | `string` | Specifies the range in spreadsheet. | +| range(optional) | `string` | Specifies the range in the spreadsheet. | ### Image Customization @@ -95,7 +95,7 @@ A chart is a graphical representation of data, that organizes and represents a s ### Types of chart -The following types of charts are available in the Spreadsheet. +The following chart types are available in the Spreadsheet: >* Column Chart >* Bar Chart @@ -106,18 +106,18 @@ The following types of charts are available in the Spreadsheet. ### Insert Chart -You can insert the chart by using one of the following ways, +You can insert a chart in one of the following ways: * Select the chart icon in the Ribbon toolbar under the Insert Tab. * Use the [`insertChart()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertchart) method programmatically. -The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertchart) method is, +The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertchart) method is: | Parameter | Type | Description | |-----|------|----| | chart | `ChartModel` | Specifies the options to insert a chart in the spreadsheet. | -The available arguments in the `ChartModel` are: +The available arguments in `ChartModel` are: * type: Specifies the type of chart. * theme: Specifies the theme of a chart. @@ -169,7 +169,7 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca {% previewsample "/document-processing/samples/spreadsheet/angular/chart-cs1" %} -#### Customization of line chart markers +#### Customization of Line Chart Markers Using the [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction. @@ -202,4 +202,4 @@ You can refer to our [Angular Spreadsheet Editor](https://www.syncfusion.com/spr * [Formatting](./formatting) * [Rows and columns](./rows-and-columns) * [Hyperlink](./link) -* [Sorting](./sort) \ No newline at end of file +* [Sorting](./sort) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md index 4c73a38847..fc63d3c99b 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md @@ -3,7 +3,7 @@ layout: post title: Keyboard shortcuts in Angular Spreadsheet component | Syncfusion description: Learn here all about Keyboard shortcuts in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Keyboard shortcuts +control: Keyboard shortcuts documentation: ug --- diff --git a/Document-Processing/Excel/Spreadsheet/Angular/link.md b/Document-Processing/Excel/Spreadsheet/Angular/link.md index 11faff6930..b07a7b422f 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/link.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/link.md @@ -39,7 +39,7 @@ In the Edit Link dialog box, make the changes that you want, and click UPDATE. ## Remove Hyperlink -Performing this operation remove a single hyperlink without losing the display text. +Removing a hyperlink clears the link from a cell without losing the display text. **User Interface**: diff --git a/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md b/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md index 98fd49af12..f24d0e1dab 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md @@ -3,7 +3,7 @@ layout: post title: Mobile responsiveness in Angular Spreadsheet component | Syncfusion description: Learn here all about Mobile responsiveness in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Mobile responsiveness +control: Mobile responsiveness documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug 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. -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 see the overflowed items of the ribbon header, ribbon content, and sheet tab using touch and swipe actions. A right navigation arrow is added at the end of the ribbon content through which the user can navigate towards overflowed items. Once you reach the rightmost end of the ribbon content, the right navigation arrow changes to a left navigation arrow through which you can navigate to the left of the ribbon content. ![Spreadsheet Adaptive Mode](./images/spreadsheet_adaptive_mode.gif) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/notes.md b/Document-Processing/Excel/Spreadsheet/Angular/notes.md index 3c0780c4bc..1f2aa528ab 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/notes.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/notes.md @@ -3,7 +3,7 @@ layout: post title: Notes in Angular Spreadsheet component | Syncfusion description: Learn here all about the notes feature in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Notes +control: Notes documentation: ug --- diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-save.md b/Document-Processing/Excel/Spreadsheet/Angular/open-save.md index f56508e5e9..8500d9ce93 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/open-save.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-save.md @@ -3,11 +3,11 @@ layout: post title: Open save in Angular Spreadsheet component | Syncfusion description: Learn here all about Open save in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Open save +control: Open and Save documentation: ug --- -# Open save in Angular Spreadsheet component +# Open and Save in Angular Spreadsheet component In import an excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved. Server configuration is used for this process. @@ -44,7 +44,7 @@ Please find the below table for the beforeOpen event arguments. > * Use `Ctrl + O` keyboard shortcut to open Excel documents. > * The default value of the [allowOpen](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowopen) property in previous code snippet. -### Open an excel file using a file uploader +### Open an Excel File Using a File Uploader If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/angular/documentation/api/uploader/index-default#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#open) method to see the appropriate output. @@ -62,7 +62,7 @@ The following code example shows how to import an excel document using file uplo {% previewsample "/document-processing/samples/spreadsheet/angular/open-save-cs7" %} -### Open an external URL excel file while initial load +### Open an External URL Excel File on Initial Load You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#open) this file by using Spreadsheet component open method. @@ -78,7 +78,7 @@ You can achieve to access the remote excel file by using the [`created`](https:/ {% previewsample "/document-processing/samples/spreadsheet/angular/open-save-cs2" %} -### Open an excel file from blob data +### Open an Excel File from Blob Data By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#open) method in the Spreadsheet component to load that `File` object. @@ -96,7 +96,7 @@ Please find the code to fetch the blob data and load it into the Spreadsheet com {% previewsample "/document-processing/samples/spreadsheet/angular/open-from-blobdata-cs1" %} -### Open an Excel file located on a server +### Open an Excel File Located on a Server By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openfromjson) method to load that `JSON data` into the Spreadsheet component. @@ -151,7 +151,7 @@ You can find the server endpoint code to fetch and process the Excel file in thi fetch('https://localhost:{{port_number}}/Home/Open') ``` -### Open an excel file using a hosted web service in AWS Lambda +### Open an Excel File Using a Hosted Web Service in AWS Lambda Before proceeding with the opening process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation. @@ -232,12 +232,12 @@ export class AppComponent { ```csharp public IActionResult Open(OpenOptions openOptions) { - // Convert the base64 string to bytes array. + // Convert the base64 string to a byte array. byte[] bytes = Convert.FromBase64String(openOptions.File); - // Loading the bytes array to stream. + // Load the byte array into a memory stream. MemoryStream stream = new MemoryStream(bytes); OpenRequest open = new OpenRequest(); - // Converting the stream into FormFile. + // Convert the stream into a FormFile. open.File = new FormFile(stream, 0, bytes.Length, "Sample", "Sample." + openOptions.Extension); if (string.IsNullOrEmpty(openOptions.Password)) open.Password = openOptions.Password; @@ -253,7 +253,7 @@ public class OpenOptions } ``` -### Open an excel file from Base64 string data +### Open an Excel File from Base64 String Data In the Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#open) method in the spreadsheet. @@ -271,7 +271,7 @@ The following code example shows how to open the spreadsheet data as base64 stri {% previewsample "/document-processing/samples/spreadsheet/angular/base-64-string" %} -### Open excel file into a read-only mode +### Open an Excel File in Read-Only Mode You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#lockcells) methods. @@ -467,7 +467,7 @@ public IActionResult Open(IFormCollection openRequest) ## Save -The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowsave) as `true` and assign service url to the [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) property. +The Spreadsheet control saves its data, style, format, and more as an Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowsave) as `true` and assign the service URL to the [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) property. **User Interface**: @@ -503,7 +503,7 @@ Please find the below table for the beforeSave event arguments. > * The default value of [allowSave](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowsave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowsave) property in previous code snippet. > * Demo purpose only, we have used the online web service url link. -### Save an excel file as blob data +### Save an Excel File as Blob Data By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#savecomplete) event. You can then post the blob data to the server endpoint for saving. @@ -521,7 +521,7 @@ Please find below the code to retrieve blob data from the Spreadsheet component {% previewsample "/document-processing/samples/spreadsheet/angular/save-as-blobdata-cs1" %} -### Save an Excel file to a server +### Save an Excel File to a Server By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. @@ -588,7 +588,7 @@ You can find the server endpoint code to save the spreadsheet data as an Excel f fetch('https://localhost:{{port_number}}/Home/Save') ``` -### Save an excel file using a hosted web service in AWS Lambda +### Save an Excel File Using a Hosted Web Service in AWS Lambda Before proceeding with the save process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation. @@ -748,7 +748,7 @@ The following code snippet demonstrates how to configure the serialization optio {% previewsample "/document-processing/samples/spreadsheet/angular/save-as-json" %} -### Send and receive custom params from client to server +### Send and Receive Custom Parameters from Client to Server Passing the custom parameters from client to server by using [`beforeSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforesave) event. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/overview.md b/Document-Processing/Excel/Spreadsheet/Angular/overview.md index 5e279074ea..a25760fc3b 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/overview.md @@ -3,13 +3,13 @@ layout: post title: Overview of the Angular Spreadsheet Component| Syncfusion description: Learn here all about overview of the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Index +control: Spreadsheet documentation: ug --- # Overview of the Angular Spreadsheet Component -The [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with XLSX, XLS, CSV and PDF formats. +The [Angular Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is a user-interactive component to organize and analyze data in a tabular format, with configuration options for customization. It loads data by importing an Excel/CSV file, or from local and remote data sources such as JSON, RESTful services, and OData services, and more. The populated data can be exported to Excel (XLSX and XLS), CSV, and PDF formats. ![Angular Spreadsheet component](./images/overview-banner.png) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/performance-best-practices.md b/Document-Processing/Excel/Spreadsheet/Angular/performance-best-practices.md index 29ca67ecc3..3bcf973ce9 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/performance-best-practices.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/performance-best-practices.md @@ -3,7 +3,7 @@ layout: post title: Performance practices in Angular Spreadsheet component | Syncfusion description: Learn here all about performance best practices in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Performance +control: Spreadsheet documentation: ug --- @@ -23,7 +23,7 @@ For more details, refer to the [virtual scrolling documentation](https://help.sy ### Chunk response processing -When opening large Excel files with extensive data and features, server responses can become too large—leading to memory issues or connection failures during transmission. The Chunk Response Processing feature addresses this by breaking the response into smaller chunks and sending them in parallel to the client. +When opening large Excel files with extensive data and features, server responses can become too large, leading to memory issues or connection failures during transmission. The Chunk Response Processing feature addresses this by breaking the response into smaller chunks and sending them in parallel to the client. These chunks are combined on the client side to load the Excel data smoothly into the Spreadsheet. This approach avoids transmission failures due to memory constraints and ensures reliable and efficient loading of large files. @@ -102,9 +102,9 @@ To learn more about Manual Calculation Mode and how to enable it, you can refer ### 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 using **File → Save As** or the [`save`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#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/angular/documentation/api/spreadsheet/beforesaveeventargs#isfullpost) property to **false** in the [`beforeSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforesave) event of the Spreadsheet. +To mitigate these issues during the save operation, you can set the [`isFullPost`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/beforesaveeventargs#isfullpost) property to **false** in the [`beforeSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforesave) event of the Spreadsheet. The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component: diff --git a/Document-Processing/Excel/Spreadsheet/Angular/performance-metrics.md b/Document-Processing/Excel/Spreadsheet/Angular/performance-metrics.md index 98c188ced1..05a3e47bfd 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/performance-metrics.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/performance-metrics.md @@ -3,7 +3,7 @@ layout: post title: Performance Metrics for Angular Spreadsheet Control | Syncfusion description: Learn about performance metrics for Angular Spreadsheet control, measured results, and environment details. platform: document-processing -control: Performance +control: Spreadsheet documentation: ug --- diff --git a/Document-Processing/Excel/Spreadsheet/Angular/ribbon.md b/Document-Processing/Excel/Spreadsheet/Angular/ribbon.md index 464e3a1a25..465f2a41b9 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/ribbon.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/ribbon.md @@ -3,7 +3,7 @@ layout: post title: Ribbon in Angular Spreadsheet component | Syncfusion description: Learn here all about Ribbon in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Ribbon +control: Ribbon documentation: ug ---