diff --git a/Document-Processing/Excel/Spreadsheet/Angular/accessibility.md b/Document-Processing/Excel/Spreadsheet/Angular/accessibility.md index ad97b89b0c..97ce47f9e8 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 data cell 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..db03c366c8 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 --- @@ -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 { 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..9fa2caaade 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 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..8b274afaa0 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, 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..aa5a1408fa 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 header for a resolved comment. Deleting a thread removes the comment and all its replies from the cell. @@ -162,12 +162,12 @@ 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. ## Bind Comments via code-behind -You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include: +You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports one comment thread, which can include: - **Comment**: `author`, `text`, `createdTime`, `isResolved` - **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies). @@ -192,7 +192,7 @@ In the below sample, comments are added to a specific cell using cell data bindi ## Limitations * **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model. -* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added. +* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a note, a comment cannot be added. * **Comments in Print**: Comments are not included in print output. * **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved. 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..78a3133e26 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md @@ -3,7 +3,7 @@ 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 --- @@ -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..8679783377 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 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 the `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/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.