diff --git a/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/autofill.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/autofill.md new file mode 100644 index 0000000000..c49ff26abe --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/autofill.md @@ -0,0 +1,88 @@ +--- +layout: post +title: Autofill in Angular Spreadsheet component | Syncfusion +description: Learn here how to apply autofill to a range of cells in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Autofill in Angular Spreadsheet + +Autofill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the autofill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default autofill option which is available in `autoFillSettings`. + +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, + +| Parameter | Type | Description | +|-----|------|----| +| fillRange | `string` | Specifies the fill range. | +| dataRange | `string` | Specifies the data range. | +| direction | `AutoFillDirection` | Specifies the direction("Up","Right","Down","Left")to be filled. | +| fillType | `AutoFillType` | Specifies the fill type("CopyCells","FillSeries","FillFormattingOnly","FillWithoutFormatting") for autofill action. | + +In autofill we have following options, + +* Copy Cells +* Fill Series +* Fill Formatting Only +* Fill Without Formatting + +>* The default autofill option is “FillSeries” which can be referred from `fillType` property. + +### Copy Cells + +To copy the selected cell content to the adjacent cells. You can do this by one of the following ways, + +* Using fill handle to select the adjacent cell range and “Copy Cells” option in “AutoFillOptions” menu to fill the adjacent cells. +* Using “CopyCells” as fill type in `autoFill` method to fill the adjacent cells. + +### Fill Series + +To fill the series of numbers, characters, or dates based on selected cell content to the adjacent cells with their formats. + +You can do this by one of the following ways, + +* Using fill handle to select the adjacent cell range and “Fill Series” option in “AutoFillOptions” menu to fill the adjacent cells. +* Using “FillSeries” as fill type in `autoFill` method to fill the adjacent cells. + +### Fill Formatting Only + +To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content. + +You can do this by one of the following ways, + +* Using fill handle to select the adjacent cell range and “Fill Formatting Only” option in “AutoFillOptions” menu to fill the adjacent cells. +* Using “FillFormattingOnly” as fill type in `autoFill` method to fill the adjacent cells. + +### Fill Without Formatting + +To fill series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats. + +You can do this by one of the following ways, + +* Using fill handle to select the adjacent cell range and “Fill Without Formatting” option in “AutoFillOptions” menu to fill the adjacent cells. +* Using “FillWithoutFormatting” as fill type in `autoFill` method to fill the adjacent cells. + +In the following sample, you can enable/disable the fill option on the button click event by using the `showFillOptions` property in `autoFillSettings`. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/autofill-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/autofill-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/autofill-cs1" %} + +### Limitations + +- The Flash Fill feature is not supported in the autofill workflow. +- There is limitation for autofill with conditional formatting applied cells. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clear.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clear.md new file mode 100644 index 0000000000..0dd230f033 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clear.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Clear Cell Contents or Formats in React Spreadsheet | Syncfusion +description: Learn here how to apply clear cell contents or formats in React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Clear Cell Contents or Formats in React Spreadsheet + +The **Clear** feature enables you to remove cell contents (formulas and data) and formats (including number formats, conditional formats, and borders) from a spreadsheet. When you use **Clear All**, both the contents and formats are removed simultaneously. + +## Applying the Clear Feature + +You can clear cell contents or formats using the following approaches: + +- **Ribbon Toolbar:** Select the clear icon under the `Home` tab to access clear options. +- **Programmatically:** Use the [`clear`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. + +The available clear options are: + +| Option | Description | +|--------------------|-----------------------------------------------------------------------------| +| `Clear All` | Clears all contents, formats, and hyperlinks. | +| `Clear Formats` | Clears only the formats (including number formats, conditional formats, and borders) in a cell. | +| `Clear Contents` | Clears only the contents (formulas and data) in a cell. | +| `Clear Hyperlinks` | Clears only the hyperlinks in a cell. | + +The following code example demonstrates how to clear cell contents and formats in a button click event. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/clear-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/clear-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/clear-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clipboard.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clipboard.md new file mode 100644 index 0000000000..7ef74dbcc8 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clipboard.md @@ -0,0 +1,100 @@ +--- +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. +control: Clipboard +platform: document-processing +documentation: ug +--- + +# Clipboard Operations in Angular Spreadsheet component + +The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#enableclipboard) property in Spreadsheet. + +> By default, the `enableClipboard` property is true. + +## Cut + +It is used to cut the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard. + +**User Interface**: + +Cut can be done in one of the following ways. + +* Using Cut button in the Ribbon’s HOME tab to perform cut operation. +* Using Cut option in the Context Menu. +* Using `Ctrl + X` | `Command + X` keyboard shortcut. +* Using the [`cut`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#cut) method. + +## Copy + +It is used to copy the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard. + +**User Interface**: + +Copy can be done in one of the following ways. + +* Using Copy button in the Ribbon’s HOME tab to perform copy operation. +* Using Copy option in the Context Menu. +* Using `Ctrl + C` | `Command + C` keyboard shortcut. +* Using the [`copy`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#copy) method. + +## Paste + +It is used to paste the clipboard data to the selected range, rows or columns. You have the following options in Paste, + +* `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. + +**User Interface**: + +Paste can be done in one of the following ways. + +* Using Paste button in the Ribbon’s HOME tab to perform paste operation. +* Using Paste option in the Context Menu. +* Using `Ctrl + V` | `Command + V` keyboard shortcut. +* Using the [`paste`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#paste) method. + +> If you use the Keyboard shortcut key for cut (`Ctrl + X`) / copy (`Ctrl + C`) from other sources, you should use `Ctrl + V` shortcut while pasting into the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/clipboard-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/clipboard-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/clipboard-cs1" %} + +## Prevent the paste functionality + +The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#actionbegin) event, you can set `cancel` argument as false in paste request type. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/clipboard-cs2/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/clipboard-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/clipboard-cs2" %} + +## Limitations + +- External clipboard is not fully supported while copying data from another source and pasting into a spreadsheet, it only works with basic supports (Values, Number, cell, and Text formatting). +- If you copy =SUM(A2,B2) and paste, the formula reference will change depending on the pasted cell address but we don't have support for nested formula(formula reference will be same). +- Clipboard is not supported with conditional formatting (values only pasting). +- We have limitation while copying the whole sheet data and pasting it into another sheet. +- Paste options in Ribbon UI and context menu are not enabled when copy and paste from an external content. The external clipboard paste works only through keyboard shortcuts (Ctrl + V). + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/editing.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/editing.md similarity index 73% rename from Document-Processing/Excel/Spreadsheet/Angular/editing.md rename to Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/editing.md index 9753360452..1758d1650a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/editing.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/editing.md @@ -2,14 +2,18 @@ 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 +platform: document-processing documentation: ug --- # Editing in Angular Spreadsheet component -You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowediting) property to enable or disable the editing feature. +You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowediting) property to enable or disable the editing feature. + +To get start quickly with Editing, you can check on this video: + +{% youtube "https://www.youtube.com/watch?v=o3hsPhqaZzY" %} ## Edit cell @@ -19,7 +23,7 @@ You can start editing by one of the following ways, * Press `F2` key to edit the active cell. * Use formula bar to perform editing. * Use `BACKSPACE` or `SPACE` key to clear the cell content and start the edit mode. -* Using the [`startEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#startedit) method. +* Using the [`startEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#startedit) method. ## Save cell @@ -27,16 +31,16 @@ If the cell is in editable state, you can save the edited cell by one of the fol * Perform mouse click on any other cell rather than the current editing cell. * Press `Enter` or `Tab` keys to save the edited cell content. -* Using the [`endEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#endedit) method. +* Using the [`endEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#endedit) method. ## Cancel editing To cancel the editing without saving the changes, you can use one of the following ways, * 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. +* Using the [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#closeedit) method. -The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#closeedit) method in spreadsheet. +The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#closeedit) method in spreadsheet. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -56,7 +60,7 @@ The following sample shows how to prevent the editing and cell save. Here `E` co ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/merge-cells.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/merge-cells.md new file mode 100644 index 0000000000..54544219c6 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/merge-cells.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Merge Cells in Angular Spreadsheet component | Syncfusion +description: Learn here how to apply merge to a cell range in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Merge cells in Angular Spreadsheet + +Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use [`allowMerge`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowmerge) property to enable or disable the merge cells option in spreadsheet. + +You can merge the range of cells in the following ways, + +* Set the `rowSpan` and `colSpan` property in `cell` to merge the number of cells at initial load. +* Select the range of cells and apply merge by selecting the desired option from ribbon toolbar. +* Use [`merge`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#merge) method to merge the range of cells, once the component is loaded. + +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. | +| UnMerge | Splits the merged cells into multiple cells. | + +The following code example shows the merge cells operation in spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/merge-cells-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/merge-cells-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/merge-cells-cs1" %} + +## Limitations + +The following features have some limitations when using merged cells: + +- Merge with filter. +- Merge with wrap text. +- Merge with border style. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/wrap-text.md b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/wrap-text.md new file mode 100644 index 0000000000..4a3ff75f0a --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/wrap-text.md @@ -0,0 +1,39 @@ +--- +layout: post +title: Wrap Text in Angular Spreadsheet component | Syncfusion +description: Learn here how apply wrap text to cells in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Wrap text in Angular Spreadsheet + +Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowwrap) property to enable or disable the wrap text support in spreadsheet. + +Wrap text can be applied or removed to a cell or range of cells in the following ways, + +* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load. +* 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. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/wrap-text-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/wrap-text-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/wrap-text-cs1" %} + +## Limitations + +The following features have some limitations when using wrap text: + +- Sorting with wrap text applied data. +- Merge with wrap text \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/customize-chart-appearance.md b/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/customize-chart-appearance.md new file mode 100644 index 0000000000..7c5032775e --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/customize-chart-appearance.md @@ -0,0 +1,100 @@ +--- +layout: post +title: Customize Charts in Angular Spreadsheet component | Syncfusion +description: Learn here how to customize charts in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Customize Chart Appearance in Angular Spreadsheet + +Once a chart is inserted into the worksheet, you can customize its appearance and structure to make it clearer and more informative. + +## Move a Chart + +To reposition a chart within the worksheet: + +1. **Click the chart** to select it (selection handles appear around it). +2. **Click and drag** the chart to your desired location. +3. **Release** to place the chart in the new position. + +## Resize a Chart + +To adjust the chart size: + +1. **Click the chart** to select it. +2. **Drag a middle edge handle** to resize along a single axis — horizontally or vertically. +3. **Release** to apply the new size. + +## Access Chart Design Options + +When a chart is selected, a **Chart Design** tab becomes available in the ribbon. This tab provides tools to modify chart elements and structure. + +## Add or Modify Chart Elements + +Using the **Add Chart Element** option, you can enhance your chart with the following elements: + +### Axes and Axis Titles +- **Purpose** — Clearly describe what your data values represent +- **When to use** — Add when axis measurements are not immediately obvious +- **How to add** — Chart Design tab → Add Chart Element → Axes → Select the desired axis type + +### Chart Title +- **Purpose** — Explain what the chart represents at a glance +- **When to use** — Always recommended for clarity +- **How to add** — Chart Design tab → Add Chart Element → Chart Title → Choose a title style + +### Data Labels +- **Purpose** — Display exact values directly on the chart +- **When to use** — Helpful when precise values are important to viewers +- **How to add** — Chart Design tab → Add Chart Element → Data Labels → Select label position + +### Gridlines +- **Purpose** — Improve readability by providing a reference grid +- **When to use** — Useful for charts with many data points +- **How to add** — Chart Design tab → Add Chart Element → Gridlines → Select gridline type + +### Legends +- **Purpose** — Identify and distinguish data series in multi-series charts +- **When to use** — Essential when multiple data series are plotted +- **How to add** — Chart Design tab → Add Chart Element → Legend → Choose legend position + +## Switch Data Orientation + +If your chart is not displaying data as intended, you can reverse how rows and columns are interpreted: + +1. **Select the chart** by clicking on it +2. **Go to Chart Design tab** in the ribbon +3. **Click Switch Row/Column** to flip the data orientation +4. **Review the result** — The chart now groups data differently + +This is useful when: +- You want to compare categories differently +- Your data is organized differently than expected +- You need to highlight different trends or patterns + +## Change Chart Type + +To switch between chart types after creation: + +1. **Select the chart** by clicking on it +2. **Go to Chart Design tab** in the ribbon +3. **Click Chart Type** option +4. **Select a new type** (Column, Bar, Line, Area, Pie, etc.) + +## Customization of line chart markers + +Using the [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#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. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/chart-cs3/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/chart-cs3/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/chart-cs3" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/insert-charts.md b/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/insert-charts.md new file mode 100644 index 0000000000..caba52683f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/insert-charts.md @@ -0,0 +1,47 @@ +--- +layout: post +title: Insert Charts in Angular Spreadsheet component | Syncfusion +description: Learn here how to insert charts in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Insert Charts in Angular Spreadsheet + +## Insert a Chart Using the UI + +You can insert a chart by selecting the chart icon in the Ribbon toolbar under the Insert Tab. The chart will be inserted based on the selected range of cells in the Spreadsheet. + +## Insert a Chart Programmatically + +Use the [insertChart](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertchart) method to insert the chart programmatically. + +The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#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: + +* type: Specifies the type of chart. +* theme: Specifies the theme of a chart. +* isSeriesInRows: Specifies to switch the row or a column. +* range: Specifies the selected range or specified range. +* id: Specifies the chart element id. +* markerSettings: Specifies the marker settings. The marker is used to provide information about the data points in the series and is currently only applicable to the line chart. + +The following code example shows how to insert a chart in the spreadsheet: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/chart-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/chart-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/chart-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/remove-charts.md b/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/remove-charts.md new file mode 100644 index 0000000000..37b6ff869f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/chart-and-visualization/remove-charts.md @@ -0,0 +1,43 @@ +--- +layout: post +title: Remove Charts in Angular Spreadsheet component | Syncfusion +description: Learn here how to remove charts in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Remove Charts in Angular Spreadsheet + +You can remove a chart from your worksheet either through the user interface or programmatically. + +## Remove a Chart Using the UI + +To delete a chart: + +1. **Select the chart** by clicking on it +2. **Press Delete** or **Backspace** to remove it immediately + +**Alternative method:** +- **Select the chart** and choose **Clear All** from the ribbon (this clears the selected chart) + +## Remove a Chart Programmatically + +Use the [deleteChart](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#deletechart) method to remove charts through code: + +- **With a chart ID** — Pass the chart ID to remove that specific chart +- **Without an ID** — Call the method without arguments to remove the currently active (selected) chart + +The following code example shows how to remove a chart in the spreadsheet: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/delete-chart-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/delete-chart-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/delete-chart-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/charts-and-visualizations.md b/Document-Processing/Excel/Spreadsheet/Angular/charts-and-visualizations.md new file mode 100644 index 0000000000..472fc2c582 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/charts-and-visualizations.md @@ -0,0 +1,54 @@ +--- +layout: post +title: Charts and visualizations in Angular Spreadsheet component | Syncfusion +description: Learn here how to insert, customize, update, and remove charts in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Charts and Visualizations + +## Understanding Charts + +The Syncfusion Angular Spreadsheet component supports built-in charts, allowing you to turn cell ranges into clear visual representations directly inside your worksheet. Charts help you identify trends, compare values, and communicate data insights at a glance. + +## Supported Chart Types + +The following types of charts are available in the Spreadsheet. + +>* Column Chart +>* Bar Chart +>* Area Chart +>* Line Chart +>* Pie Chart +>* Scatter Chart + +## How Charts Stay Synchronized + +When you create a chart from a cell range, the chart becomes linked to that data source. If values in the source range change, the chart automatically updates to reflect the new data. This makes it easy to build dynamic spreadsheets where visuals and data stay in sync. + +## Chart Behavior + +By default, charts are enabled in the Spreadsheet (via the [allowChart](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowchart) property). Once created, charts behave as objects within the worksheet—they can be moved, resized, and customized without affecting the underlying data. + +## Overview of Chart and Visualization Operations + +The Angular Spreadsheet component provides a variety of features for working with charts and visualizations. Below is a quick overview of each feature, with links to their respective documentation sections: + +- **[Insert Charts](./charts-and-visualizations/insert-charts)**: Add charts to your spreadsheet to visually represent your data. +- **[Customize Chart Appearance](./charts-and-visualizations/customize-chart-appearance)**: Change the look and feel of your charts, including styles, colors, and chart types. +- **[Remove Charts](./charts-and-visualizations/remove-charts)**: Delete charts that are no longer needed from your worksheet. + +## Limitations of Chart + +The following features have some limitations in the Chart: + +* Insert row/delete row between the chart data source will not reflect the chart. +* Copy/paste into the chart data source will not reflect the chart. +* Corner resizing option in chart element. + +## See Also +* [Images](./images-and-illustrations) +* [Formatting](./formatting) +* [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/clipboard.md b/Document-Processing/Excel/Spreadsheet/Angular/clipboard.md index 7c70da2fe5..d256a5de16 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 --- diff --git a/Document-Processing/Excel/Spreadsheet/Angular/comment.md b/Document-Processing/Excel/Spreadsheet/Angular/comment.md index 40bd6eb17b..b405b3f3dd 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/comment.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/comment.md @@ -8,14 +8,16 @@ documentation: ug --- # Comment in Angular Spreadsheet component -The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads. +The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as `resolve` and `reopen` to track status, plus an optional **Comments Review Pane** for browsing and managing threads. -Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact. +Cells that contain a comment show a small indicator. Hovering over the cell opens a preview of the comment editor. This helps maintain a clear workflow for collaboration while keeping the original data unchanged. ![Spreadsheet showing a comment](./images/spreadsheet_comment.png) ## Author identity -The Syncfusion Spreadsheet does not automatically track user identity. To tag new comments and replies with an author name, set the `author` property when initializing the Spreadsheet. +The Syncfusion Spreadsheet does not automatically track author details. To assign an author name to new comments and replies, set the [`author`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#author) property when initializing the Spreadsheet. + +If the [`author`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#author) property is not defined, the default value will be **Guest User**. ```ts import { Component } from '@angular/core'; @@ -33,29 +35,33 @@ The Syncfusion Spreadsheet does not automatically track user identity. To tag ne public author: string = 'Author Name'; } ``` ->If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default. +> If the [`author`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#author) property is not set, "Guest User" will appear as the author for comments and replies by default. ## Adding a comment -You can add a **comment** to a cell in several ways: -* **Context menu**: Right-click the target cell and select **"New Comment"**. -* **Ribbon**: Go to **Review > Comment > New Comment**. -* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell. -* **Programmatically**: - * Use the `updateCell` method with the comment model to add a comment to a specific cell. - * Bind comments via code-behind during initial load by associating the comment model with the cell model. + +A **comment** can be added to a cell in the following ways: + +* **Context menu**: Right-click the cell and choose **New Comment**. +* **Ribbon**: Go to **Review > Comment > New Comment**. +* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell. +* **Programmatically**: + * Use the [updateCell](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updatecell) method with the comment model to add a comment to a specific cell. + * Bind comments during initial load by linking the comment model with the cell model. The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover. ![Adding a comment in Spreadsheet](./images/spreadsheet_adding_a_comment.gif) ## Adding a reply -You can add one or more replies to an existing comment to provide additional details or answers: -* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**. + +Replies can be added to an existing comment to provide more details or responses: + +* **Context menu**: Right-click the cell that already has a comment, choose **Comment > New Reply**, type the reply, and click **Post**. * **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**. -* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**. -* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode. +* **Comment editor**: Hover over the comment indicator to open the editor, type the reply, and click **Post**. +* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell with a comment to open the editor in reply mode. -After posting, the replies appear under the first comment in the comment editor. +After posting, replies appear directly under the original comment in the comment editor. ![Adding a reply in Spreadsheet](./images/spreadsheet_comment_reply.png) @@ -68,7 +74,9 @@ You can edit the content of a comment or its replies directly within the comment ![Editing a comment reply in Spreadsheet](./images/spreadsheet_edit_comment.png) ## Resolve and Reopen -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. +The **Resolve thread** option is used to mark a comment thread as completed once the issue or discussion has been addressed. When a thread is resolved, its background color changes to show the resolved state, and the reply input box along with reply menu actions are hidden. + +If more discussion is needed later, the **Reopen** option can be used. Reopening a thread restores it to active state, brings back the reply input box, and re-enables the reply menu actions so the conversation can be continued. ### Resolve a comment * In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**. @@ -100,11 +108,11 @@ You can also use the `isResolved` property in the comment model when initializin You can delete either a specific reply or an entire comment thread (including all replies) using the following options: ### 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. +* **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 the header for a resolved comment. -Deleting a thread removes the comment and all its replies from the cell. +Deleting a thread removes the comment and all of its replies from the cell. ![Deleting a comment thread in Spreadsheet](./images/spreadsheet_delete_comment.png) @@ -114,45 +122,47 @@ In the comment editor, hover over the reply and click the **"⋯" (More actions) ![Deleting a comment reply in Spreadsheet](./images/spreadsheet_delete-reply_comment.png) ## Next and Previous Comment -The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments: -* **Next Comment**: Moves to the next cell with a comment. -* **Previous Comment**: Moves to the previous cell with a comment. +The **Review > Comment > Next Comment** and **Previous Comment** options in the ribbon allow you move quickly between cells that contain comments: + +* **Next Comment**: Jumps to the next cell with a comment. +* **Previous Comment**: Jumps to the previous cell with a comment. -Navigation starts within the active sheet. When all comments in the active sheet have been visited (end or start reached), the navigation automatically continues to the next or previous sheet that contains comments. This ensures you can review all comments across the workbook without manually switching sheets. +Navigation starts in the active sheet. When all comments in that sheet have been visited (end or start reached), the navigation continues automatically to the next or previous sheet that has comments. This makes it easy to review all comments across the workbook without switching sheets manually. ![Next and Previous comments in Spreadsheet](./images/spreadsheet_next_previous_comment.png) ## Comments review pane -The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook. +The **Comments review pane** gives a clear, central view of all comments in the active sheet, making it easier to manage discussions without moving through each cell one by one. It provides options for filtering, quick actions, and navigation, helping maintain an efficient review process across the workbook. -You can show or hide the "Comments" review pane using: +You can show or hide the Comments review pane in two ways: * **Ribbon**: Go to **Review > Comment > Show Comments**. -* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**. +* **Property**: Set the `showCommentsPane` property to **true** when initializing the Spreadsheet. By default, this property is set to **false**. ![Show comments in Spreadsheet](./images/spreadsheet_show_comments.gif) ### Features of the comments review pane -The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell. +The "Comments" review pane appears inside the Spreadsheet to give a dedicated space for handling comments. It works as a central place where all comment threads can be viewed, managed, and organized without moving cell by cell. -The "Comments" review pane allows you to: +The "Comments" review pane supports the following actions: -* Add new comment using the **New** button. -* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads. -* Navigate between comments and synchronize selection with the corresponding cells. +* Add a new comment using the **New** button. +* Filter comments by **All**, **Active**, or **Resolved** to show specific threads. +* Move between comments and link the selection with the related cells. * Perform actions such as: - * **Reply** – Add replies directly from the review pane. - * **Edit** – Modify the text of a comment or reply. - * **Delete** – Remove a reply or an entire thread. - * **Resolve/Reopen** – Change the status of a comment. + * **Reply** – Add a reply directly in the review pane. + * **Edit** – Change the text of a comment or reply. + * **Delete** – Remove a reply or the whole thread. + * **Resolve/Reopen** – Update the status of a comment. -When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized: +When the review pane is open, any action done in the review pane or in the cell’s comment editor stays in synchronized. -* Selecting a comment in the review pane highlights the corresponding cell in the sheet. -* Selecting a cell with a comment focuses the respective comment thread in the review pane. -* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI. -* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing. + +* Selecting a comment in the review pane highlights the matching cell in the worksheet. +* Selecting a cell that has a comment opens the related comment thread in the review pane. +* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the review pane and the cell comment editor at the same time, keeping them consistent. +* The review pane updates automatically when comments are added, removed, or resolved, so the latest state is always shown without needing to refresh. ## Saving a Workbook with Comments You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**. @@ -161,17 +171,21 @@ You can save spreadsheet data along with **comments** using **File > Save As > M > Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**. ### 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`. +### Why comments are not saved in `.xls` + +The **.xls** format is built on the older Excel binary structure (BIFF8). This structure does not support newer features such as **threaded comments**. +Threaded comments require the **Open XML** structure that is used in `.xlsx` files. > 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: -- **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). -In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event. +You can attach a **comment thread** to cells during initial load by adding a `comment` object in the cell model. Each cell supports one comment thread, which can include: + +- **Comment**: Contains `author`, `text`, `createdTime`, and `isResolved`. +- **Replies**: A list of replies. Each reply has its own `author`, `text`, and `createdTime`. Nested replies (replies to replies) are not supported. + +In the example below, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown at startup by enabling the `showCommentsPane` property, and comments are added with the `updateCell` method inside the `created` event. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -191,11 +205,12 @@ In the below sample, comments are added to a specific cell using cell data bindi * **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane. ## 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 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. + +* **Draft comments are not saved**: Text typed in the comment editor is lost if the editor is closed without clicking **Post**. Only posted comments are stored and shown again when the editor is reopened. +* **Comments and Notes cannot be used together**: A cell can have either a comment or a note, but not both. If a cell already has a comment, a note cannot be added, and if it has a note, a comment cannot be added. +* **Comments in print output**: Comments are not included when printing the worksheet or workbook. +* **No real-time collaboration**: Multiple people cannot edit comments at the same time. However, when a workbook is exported and then imported again, the author details for each comment and reply remain available. ## See Also * [Notes](./notes) -* [Hyperlink](./link) \ No newline at end of file +* [Hyperlink](./link) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md b/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md index 4df55c0242..7d4d425fbb 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/context-menu.md @@ -2,125 +2,66 @@ 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 +platform: document-processing documentation: ug --- # Context menu in Angular Spreadsheet component -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 Context menu is used to improve user interaction with the Spreadsheet through a popup menu. It opens when right-clicking on a cell, column header, row header, or pager in the Spreadsheet. You can use the [`enableContextMenu`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#enablecontextmenu) property to enable or disable the context menu. > The default value for the `enableContextMenu` property is `true`. -## Context Menu Items in Row Cell +## Context menu Items in Row Cell Please find the table below for default context menu items and their actions. | Context Menu items | Action | |-------|---------| -| [`Cut`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#cut) | Cut the selected cells data to the clipboard, you can select a cell where you want to move the data. | -| [`Copy`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#copy) | Copy the selected cells data to the clipboard, so that you can paste it to somewhere else. | -| [`Paste`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#paste) | Paste the data from clipboard to spreadsheet. | -| [`Paste Special`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from clipboard to spreadsheet. | -| [`Filter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#filter) | Perform filtering to the selected cells based on an active cell’s value. | -| [`Sort`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sort) | Perform sorting to the selected range of cells by ascending or descending. | -| [`Hyperlink`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hyperlink) | Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets in the Spreadsheet. | +| [`Cut`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#cut) | Cut the selected cells data to the clipboard, you can select a cell where you want to move the data. | +| [`Copy`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#copy) | Copy the selected cells data to the clipboard, so that you can paste it to somewhere else. | +| [`Paste`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. | +| [`Paste Special`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from
clipboard to spreadsheet. | +| [`Filter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#filter) | Perform filtering to the selected cells based on an active cell’s value. | +| [`Sort`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sort) | Perform sorting to the selected range of cells by ascending or descending. | +| [`Hyperlink`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#hyperlink) | Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets
in the Spreadsheet. | ## Context Menu Items in Row Header / Column Header -Please find the table below for default context menu items and their actions. +The context menu in row and column headers provides quick access to common actions for managing spreadsheet data. +Refer to the table below for the default context menu items and their actions. | Context Menu items | Action | |-------|---------| -| [`Cut`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#cut) | Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data. | -| [`Copy`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. | -| [`Paste`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#paste) | Paste the data from clipboard to spreadsheet. | -| [`Paste Special`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from clipboard to spreadsheet. | -| [`Insert Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertcolumn) | Insert new rows or columns into the worksheet. | -| [`Delete Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#delete) / [`Delete Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#delete) | Delete existing rows or columns from the worksheet. | -| [`Hide Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hidecolumn) | Hide the or and columns. | -| [`UnHide Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hidecolumn) | Show the hidden rows or columns. | +| [`Cut`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#cut) | Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data. | +| [`Copy`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. | +| [`Paste`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. | +| [`Paste Special`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from
clipboard to spreadsheet. | +| [`Insert Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#insertcolumn) | Insert new rows or columns into the worksheet. | +| [`Delete Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#delete) / [`Delete Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#delete) | Delete existing rows or columns from the worksheet. | +| [`Hide Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#hidecolumn) | Hide the rows or columns. | +| [`UnHide Rows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#hidecolumn) | Show the hidden rows or columns. | ## Context Menu Items in Pager -Please find the table below for default context menu items and their actions. +The context menu in the pager provides quick access to actions for managing worksheet navigation and related options. +Refer to the table below for the default context menu items and their actions. | Context Menu items | Action | |-------|---------| | `Insert` | Insert a new worksheet in front of an existing worksheet in the spreadsheet. | | `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. | - -## Context Menu Customization - -You can perform the following context menu customization options in the spreadsheet - -* Add Context Menu Items -* Remove Context Menu Items -* Enable/Disable Context Menu Items - -### Add Context Menu Items - -You can add the custom items in context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addcontextmenuitems) in `contextmenuBeforeOpen` event - -In this demo, Custom Item is added after the Paste item in the context menu. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/contextmenu/addContextMenu-cs1" %} - -### Remove Context Menu Items - -You can remove the items in context menu using the [`removeContextMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#removecontextmenuItems) in `contextmenuBeforeOpen` event - -In this demo, Insert Column item has been removed from the row/column header context menu. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs2/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs2/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/contextmenu/addContextMenu-cs2" %} - -### Enable/Disable Context Menu Items - -You can enable/disable the items in context menu using the [`enableContextMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enablecontextmenuItems) in `contextmenuBeforeOpen` event - -In this demo, Rename item is disabled in the pager context menu. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs3/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs3/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/contextmenu/addContextMenu-cs3" %} +| [`Protect Sheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. | +| [`Hide`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#hide) |Hide the selected worksheet. | ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/bootstrap5/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also +* [Customize context menu](./user-interface-customization/customize-context-menu) * [Worksheet](./worksheet) * [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md b/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md index 4afc89401a..ccea5ca94a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/data-binding.md @@ -9,13 +9,14 @@ 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 supports binding data from both **RESTful JSON services** and **local JavaScript object arrays** using the [`DataManager`](https://ej2.syncfusion.com/angular/documentation/data/getting-started). +You can assign the `dataSource` property either with a `DataManager` instance or directly with a JavaScript object array collection. > To bind data to a cell, use `cell data binding` support. ## Local data -To bind local data to the Spreadsheet, you can assign a JavaScript object array to the `dataSource` property. +Bind local data to the Spreadsheet by assigning a JavaScript object array to the `dataSource` property. Refer to the following code example for local data binding. @@ -31,11 +32,11 @@ 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/getting-started). By default, [`DataManager`](https://ej2.syncfusion.com/angular/documentation/data/getting-started) uses **JsonAdaptor** for local data-binding. ### Customizing column data mapping -By default, when a data source is bound to a sheet, columns are auto-assigned from the data source fields sequentially. This means that the first field in the data source is assigned to Column A, the second to Column B, and so on, sequentially. However, now you can customize the column assignments by specifying the appropriate field names in the desired order using the [fieldsOrder](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangemodel#fieldsorder) property. +By default, columns are auto-assigned sequentially from data source fields (first field → Column A, second field → Column B, etc.). To customize this mapping, use the [fieldsOrder](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangeModel#fieldsorder) property to specify field names in your desired order. > You can customize the mapping of column data only in the local data binding support. @@ -55,7 +56,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/getting-started) 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. @@ -91,7 +92,7 @@ Refer to the following code example for remote data binding. ### Web API -You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint. +You can use `WebApiAdaptor` to bind spreadsheet with Web API created using OData endpoint. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -107,7 +108,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. +Bind data to individual cells in a sheet using the `value` property. Refer to the following code example for cell data binding. @@ -127,7 +128,7 @@ Refer to the following code example for cell data binding. ## Dynamic data binding and Datasource change event -You can dynamically change the datasource of the spreadsheet by changing the model which is bound to the `dataSource` property or by changing the `dataSource` property of the `range` object of the `sheet` directly. The `dataSourceChanged` event handler will be triggered when editing, inserting, and deleting a row in the datasource range. This event will be triggered with a parameter named `action` which indicates the `edit`, `add` and `delete` actions for the respective ones. +You can dynamically change the datasource of the spreadsheet by changing the `dataSource` property of the `range` object of the `sheet`. The `dataSourceChanged` event handler will be triggered when editing, inserting, and deleting a row in the datasource range. This event will be triggered with a parameter named `action` which indicates the `edit`, `add` and `delete` actions for the respective ones. The following table defines the arguments of the `dataSourceChanged` event. @@ -155,11 +156,14 @@ The following table defines the arguments of the `dataSourceChanged` event. ## Dynamic data binding using updateRange method -The [updateRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updaterange) method allows you to dynamically update the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangemodel#datasource) in a spreadsheet without manually iterating through each cell. This method is especially useful for efficiently applying bulk updates to a specific range within the spreadsheet. +The [updateRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#updaterange) method enables bulk updates to the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangeModel#datasource) without iterating through individual cells, making it efficient for large data updates. -To use the [updateRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updaterange) method, provide the new [dataSource](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangemodel#datasource) and specify the starting cell for the update using the [startCell](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangemodel#startcell) property of the `RangeDirective`. Additionally, set the `sheetIndex` to target the appropriate sheet for the update. +**Setup:** +- Provide the new `dataSource` to update. +- Specify the starting cell using the [startCell](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rangeModel#startcell) property in the `RangeDirective`. +- Set the `sheetIndex` to target the appropriate sheet. -The following code example demonstrates how to dynamically update data using the [updateRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updaterange) method. +The following code example demonstrates how to dynamically update data using the [updateRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#updaterange) method. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -175,7 +179,7 @@ The following code example demonstrates how to dynamically update data using the ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/tailwind3/spreadsheet/default) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/data-validation.md b/Document-Processing/Excel/Spreadsheet/Angular/data-validation.md new file mode 100644 index 0000000000..35bd560a65 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/data-validation.md @@ -0,0 +1,101 @@ +--- +layout: post +title: Data validation in EJ2 Angular Spreadsheet control | Syncfusion +description: Learn here all about Data validation in Syncfusion EJ2 Angular Spreadsheet control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Data validation +documentation: ug +--- + +# Data validation in Angular Spreadsheet component + +Data validation restricts users from entering invalid data. Use the [`allowDataValidation`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowdatavalidation) property to enable or disable data validation. + + +> * The default value for `allowDataValidation` property is `true`. + +## Apply Validation + +You can apply data validation to restrict the type of data or the values that users enter into a cell. + +* **Ribbon UI:** Select the **Data** tab, then choose **Data Validation**. +* **Programmatically:** Use the [`addDataValidation`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#adddatavalidation) method. + + +## Clear Validation + +Clear validation using one of these methods: + +* **Ribbon UI:** Select the **Data** tab, then choose **Clear Validation**. +* **Programmatically:** Use the [`removeDataValidation`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#removedatavalidation) method. + + +## Highlight Invalid Data + +Highlight invalid data feature is used to highlight the previously entered invalid values. + +* **Ribbon UI:** Select the **Data** tab, then choose **Highlight Invalid Data**. +* **Programmatically:** Use the [`addInvalidHighlight`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addinvalidhighlight) method. + + +## Clear Highlighted Invalid Data + +Clear highlight feature is used to remove the highlight from invalid cells. + +* **Ribbon UI:** Select the **Data** tab, then choose **Clear Highlight**. +* **Programmatically:** Use the [`removeInvalidHighlight`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#removeinvalidhighlight) method. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/data-validation-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/data-validation-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/data-validation-cs1" %} + +## Custom Data validation + +The Spreadsheet supports custom data validation, allowing users to define their own validation rules for specific cells or ranges. This feature enables you to set conditions that the entered data must meet, making it particularly useful when predefined validation options, such as numbers, dates, or lists, are insufficient. + +With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet. + +**Example:** Validate a number between 10 and 100 using the formula `=AND(A1>10, A1<100)`, where A1 is the cell being validated. The Spreadsheet evaluates entered values against the formula and displays an alert if validation fails. + +You can apply custom data validation using two methods. + +* **Ribbon UI:** Navigate to **Data** tab, select **Data Validation**, then choose **Custom** from the **Allow** dropdown. +* **Programmatically:** Use the [`addDataValidation`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#adddatavalidation) method. + +The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/data-validation-cs2/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/data-validation-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/data-validation-cs2" %} + +## Limitations of Data validation + +The following features have some limitations in Data Validation: + +* Entire row data validation. +* Insert row between the data validation. +* Copy/paste with data validation. +* Delete cells between data validation applied range. + +## See Also + +* [Formatting](./formatting) +* [Rows and columns](./rows-and-columns) +* [Hyperlink](./link) +* [Sorting](./sort) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/events.md b/Document-Processing/Excel/Spreadsheet/Angular/events.md new file mode 100644 index 0000000000..4ac39a093d --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/events.md @@ -0,0 +1,154 @@ +--- +layout: post +title: Events in Angular Spreadsheet component | Syncfusion +description: Learn here all about the events in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Events +platform: document-processing +documentation: ug +--- + +# Events in Angular Spreadsheet Component + +The Spreadsheet component triggers events for creation, data binding, selection, editing, clipboard actions, sorting, filtering, formatting, row and column insertion or deletion, context menu and ribbon interactions, and import/export operations—enabling integration of custom logic into application workflows. + +## Action Events + +The `actionBegin` and `actionComplete` events are the primary action events in the Spreadsheet. + +The `actionBegin` event triggers when any action begins in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type, prevent specific actions from executing, and apply custom logic at the initiation of an action. + +The `actionComplete` event triggers when any action completes in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed. + +You can identify the type of action being triggered by using the `args.action` property during both the action events. + +The following table represents the action names for which the `actionBegin` and `actionComplete` events are triggered in the Spreadsheet: + +| **Action** | **ActionBegin** | **ActionComplete** | +|--------|-------------|----------------| +| Add Data Validation | validation | validation | +| Add Defined Name | - | addDefinedName | +| Autofill | autofill | autofill | +| Autofit | resizeToFit | resizeToFit | +| Cell Delete | cellDelete | cellDelete | +| Cell Save (Edit) | cellSave | cellSave | +| Chart Design | chartDesign | chartDesign | +| Chart Deletion | deleteChart | deleteChart | +| Chart Insertion | beforeInsertChart | insertChart | +| Chart (Resize/Drag and Drop) | - | chartRefresh | +| Clear | beforeClear | clear | +| Clear Conditional Formatting | - | clearCF | +| Clear Validation | removeValidation | removeValidation | +| Clear Highlight | removeHighlight | removeHighlight | +| Clipboard (Copy) | copy | - | +| Clipboard (Cut) | cut | - | +| Clipboard (Paste) | clipboard | clipboard | +| Comment | addComment | addComment | +| Conditional Formatting | conditionalFormat | conditionalFormat | +| Delete | delete | delete | +| Delete Comment | deleteComment | deleteComment | +| Delete (Rows/Columns) | delete | delete | +| Filter | filter | filter | +| Formatting (Cell/Number) | format | format | +| Freeze Panes | freezePanes | freezePanes | +| Gridlines | gridlines | gridlines | +| Headers | headers | headers | +| Hide (Row/Column) | hideShow | hideShow | +| Highlight Invalid Data | addHighlight | addHighlight | +| Hyperlink | hyperlink | hyperlink | +| Image Deletion | deleteImage | deleteImage | +| Image Insertion | beforeInsertImage | insertImage | +| Image (Resize/Drag and Drop) | - | imageRefresh | +| Insert (Row/Column/Sheet) | insert | insert | +| Merge | merge | merge | +| Open | beforeOpen | import | +| Protect Sheet | protectSheet | protectSheet | +| Read-Only | readonly | readonly | +| Remove Defined Name | - | removeDefinedName | +| Replace | beforeReplace | replace | +| Replace All | beforeReplaceAll | replaceAll | +| Resize (Row/Column) | - | resize | +| Save | beforeSave | - | +| Sort | beforeSort | sorting | +| Sheet Duplicate | duplicateSheet | duplicateSheet | +| Sheet Hide | hideSheet | hideSheet | +| Sheet Move | moveSheet | moveSheet | +| Sheet Rename | renameSheet | renameSheet | +| Wrap | beforeWrap | wrap | + + +The following code example demonstrates how to bind the `actionBegin` and `actionComplete` events in the Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/events/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/events/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/events" %} + +## Clipboard + +When performing clipboard operations such as **Cut**, **Copy**, or **Paste**, the Spreadsheet triggers specific events that allow you to monitor and manage these actions effectively. The following sections outline the event sequence and their roles. + +### Cut / Copy + +For **Cut** or **Copy** actions, only the [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) event is triggered. You can identify the action type and access the copied range by using the following properties: + +* `args.action === 'cut'` → Indicates a Cut action +* `args.action === 'copy'` → Indicates a Copy action +* `args.args.copiedRange` → Provides the range of copied cells + +### Paste + +During a **Paste** operation, events are triggered in the following sequence: + +> actionBegin → beforeCellUpdate → cellSave → actionComplete + +The table below describes each event and its role in the paste process: + +| **Event** | **Description** | **Event Arguments** | +|-----------|------------------|----------------------| +| [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the paste action starts. | [`ActionBeginEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) | +| [`beforeCellUpdate`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers for each cell in the pasted range before it is updated, allowing you to modify cell properties or cancel the `paste` action. | [`BeforeCellUpdateArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/beforecellupdateargs) | +| [`cellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#cellsave) | Triggers for each cell in the pasted range after the modified cell is saved. | [`CellSaveEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellsaveeventargs) | +| [`actionComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers after all pasted cells are fully saved. | [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actioncomplete) | + +### Accessing copied and pasted ranges + +You can access the copied and pasted ranges during paste operations by using the [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) and [`actionComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actioncomplete) events. Verify the action type using: + +* `args.action === 'clipboard'` → Indicates a paste action + +Once verified, you can access the following properties: + +* `args.eventArgs.copiedRange` → The range of cells that were copied +* `args.eventArgs.pastedRange` → The range of cells where content was pasted + +## Editing + +When a cell is edited manually—such as by **double-clicking the cell**, **pressing the F2 key**, or **modifying it through the formula bar**—the Spreadsheet triggers a series of events. These events allow you to monitor and manage the entire editing process, from initiation to completion. + +The sequence of events during manual cell editing is: + +> cellEdit → cellEditing → actionBegin → beforeCellUpdate → beforeCellSave → cellSave → cellEdited → actionComplete + +The table below describes each event and its role in the editing process: + +| **Event** | **Description** | **Event Arguments** | +|-----------|------------------|----------------------| +| [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#celledit) | Triggers before the cell enters edit mode. | [`CellEditEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellediteventargs) | +| [`cellEditing`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#cellediting) | Triggers while editing is in progress; fires for each change made to the cell content. | [`CellEditingEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellediteventargs) | +| [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the edit action starts. | [`ActionBeginEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) | +| [`beforeCellUpdate`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers before any cell property (style, value, formula, etc.) is modified. | [`BeforeCellUpdateArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/beforecellupdateargs) | +| [`beforeCellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellsave) | Triggers before the cell value is saved. | [`BeforeCellSaveEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellediteventargs) | +| [`cellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#cellsave) | Triggers when the modified cell value is saved. | [`CellSaveEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellsaveeventargs) | +| [`cellEdited`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#celledited) | Triggers after the editing process completes. | [`CellEditedEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellediteventargs) | +| [`actionComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers once the entire edit operation is completed. | [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actioncomplete) | + +## See Also + +* [Editing](./editing.md) +* [Clipboard](./clipboard.md) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/feature-list.md b/Document-Processing/Excel/Spreadsheet/Angular/feature-list.md index 874409b9a5..47b3757718 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/feature-list.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/feature-list.md @@ -2,67 +2,76 @@ layout: post title: Feature list in Angular Spreadsheet component | Syncfusion description: Learn here all about Feature list in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Feature list +platform: document-processing documentation: ug --- # Feature list in Angular Spreadsheet component -The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features. +The following table shows the features available in our Syncfusion EJ2 Spreadsheet. -| **Features** | **Available in EJ1 Spreadsheet** | **Available in EJ2 Spreadsheet** | **Comments** | -| --- | --- | --- | --- | -| Ribbon | Yes | Yes | - | -| Formula bar | Yes | Yes | - | -| Sheet tab | Yes | Yes | - | -| Show / Hide gridlines and header | Yes | Yes | - | -| Scrolling | Partially | Yes | - | -| Selection | Yes | Yes | - | -| Editing | Yes | Yes | - | -| Formulae | Yes | Partially | EJ2 supports limited number of [`most used formulas`](https://ej2.syncfusion.com/documentation/spreadsheet/formulas/#supported-formulas) | -| Named range | Yes | Partially | EJ2 Spreadsheet Named range supports only in workbook scope | -| Data Binding | Yes | Yes | - | -| Formatting | Yes | Yes | - | -| Context menu | Yes | Yes | - | -| Keyboard navigation | Yes | Yes | - | -| Keyboard shortcuts | Yes | Yes | - | -| Sorting | Yes | Yes | - | -| Filtering | Yes | Yes | - | -| Hyperlink | Yes | Yes | - | -| Undo & redo | Yes | Yes | - | -| Open and Save | Yes | Yes | - | -| Resize / Autofit | Yes | Yes | - | -| Clipboard | Yes | Yes | - | -| Collaborative editing | No | Yes | - | -| Wrap text | Yes | Yes | - | -| Template | No | Yes | - | -| Merge cells | Yes | Yes | - | -| Show / Hide rows and columns | Yes | Yes | - | -| Sheet customizations | Yes | Partially | 1. Add, rename and delete sheet support available
2. Move or copy is not supported in EJ2 spreadsheet.
| -| Data Validation | Yes | Yes | - | -| Table | Yes | No | - | -| Chart | Yes | Yes | - | -| Image | Yes | Yes | - | -| Conditional formatting | Yes | Yes | - | -| Freeze Pane | Yes | Yes | - | -| Scaling | No | No | - | -| Print | Yes | No | - | -| Grouping | No | No | - | -| Autofill | Yes | No | - | -| Auto Sum | Yes | Yes | - | -| Format painter | Yes | No | - | -| Cell Style | Yes | Partially | In EJ2 Spreadsheet, we can customize the cell style through api only. | -| Protection | Yes | Partially | In EJ2 Spreadsheet, Custom encryption is not supported in protect workbook. | -| Find and replace | Yes | Yes | - | -| Drag and Drop | Yes | No | - | -| Notes | Yes | No | - | -| Comments | No | No | - | -| Pivot table | Yes | No | - | -| Sparklines | Yes | No | - | -| Form controls | Yes | No | - | -| Shapes | No | No | - | -| Clear | Yes | Yes | - | +| **Features** | **Available in EJ2 Spreadsheet** | **Comments** | +| --- | --- | --- | +| Ribbon | Yes | - | +| Formula bar | Yes | - | +| Sheet tab | Yes | - | +| Show / Hide gridlines and header | Yes | - | +| Scrolling | Yes | - | +| Selection | Yes | - | +| Editing | Yes | - | +| Formulae | Partially | EJ2 supports limited number of [`most used formulas`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/formulas#supported-formulas) | +| Named range | Yes | - | +| Data Binding | Yes | - | +| AI Assist | Yes | - | +| Cell Formatting | Yes | - | +| Number Formatting | Yes | - | +| Context menu | Yes | - | +| Keyboard navigation | Yes | - | +| Keyboard shortcuts | Yes | - | +| Sorting | Yes | - | +| Filtering | Yes | - | +| Hyperlink | Yes | - | +| Undo & redo | Yes | - | +| Import | Yes | - | +| Export | Yes | - | +| Resize / Autofit | Yes | - | +| Clipboard | Yes | - | +| Collaborative editing | No | - | +| Wrap text | Yes | - | +| Template | Yes | - | +| Merge cells | Yes | - | +| Show / Hide rows and columns | Yes | - | +| Sheet customizations | Yes | - | +| Data Validation | Yes | - | +| Table | No | - | +| Chart | Yes | - | +| Image | Yes | - | +| Conditional formatting | Yes | - | +| Freeze Pane | Yes | - | +| Scaling | No | - | +| Print | Yes | - | +| Grouping | No | - | +| Autofill | Yes | - | +| Auto Sum | Yes | - | +| Format painter | No | - | +| Cell Style | Yes | - | +| Protection | Yes | - | +| Find and replace | Yes | - | +| Drag and Drop | Partially | EJ2 spreadsheet supports drag and drop of images and charts | +| Notes | Yes | - | +| Comments | Yes | - | +| Pivot table | No | - | +| Sparklines | No | - | +| Form controls | No | - | +| Shapes | No | - | +| Clear | Yes | - | +| Insert / Delete rows, columns and sheets | Yes | - | +| Sheet Visibility | Yes | - | +| Ribbon Customization | Yes | - | +| Theme and style options | Yes | - | +| Accessibility | Yes | - | +| Touch-Friendly Interactions | Yes | - | ## See Also @@ -71,5 +80,3 @@ The following table compares Excel functionality with the availability of EJ1 an * [Hyperlink](./link) * [Undo and Redo](./undo-redo) * [Unlock the particular cells in the protected sheet](./protect-sheet#unlock-the-particular-cells-in-the-protected-sheet) - -This file can contain any content. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/filter.md b/Document-Processing/Excel/Spreadsheet/Angular/filter.md index 1cec3dc3f4..88d74cd5c6 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/filter.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/filter.md @@ -2,14 +2,14 @@ layout: post title: Filter in Angular Spreadsheet component | Syncfusion description: Learn here all about Filter in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Filter +platform: document-processing documentation: ug --- # 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. +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#allowfiltering) property to enable or disable filtering functionality. > * The default value for `allowFiltering` property is `true`. @@ -17,21 +17,21 @@ 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 sheet, select a range of cells to filter by value of the cell. 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. -* Use the [`applyFilter()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#applyfilter) method programmatically. +* Use the [`applyFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#applyfilter) method programmatically. * Use `Ctrl + Shift + L` keyboard shortcut to apply the filter. > * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog. ## 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. +The [`applyFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. -> * The [`beforeFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforefilter) event will be triggered before filtering the specified range. -> * The [`filterComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#filtercomplete) event will be triggered after the filter action is completed successfully. +> * The [`beforeFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#beforefilter) event will be triggered before filtering the specified range. +> * The [`filterComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#filtercomplete) event will be triggered after the filter action is completed successfully. The following code example shows `filter` functionality in the Spreadsheet control. @@ -57,7 +57,7 @@ After applying filter to a certain column, you may want to clear it to make all * Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields. -* Use the `clearFilter()` method programmatically, to clear the applied filters in spreadsheet for all fields. +* Use the [`clearFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields. ## Clear filter on a field @@ -65,7 +65,7 @@ After filtering, you can clear/reset the filter for a field alone. It can be don * Click filter icon in the column’s header and then choose `Clear Filter` option from the filter dialog. * 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. +* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the filter in a particular column. ## Reapply filter @@ -81,7 +81,7 @@ The following errors have been handled for filtering, ## Get data from filtered rows -Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. +Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. The following code example shows how to get the filtered rows. @@ -104,13 +104,14 @@ The following features have some limitations in Filter: * Insert/delete row/column between the filter applied cells. * Merge cells with filter. * Copy/cut paste the filter applied cells. +* Filter by color is not supported. ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also * [Sorting](./sort) * [Hyperlink](./link) -* [Undo Redo](./undo-redo) \ No newline at end of file +* [Undo Redo](./undo-redo) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting-overview.md new file mode 100644 index 0000000000..60aa4d17b2 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formatting-overview.md @@ -0,0 +1,33 @@ +--- +layout: post +title: Formatting in Angular Spreadsheet component | Syncfusion +description: Learn here all about Formatting in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Formatting Cells in Angular Spreadsheet component + +Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are: + +* [Number Formatting](./number-formatting) +* [Text & Cell Formatting](./text-cell-formatting) +* [Conditional Formatting](./conditional-formatting) +* [Rich Text Formatting](./rich-text-formatting) + +To get started quickly with Formatting, you can check this video: + +{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %} + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +- [Rows and columns](./rows-and-columns) +- [Hyperlink](./link) +- [Sorting](./sort) +- [Filtering](./filter) +- [`Ribbon customization`](./ui-customization) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting.md deleted file mode 100644 index c6fd9f5a01..0000000000 --- a/Document-Processing/Excel/Spreadsheet/Angular/formatting.md +++ /dev/null @@ -1,419 +0,0 @@ ---- -layout: post -title: Formatting in Angular Spreadsheet component | Syncfusion -description: Learn here all about Formatting in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing -control: Formatting -documentation: ug ---- - -# Formatting in Angular Spreadsheet component - -Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are, -* Number Formatting -* Text Formatting -* Cell Formatting -* Conditional Formatting -* Rich Text Formatting - -## Number Formatting - -Number formatting provides a type for your data in the Spreadsheet. 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 | -|---------|---------|---------| -| General(default) | NA | 0 | -| Number | `0.00` | 2 | -| Currency | `$#,##0.00` | NA | -| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | -| ShortDate | `m/d/yyyy` | 14 | -| LongDate | `dddd, mmmm dd, yyyy` | NA | -| Time | `h:mm:ss AM/PM` | NA | -| Percentage | `0.00%` | 10 | -| Fraction | `# ?/?` | 12 | -| Scientific |`0.00E+00` | 11 | -| Text | `@` | 49 | - -Number formatting can be applied in following ways, -* Using the `format` property in `cell`, you can set the desired format to each cell at initial load. -* Using the [`numberFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#numberformat) method, you can set the number format to a cell or range of cells. -* Selecting the number format option from ribbon toolbar. - -### Custom Number Formatting - -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, - -| Type | Format Code | Format ID | -|-------|---------|---------| -| General(default) | NA | 0 | -| Number | `0` | 1 | -| Number | `0.00` | 2 | -| Number | `#,##0` | 3 | -| Number | `#,##0.00` | 4 | -| Number | `#,##0_);(#,##0)` | 37 | -| Number | `#,##0_);[Red](#,##0)` | 38 | -| Number | `#,##0.00_);(#,##0.00)` | 39 | -| Number | `#,##0.00_);[Red](#,##0.00)` | 40 | -| Currency | `$#,##0_);($#,##0)` | 5 | -| Currency | `$#,##0_);[Red]($#,##0)` | 6 | -| Currency | `$#,##0.00_);($#,##0.00)` | 7 | -| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 | -| Percentage | `0%` | 9 | -| Percentage | `0.00%` | 10 | -| Scientific |`0.00E+00` | 11 | -| Scientific |`##0.0E+0` | 48 | -| Fraction | `# ?/?` | 12 | -| Fraction | `# ??/??` | 13 | -| ShortDate | `m/d/yyyy` | 14 | -| Custom | `d-mmm-yy` | 15 | -| Custom | `d-mmm` | 16 | -| Custom | `mmm-yy` | 17 | -| Custom | `h:mm AM/PM` | 18 | -| Custom | `h:mm:ss AM/PM` | 19 | -| Custom | `h:mm` | 20 | -| Custom | `h:mm:ss` | 21 | -| Custom | `m/d/yyyy h:mm` | 22 | -| Custom | `mm:ss` | 45 | -| Custom | `mm:ss.0` | 47 | -| Text | `@` | 49 | -| Custom | `[h]:mm:ss` | 46 | -| Accounting | `_($* #,##0_);_($* (#,##0);_($* "-"_);_(@_)` | 42 | -| Accounting | `_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)` | 41 | -| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | -| Accounting | `_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)` | 43 | - -Custom Number formatting can be applied in following ways, -* Using the [`numberFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#numberformat) method, you can set your own custom number format to a cell or range of cells. -* Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells. - -The following code example shows the number formatting in cell data. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/format/number-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/format/number-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/format/number-cs1" %} - -## Configure culture-based custom format - -Previously, the custom format dialog always displayed formats using the English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version `27.1.*`, the custom format dialog will now display formats according to the applied culture. You can select a culture-based number format from the dialog or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. Then, click "Apply" to apply the culture-specific custom format to the selected cells. - -The spreadsheet allows customization of formats in the custom format dialog using the `configureLocalizedFormat` method. In this method, you need to pass a collection containing the default number format IDs and their corresponding format codes as arguments. Based on this collection, the custom format dialog will display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference. - -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 code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German (de)` culture. - -```ts -import { configureLocalizedFormat } from '@syncfusion/ej2-angular-spreadsheet'; - -const deLocaleFormats: FormatOption[] = [ - { id: 14, code: 'dd.MM.yyyy' }, - { id: 15, code: 'dd. MMM yy' }, - { id: 16, code: 'dd. MMM' }, - { id: 17, code: 'MMM yy' }, - { id: 20, code: 'hh:mm' }, - { id: 21, code: 'hh:mm:ss' }, - { id: 22, code: 'dd.MM.yyyy hh:mm' }, - { id: 37, code: '#,##0;-#,##0' }, - { id: 38, code: '#,##0;[Red]-#,##0' }, - { id: 39, code: '#,##0.00;-#,##0.00' }, - { id: 40, code: '#,##0.00;[Red]-#,##0.00' }, - { id: 5, code: '#,##0 "€";-#,##0 "€"' }, - { id: 6, code: '#,##0 "€";[Red]-#,##0 "€"' }, - { id: 7, code: '#,##0.00 "€";-#,##0.00 "€"' }, - { id: 8, code: '#,##0.00 "€";[Red]-#,##0.00 "€"' }, - { id: 41, code: '_-* #,##0_-;-* #,##0_-;_-* "-"_-;_-@_-' }, - { id: 42, code: '_-* #,##0 "€"_-;-* #,##0 "€"_-;_-* "-" "€"_-;_-@_-' }, - { id: 43, code: '_-* #,##0.00_-;-* #,##0.00_-;_-* "-"??_-;_-@_-' }, - { id: 44, code: '_-* #,##0.00 "€"_-;-* #,##0.00 "€"_-;_-* "-"?? "€"_-;_-@_-' } -]; - -// Mapping culture-based number formats for the "de" culture: The "this.spreadsheetObj" parameter is an instance of the spreadsheet component, and the "deLocaleFormats" parameter is an array containing format codes and their corresponding format IDs for the "de" culture. -configureLocalizedFormat(this.spreadsheetObj, deLocaleFormats); -``` - -The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/format/globalization-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/format/globalization-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/format/globalization-cs1" %} - -## 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, -* 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. - -### Fonts - -Various font formats supported 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. - -### Indents - -To enhance the appearance of text in a cell, you can change the indentation of a cell content using `textIndent` property. - -### Fill color - -To highlight cell or range of cells from whole workbook you can apply background color for a cell using `backgroundColor` property. - -### Borders - -You can add borders around a cell or range of cells to define a section of worksheet or a table. The different types of border options available in the spreadsheet are, - -| Types | Actions | -|-------|---------| -| Top Border | Specifies the top border of a cell or range of cells.| -| Left Border | Specifies the left border of a cell or range of cells.| -| Right Border | Specifies the right border of a cell or range of cells.| -| Bottom Border | Specifies the bottom border of a cell or range of cells.| -| No Border | Used to clear the border from a cell or range of cells.| -| All Border | Specifies all border of a cell or range of cells.| -| Horizontal Border | Specifies the top and bottom border of a cell or range of cells.| -| Vertical Border | Specifies the left and right border of a cell or range of cells.| -| Outside Border | Specifies the outside border of a range of cells.| -| Inside Border | Specifies the inside border of a range of cells.| - -You can also change the color, size, and style of the border. The size and style supported in the spreadsheet are, - -| Types | Actions | -|-------|---------| -| Thin | Specifies the `1px` border size (default).| -| Medium | Specifies the `2px` border size.| -| Thick | Specifies the `3px` border size.| -| Solid | Used to create the `solid` border (default).| -| Dashed | Used to create the `dashed` border.| -| Dotted | Used to create the `dotted` border.| -| 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. - -The following code example shows the style formatting in text and cells of the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/format/number-cs2/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/format/number-cs2/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/format/number-cs2" %} - -### Limitations of Formatting - -The following features are not supported in Formatting: - -* Insert row/column between the formatting applied cells. -* Formatting support for row/column. - -## Conditional Formatting - -Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowconditionalformat) property. - -> * The default value for the `allowConditionalFormat` property is `true`. - -### Apply Conditional Formatting - -You can apply conditional formatting by using one of the following ways, - -* 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. - -Conditional formatting has the following types in the spreadsheet, - -### Highlight cells rules - -Highlight cells rules option in the conditional formatting enables you to highlight cells with a preset color depending on the cell's value. - -The following options can be given for the highlight cells rules as type, - ->* 'GreaterThan', 'LessThan', 'Between', 'EqualTo', 'ContainsText', 'DateOccur', 'Duplicate', 'Unique'. - -The following preset colors can be used for formatting styles, - ->* `"RedFT"` - Light Red Fill with Dark Red Text, ->* `"YellowFT"` - Yellow Fill with Dark Yellow Text, ->* `"GreenFT"` - Green Fill with Dark Green Text, ->* `"RedF"` - Red Fill, ->* `"RedT"` - Red Text. - -### Top bottom rules - -Top bottom rules option in the conditional formatting allows you to apply formatting to the cells that satisfy a statistical condition with other cells in the range. - -The following options can be given for the top bottom rules as type, - ->* 'Top10Items', 'Bottom10Items', 'Top10Percentage', 'Bottom10Percentage', 'BelowAverage', 'AboveAverage'. - -### Data Bars - -You can apply data bars to represent the data graphically inside a cell. The longest bar represents the highest value and the shorter bars represent the smaller values. - -The following options can be given for the data bars as type, - ->* 'BlueDataBar', 'GreenDataBar', 'RedDataBar', 'OrangeDataBar', 'LightBlueDataBar', 'PurpleDataBar'. - -### Color Scales - -Using color scales, you can format your cells with two or three colors, where different color shades represent the different cell values. In the Green-Yellow-Red(GYR) Color Scale, the cell that holds the minimum value is colored as red. The cell that holds the median is colored as yellow, and the cell that holds the maximum value is colored as green. All other cells are colored proportionally. - -The following options can be given for the color scales as type, - ->* 'GYRColorScale', 'RYGColorScale', 'GWRColorScale', 'RWGColorScale', 'BWRColorScale', 'RWBColorScale', 'WRColorScale', 'RWColorScale', 'GWColorScale', 'WGColorScale', 'GYColorScale', 'YGColorScale'. - -### Icon Sets - -Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%. - -The following options can be given for the icon sets as type, - ->* 'ThreeArrows', 'ThreeArrowsGray', 'FourArrowsGray', 'FourArrows', 'FiveArrowsGray', 'FiveArrows', 'ThreeTrafficLights1', 'ThreeTrafficLights2', 'ThreeSigns', 'FourTrafficLights', 'FourRedToBlack', 'ThreeSymbols', 'ThreeSymbols2', 'ThreeFlags', 'FourRating', 'FiveQuarters', 'FiveRating', 'ThreeTriangles', 'ThreeStars', 'FiveBoxes'. - -### Custom Format - -Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. - -In the MAY and JUN columns, we have applied conditional formatting custom format. - ->* In the Conditional format, custom format supported for Highlight cell rules and Top bottom rules. - -### Clear Rules - -You can clear the defined rules by using 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 [`clearConditionalFormat()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#clearconditionalformat) method to clear the defined rules. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/conditional-formatting-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/conditional-formatting-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/conditional-formatting-cs1" %} - -### Limitations of Conditional formatting - -The following features have some limitations in Conditional Formatting: - -* Insert row/column between the conditional formatting. -* Conditional formatting with formula support. -* Copy and paste the conditional formatting applied cells. -* Custom rule support. - -## Rich Text Formatting - -Rich text formatting allows you to apply different styles to specific portions of text within a single cell to improve readability and presentation. Currently, subscript and superscript formatting are supported, and other rich text font styles are not supported. - -In the **Syncfusion Angular Spreadsheet**, rich text formatting is supported through the [`richText`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#richtext) property of the cell model. This property lets you define multiple text segments inside a cell, where each segment can have its own style. - -Each `richText` segment contains: - -- `text` – Specifies the content of the segment -- `style` – Defines formatting using the [`CellStyleModel`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel) - -## Subscript and Superscript - -Subscript and superscript formatting are supported as part of rich text formatting and can be applied to specific portions of text within a cell. - -To apply these formats, use the `verticalAlign` property within the style of a rich text segment: - -Set `verticalAlign: 'super'` for superscript and `verticalAlign: 'sub'` for subscript. - -#### How to Apply Subscript and Superscript - -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. - -![Subscript and superscript in Spreadsheet](./images/spreadsheet_richtext.gif) - -2. You can define the [`richText`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#richtext) property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded. - -```ts -cells: [ - { - value: 'H2O', - richText: [ - { text: 'H' }, - { text: '2', style: { verticalAlign: 'sub' } }, - { text: 'O' } - ] - } -] -``` - -3. You can also apply subscript and superscript dynamically using the [`updateCell`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updatecell) method. - -```ts -this.spreadsheetObj.updateCell({ - value: 'X2', - richText: [ - { text: 'X' }, - { text: '2', style: { verticalAlign: 'super' } } - ] -}, 'A5'); -``` - -The following code example shows the subscript and superscript formatting in cells of the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/richtext-format-cs1/src/app.ts %} -{% endhighlight %} -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/richtext-format-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/richtext-format-cs1" %} - -## Limitations -* **Limited formatting support:** Only subscript and superscript formatting are supported within rich text. Other formatting options such as font size, font color, and font weight are not supported. -* **Edit mode requirement:** Formatting can be applied only while the cell is in edit mode. Selecting text outside of edit mode does not support subscript or superscript formatting. - -## Note - -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. - -## See Also - -* [Rows and columns](./rows-and-columns) -* [Hyperlink](./link) -* [Sorting](./sort) -* [Filtering](./filter) -* [`Ribbon customization`](./ribbon#ribbon-customization) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting/conditional-formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting/conditional-formatting.md new file mode 100644 index 0000000000..b2d4772550 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formatting/conditional-formatting.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Conditional Formatting in Angular Spreadsheet component | Syncfusion +description: Conditional formatting rules, data bars, color scales and icon sets in Syncfusion Angular Spreadsheet. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Conditional Formatting + +Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowconditionalformat) property. + +> * The default value for the `allowConditionalFormat` property is `true`. + +## Apply Conditional Formatting + +You can apply conditional formatting by using one of the following ways, + +* Select the conditional formatting icon in the Ribbon toolbar under the Home Tab. +* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#conditionalformat) method to define the condition. +* Using the `conditionalFormats` in sheets model. + +Conditional formatting has the following types in the spreadsheet, + +## Highlight Cells Rules + +Highlight cells rules option in the conditional formatting enables you to highlight cells with a preset color depending on the cell's value. + +The following options can be given for the highlight cells rules as type, + +>* `GreaterThan`, `LessThan`, `Between`, `EqualTo`, `ContainsText`, `DateOccur`, `Duplicate`, `Unique`. + +The following preset colors can be used for formatting styles, + +>* `"RedFT"` - Light Red Fill with Dark Red Text, +>* `"YellowFT"` - Yellow Fill with Dark Yellow Text, +>* `"GreenFT"` - Green Fill with Dark Green Text, +>* `"RedF"` - Red Fill, +>* `"RedT"` - Red Text. + +## Top Bottom Rules + +Top bottom rules option in the conditional formatting allows you to apply formatting to the cells that satisfy a statistical condition with other cells in the range. + +The following options can be given for the top bottom rules as type, + +>* `Top10Items`, `Bottom10Items`, `Top10Percentage`, `Bottom10Percentage`, `BelowAverage`, `AboveAverage`. + +## Data Bars + +You can apply data bars to represent the data graphically inside a cell. The longest bar represents the highest value and the shorter bars represent the smaller values. + +The following options can be given for the data bars as type, + +>* `BlueDataBar`, `GreenDataBar`, `RedDataBar`, `OrangeDataBar`, `LightBlueDataBar`, `PurpleDataBar`. + +## Color Scales + +Using color scales, you can format your cells with two or three colors, where different color shades represent the different cell values. In the Green-Yellow-Red(GYR) Color Scale, the cell that holds the minimum value is colored as red. The cell that holds the median is colored as yellow, and the cell that holds the maximum value is colored as green. All other cells are colored proportionally. + +The following options can be given for the color scales as type, + +>* `GYRColorScale`, `RYGColorScale`, `GWRColorScale`, `RWGColorScale`, `BWRColorScale`, `RWBColorScale`, `WRColorScale`, `RWColorScale`, `GWColorScale`, `WGColorScale`, `GYColorScale`, `YGColorScale`. + +## Icon Sets + +Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%. + +The following options can be given for the icon sets as type, + +>* `ThreeArrows`, `ThreeArrowsGray`, `FourArrowsGray`, `FourArrows`, `FiveArrowsGray`, `FiveArrows`, `ThreeTrafficLights1`, `ThreeTrafficLights2`, `ThreeSigns`, `FourTrafficLights`, `FourRedToBlack`, `ThreeSymbols`, `ThreeSymbols2`, `ThreeFlags`, `FourRating`, `FiveQuarters`, `FiveRating`, `ThreeTriangles`, `ThreeStars`, `FiveBoxes`. + +## Custom Format + +Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. + +In the MAY and JUN columns, we have applied conditional formatting custom format. + +>* In the Conditional format, custom format supported for **Highlight cell rules** and **Top bottom rules**. + +## Clear Rules + +You can clear the defined rules by using 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 [`clearConditionalFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules. + +The following code sample shows how to apply different types of conditional formatting, colors, and styles in the Spreadsheet + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/conditional-formatting-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/conditional-formatting-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/conditional-formatting-cs1" %} + +## Limitations of Conditional formatting + +The following features have some limitations in Conditional Formatting: + +* Insert row/column between the conditional formatting. +* Conditional formatting with formula support. +* Copy and paste the conditional formatting applied cells. +* Custom rule support. + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +* [Number Formatting](./number-formatting) +* [Text & Cell Formatting](./text-cell-formatting) +* [Cell Range](./cell-range) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting/number-formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting/number-formatting.md new file mode 100644 index 0000000000..ad48a33138 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formatting/number-formatting.md @@ -0,0 +1,159 @@ +--- +layout: post +title: Number Formatting in Angular Spreadsheet component | Syncfusion +description: Learn here all about Number formatting in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Number Formatting in Angular Spreadsheet component + +Number formatting defines the type of data displayed in the Spreadsheet. You can enable or disable the number formatting using the [`allowNumberFormatting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allownumberformatting) property. The Spreadsheet supports the following number formatting types: + +| Types | Format Code | Format ID | +|---------|---------|---------| +| General(default) | NA | 0 | +| Number | `0.00` | 2 | +| Currency | `$#,##0.00` | NA | +| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | +| ShortDate | `m/d/yyyy` | 14 | +| LongDate | `dddd, mmmm dd, yyyy` | NA | +| Time | `h:mm:ss AM/PM` | NA | +| Percentage | `0.00%` | 10 | +| Fraction | `# ?/?` | 12 | +| Scientific |`0.00E+00` | 11 | +| Text | `@` | 49 | + +Number formatting can be applied in following ways, +* Using the [format](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cell#format) property in `cell`, you can set the desired format to each cell at initial load. +* Using the [`numberFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#numberformat) method, you can set the number format to a cell or range of cells. +* Selecting the number format option from ribbon toolbar. + +## Custom Number Formatting + +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`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#numberformat) method. + +The different types of custom number format populated in the custom number format dialog are, + +| Type | Format Code | Format ID | +|-------|---------|---------| +| General(default) | NA | 0 | +| Number | `0` | 1 | +| Number | `0.00` | 2 | +| Number | `#,##0` | 3 | +| Number | `#,##0.00` | 4 | +| Number | `#,##0_);(#,##0)` | 37 | +| Number | `#,##0_);[Red](#,##0)` | 38 | +| Number | `#,##0.00_);(#,##0.00)` | 39 | +| Number | `#,##0.00_);[Red](#,##0.00)` | 40 | +| Currency | `$#,##0_);($#,##0)` | 5 | +| Currency | `$#,##0_);[Red]($#,##0)` | 6 | +| Currency | `$#,##0.00_);($#,##0.00)` | 7 | +| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 | +| Percentage | `0%` | 9 | +| Percentage | `0.00%` | 10 | +| Scientific |`0.00E+00` | 11 | +| Scientific |`##0.0E+0` | 48 | +| Fraction | `# ?/?` | 12 | +| Fraction | `# ??/??` | 13 | +| ShortDate | `m/d/yyyy` | 14 | +| Custom | `d-mmm-yy` | 15 | +| Custom | `d-mmm` | 16 | +| Custom | `mmm-yy` | 17 | +| Custom | `h:mm AM/PM` | 18 | +| Custom | `h:mm:ss AM/PM` | 19 | +| Custom | `h:mm` | 20 | +| Custom | `h:mm:ss` | 21 | +| Custom | `m/d/yyyy h:mm` | 22 | +| Custom | `mm:ss` | 45 | +| Custom | `mm:ss.0` | 47 | +| Text | `@` | 49 | +| Custom | `[h]:mm:ss` | 46 | +| Accounting | `_($* #,##0_);_($* (#,##0);_($* "-"_);_(@_)` | 42 | +| Accounting | `_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)` | 41 | +| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | +| Accounting | `_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)` | 43 | + +Custom Number formatting can be applied in following ways, +* Using the [`numberFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format to a cell or range of cells. +* Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells. + +The following code example shows the number formatting in cell data. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/format/number-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/format/number-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/format/number-cs1" %} + +## Configure Culture-specific Custom format + +Earlier, the custom format dialog always showed formats using English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version **27.1.\***, the dialog now displays formats according to the applied culture. You can select a culture-based number format or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. After that, click **Apply** to apply the culture-specific custom format to the selected cells. + +The Spreadsheet supports customizing formats in the dialog using the `configureLocalizedFormat` method. In this method, you pass a collection of default number format IDs along with their corresponding format codes. The dialog will then display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference. + +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 code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture. + +```js +import { configureLocalizedFormat } from '@syncfusion/ej2-angular-spreadsheet'; + +const deLocaleFormats = [ + { id: 14, code: 'dd.MM.yyyy' }, + { id: 15, code: 'dd. MMM yy' }, + { id: 16, code: 'dd. MMM' }, + { id: 17, code: 'MMM yy' }, + { id: 20, code: 'hh:mm' }, + { id: 21, code: 'hh:mm:ss' }, + { id: 22, code: 'dd.MM.yyyy hh:mm' }, + { id: 37, code: '#,##0;-#,##0' }, + { id: 38, code: '#,##0;[Red]-#,##0' }, + { id: 39, code: '#,##0.00;-#,##0.00' }, + { id: 40, code: '#,##0.00;[Red]-#,##0.00' }, + { id: 5, code: '#,##0 "€";-#,##0 "€"' }, + { id: 6, code: '#,##0 "€";[Red]-#,##0 "€"' }, + { id: 7, code: '#,##0.00 "€";-#,##0.00 "€"' }, + { id: 8, code: '#,##0.00 "€";[Red]-#,##0.00 "€"' }, + { id: 41, code: '_-* #,##0_-;-* #,##0_-;_-* "-"_-;_-@_-' }, + { id: 42, code: '_-* #,##0 "€"_-;-* #,##0 "€"_-;_-* "-" "€"_-;_-@_-' }, + { id: 43, code: '_-* #,##0.00_-;-* #,##0.00_-;_-* "-"??_-;_-@_-' }, + { id: 44, code: '_-* #,##0.00 "€"_-;-* #,##0.00 "€"_-;_-* "-"?? "€"_-;_-@_-' } +]; + +// Mapping culture-based number formats for the "de" culture: The "spreadsheetRef.current" parameter is an instance of the spreadsheet component, and the "deLocaleFormats" parameter is an array containing format codes and their corresponding format IDs for the "de" culture. +configureLocalizedFormat(spreadsheetRef.current, deLocaleFormats); +``` + +The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/format/globalization-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/format/globalization-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/format/globalization-cs1" %} + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +* [Text & Cell Formatting](./text-cell-formatting) +* [Conditional Formatting](./conditional-formatting) +* [Cell Range](./cell-range) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting/rich-text-formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting/rich-text-formatting.md new file mode 100644 index 0000000000..c684f535e2 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formatting/rich-text-formatting.md @@ -0,0 +1,76 @@ +--- +layout: post +title: Rich Text Formatting in Angular Spreadsheet component | Syncfusion +description: Learn how to apply rich text formatting in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Rich Text Formatting + +Rich text formatting allows you to apply different styles to specific portions of text within a single cell to improve readability and presentation. Currently, subscript and superscript formatting are supported, and other rich text font styles are not supported. + +In the **Syncfusion Angular Spreadsheet**, rich text formatting is supported through the [`richText`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#richtext) property of the cell model. This property lets you define multiple text segments inside a cell, where each segment can have its own style. + +Each `richText` segment contains: + +- `text` – Specifies the content of the segment +- `style` – Defines formatting using the [`CellStyleModel`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel) + +## Subscript and Superscript + +Subscript and superscript formatting are supported as part of rich text formatting and can be applied to specific portions of text within a cell. + +To apply these formats, use the `verticalAlign` property within the style of a rich text segment: + +Set `verticalAlign: 'super'` for superscript and `verticalAlign: 'sub'` for subscript. + +#### How to Apply Subscript and Superscript + +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. + +![Subscript and superscript in Spreadsheet](./images/spreadsheet_richtext.gif) + +2. You can define the [`richText`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#richtext) property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded. + +```javascript + cells: [ + { + value: 'H2O', + richText: [ + { text: 'H' }, + { text: '2', style: { verticalAlign: 'sub' } }, + { text: 'O' } + ] + } + ] +``` + +3. You can also apply subscript and superscript dynamically using the [`updateCell`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updatecell) method. + +```javascript + spreadsheet.updateCell({ value: 'X2', richText: [ + { text: 'X' }, + { text: '2', style: { verticalAlign: 'super' } } + ] }, 'A5'); +``` + +The following code example shows the subscript and superscript formatting in cells of the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/richtext-format-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/richtext-format-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/richtext-format-cs1" %} + +## Limitations +* **Limited formatting support:** Only subscript and superscript formatting are supported within rich text. Other formatting options such as font size, font color, and font weight are not supported. +* **Edit mode requirement:** Formatting can be applied only while the cell is in edit mode. Selecting text outside of edit mode does not support subscript or superscript formatting. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formatting/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/formatting/text-cell-formatting.md new file mode 100644 index 0000000000..aa77fba93a --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formatting/text-cell-formatting.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Text & Cell Formatting in Angular Spreadsheet component | Syncfusion +description: Learn here all about Text and cell formatting in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Cell Styling and Text Formatting + +Text and cell formatting improves the appearance of your spreadsheet and helps highlight specific cells or ranges. You can apply formats such as font size, font family, font color, text alignment, borders, and more. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowcellformatting) property to enable or disable text and cell formatting in the Spreadsheet. + +You can set formats in the following ways: +* Use the [style](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cell#style) property to apply formats to each cell during the initial load. +* Use the [`cellFormat`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#cellformat) method to apply formats to a cell or range of cells dynamically. +* Apply formatting directly by clicking the desired format option from the ribbon toolbar. + +## Fonts + +The Syncfusion Angular Spreadsheet component provides comprehensive font formatting options to customize text appearance in cells. These options help improve readability and establish a clear visual hierarchy in your data. + +The Spreadsheet supports the following font formatting options: + +| Format | Description | +|--------|-------------| +| [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#fontfamily) | Specifies the typeface of the text (e.g., Arial, Calibri, Times New Roman, Verdana). | +| [`fontSize`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#fontsize) | Specifies the size of the text in points (e.g., 10pt, 12pt, 14pt). | +| [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#fontweight) | Specifies the thickness of the text. Supports values such as normal, bold, and numeric weights (e.g., 100–900) to control the emphasis level of the text. | +| [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#fontstyle) | Specifies the style of the text. Supports values such as normal, italic, and oblique to adjust the appearance and emphasis of the content. | +| [`textDecoration`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#textdecoration) | Specifies decorative styling applied to the text. Supports values such as underline, overline, and line-through (strikethrough) to highlight, cross out, or distinguish content within a cell. | +| [`color`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#color) | Specifies the color of the text. | + +## Text Alignment + +You can align text in cells using the following options: + +| Alignment Type | Options | Description | +|----------------|---------|-------------| +| [`textAlign`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/textalign) | Left, Center, Right | Aligns text horizontally from left to right within the cell. | +| [verticalAlign](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/verticalalign) | Top, Middle, Bottom | Aligns text from top to bottom within the cell. | + +## Indents + +Indentation helps enhance the visual appearance of text in cells by adding space before the text content. You can apply cell text indentation using the [`textIndent`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#textindent) property. + +## Fill Color + +Fill color (background color) is used to highlight cells or ranges of cells across the workbook. You can apply background colors to cells using the [`backgroundColor`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#backgroundcolor) property. + +The following code example shows the style formatting in text and cells of the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/format/number-cs2/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/format/number-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/format/number-cs2" %} + +## Borders + +The Syncfusion Angular Spreadsheet component allows you to apply borders to a cell or a range of cells. Borders help you separate sections, highlight data, or format tables clearly in your worksheet. You can apply borders in different styles, sizes, and colors based on your needs. + +### Border Types + +The Spreadsheet supports many types of borders. Each type adds a border to a specific side or area of the selected cells: + +| Types | Actions | +|-------|---------| +| **Top Border** | Specifies the top border of a cell or range of cells.| +| **Left Border** | Specifies the left border of a cell or range of cells.| +| **Right Border** | Specifies the right border of a cell or range of cells.| +| **Bottom Border** | Specifies the bottom border of a cell or range of cells.| +| **No Border** | Used to clear the border from a cell or range of cells.| +| **All Border** | Specifies all border of a cell or range of cells.| +| **Horizontal Border** | Specifies the top and bottom border of a cell or range of cells.| +| **Vertical Border** | Specifies the left and right border of a cell or range of cells.| +| **Outside Border** | Specifies the outside border of a range of cells.| +| **Inside Border** | Specifies the inside border of a range of cells.| + +### Customize Border Colors and Styles + +You can also change how the border looks by adjusting its size and style. The Spreadsheet supports the following options: + +| Types | Actions | +|-------|---------| +| **Thin** | Specifies the `1px` border size (default).| +| **Medium** | Specifies the `2px` border size.| +| **Thick** | Specifies the `3px` border size.| +| **Solid** | Used to create the `solid` border (default).| +| **Dashed** | Used to create the `dashed` border.| +| **Dotted** | Used to create the `dotted` border.| +| **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. The [border](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel#border) property is part of [CellStyleModel](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cellstylemodel) and is applied via the cell's `style` object. +- 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 ribbon toolbar. + +The following code sample shows how to apply different typed border, colors and styles in the Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/format/border-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/format/border-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/format/border-cs1" %} + +## Limitations of Formatting + +The following features are not supported in Formatting: + +* Insert row/column between the formatting applied cells. +* Formatting support for row/column. + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +* [Number Formatting](./number-formatting) +* [Conditional Formatting](./conditional-formatting) +* [Cell Range](./cell-range) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/built-in-formulas.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/built-in-formulas.md new file mode 100644 index 0000000000..c9f95f8d61 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/built-in-formulas.md @@ -0,0 +1,138 @@ +--- +layout: post +title: Built-in Formulas and Functions in Angular Spreadsheet | Syncfusion +description: Learn here all about built in formulas and functions in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Built-in Formulas and Functions in Angular Spreadsheet + +The Spreadsheet component supports a comprehensive set of built-in formulas organized by category. Each formula can be used for calculations, data analysis, text manipulation, date operations, and logical evaluations. + +## Math & Trigonometry + +| Formula | Description | +|---------|-------------| +| ABS | Returns the value of a number without its sign. | +| CEILING | Rounds a number up to the nearest multiple of a given factor. | +| DECIMAL | Converts a text representation of a number in a given base into a decimal number. | +| DEGREES | Converts radians to degrees. | +| EVEN | Rounds a positive number up and negative number down to the nearest even integer. | +| EXP | Returns e raised to the power of the given number. | +| FACT | Returns the factorial of a number. | +| FLOOR | Rounds a number down to the nearest multiple of a given factor. | +| INT | Rounds a number down to the nearest integer. | +| LN | Returns the natural logarithm of a number. | +| LOG | Returns the logarithm of a number to the base that you specify. | +| MOD | Returns a remainder after a number is divided by divisor. | +| ODD | Rounds a positive number up and negative number down to the nearest odd integer. | +| PI | Returns the value of pi. | +| POWER | Returns the result of a number raised to power. | +| PRODUCT | Multiplies a series of numbers and/or cells. | +| RADIANS | Converts degrees into radians. | +| RAND | Returns a random number between 0 and 1. | +| RANDBETWEEN | Returns a random integer based on specified values. | +| ROUND | Rounds a number to the specified number of digits. | +| ROUNDDOWN | Rounds a number down, toward zero. | +| ROUNDUP | Rounds a number up, away from zero. | +| SQRT | Returns the square root of a positive number. | +| TRUNC | Truncates a supplied number to a specified number of decimal places. | + + +## Statistical & Aggregate + +| Formula | Description | +|---------|-------------| +| AVERAGE | Calculates average for the series of numbers and/or cells excluding text. | +| AVERAGEA | Calculates the average for the cells evaluating TRUE as 1, text and FALSE as 0. | +| AVERAGEIF | Calculates the average of cells that meet a specified condition. | +| AVERAGEIFS | Calculates average for cells based on multiple specified conditions. | +| COUNT | Counts the cells that contain numeric values in a range. | +| COUNTA | Counts the cells that contain values in a range. | +| COUNTBLANK | Returns the number of empty cells in a specified range of cells. | +| COUNTIF | Counts the cells based on a specified condition. | +| COUNTIFS | Counts the cells based on multiple specified conditions. | +| GEOMEAN | Returns the geometric mean of a given array or range of positive data. | +| INTERCEPT | Calculates the point of the Y-intercept line via linear regression. | +| LARGE | Returns the `k-th` largest value in a given array. | +| MAX | Returns the largest number of the given arguments. | +| MEDIAN | Returns the median of the given set of numbers. | +| MIN | Returns the smallest number of the given arguments. | +| RSQ | Returns the square of the Pearson product moment correlation coefficient based on data points. | +| SLOPE | Returns the slope of the line from linear regression of the data points. | +| SMALL | Returns the `k-th` smallest value in a given array. | +| SUM | Adds a series of numbers and/or cells. | +| SUMIF | Adds the cells based on a specified condition. | +| SUMIFS | Adds the cells based on multiple specified conditions. | +| SUMPRODUCT | Returns the sum of the products of corresponding arrays in given arrays. | +| SUBTOTAL | Returns subtotal for a range using the given function number. | + + +## Date & Time + +| Formula | Description | +|---------|-------------| +| DATE | Returns the date based on given year, month, and day. | +| DATEVALUE | Converts a date string into date value. | +| DAY | Returns the day from the given date. | +| DAYS | Returns the number of days between two dates. | +| EDATE | Returns a date with given number of months before or after the specified date. | +| EOMONTH | Returns the last day of the month that is a specified number of months before or after a start date. | +| HOUR | Returns the number of hours in a specified time string. | +| MINUTE | Returns the number of minutes in a specified time string. | +| MONTH | Returns the number of months in a specified date string. | +| NOW | Returns the current date and time. | +| SECOND | Returns the number of seconds in a specified time string. | +| TIME | Converts hours, minutes, seconds to the time formatted text. | +| TODAY | Returns the current date. | +| WEEKDAY | Returns the day of the week for a specified date. | + +## Logical + +| Formula | Description | +|---------|-------------| +| AND | Returns TRUE if all the arguments are TRUE, otherwise returns FALSE. | +| IF | Returns value based on the given expression. | +| IFERROR | Returns value if no error found; else returns specified value. | +| IFS | Returns value based on multiple given expressions. | +| NOT | Returns the inverse of a given logical expression. | +| OR | Returns TRUE if any of the arguments are TRUE, otherwise returns FALSE. | + + +## Lookup & Reference + +| Formula | Description | +|---------|-------------| +| ADDRESS | Returns a cell reference as text, given specified row and column numbers. | +| CHOOSE | Returns a value from list of values, based on index number. | +| HLOOKUP | Looks for a value in the top row of an array and returns a value in the same column from a specified row. | +| INDEX | Returns a value of the cell in a given range based on row and column number. | +| LOOKUP | Looks for a value in a one-row or one-column range, then returns a value from the same position in another range. | +| MATCH | Returns the relative position of a specified value in a given range. | +| SORT | Sorts the contents of a column, range, or array in ascending or descending order. | +| UNIQUE | Returns unique values from a range or array. | +| VLOOKUP | Looks for a value in the first column of a lookup range and returns a corresponding value from a different column. | + +## Text + +| Formula | Description | +|---------|-------------| +| CHAR | Returns the character from the specified number. | +| CODE | Returns the numeric code for the first character in a given string. | +| CONCAT | Concatenates a list or a range of text strings. | +| CONCATENATE | Combines two or more strings together. | +| DOLLAR | Converts the number to currency formatted text. | +| EXACT | Checks whether two text strings are exactly the same and returns TRUE or FALSE. | +| FIND | Returns the position of a string within another string (case sensitive). | +| LEN | Returns the number of characters in a given string. | +| PROPER | Converts text to proper case (first letter capitalized). | +| T | Checks whether a value is text or not and returns the text. | +| TEXT | Converts the supplied value into text by using the user-specified format. | + +## Information + +| Formula | Description | +|---------|-------------| +| ISNUMBER | Returns true when the value parses as a numeric value; otherwise returns false. | diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/calculation-mode.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/calculation-mode.md new file mode 100644 index 0000000000..04b9e3542c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/calculation-mode.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Calculation Mode in Angular Spreadsheet component | Syncfusion +description: Learn here all about calculation mode in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Calculation Mode in Angular Spreadsheet + +The Spreadsheet provides a **Calculation Mode** feature similar to the calculation options in online Excel. This feature lets you control when and how formulas are recalculated in the spreadsheet. The available modes are: + +* **Automatic**: Formulas recalculate instantly whenever a change is made in dependent cells. +* **Manual**: Formulas recalculate only when explicitly triggered by the user using options like **Calculate Sheet** or **Calculate Workbook**. + +You can configure the calculation mode using the [`calculationMode`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#calculationmode) property of the Spreadsheet. These modes give flexibility to balance real-time updates with performance optimization. + +## Automatic Mode + +In **Automatic Mode**, formulas are recalculated immediately whenever a dependent cell is changed. This mode is ideal for situations where real-time updates are important, ensuring that users always see the latest results without needing extra steps. + +For example, if cell `C1` contains the formula `=A1+B1`, any change in `A1` or `B1` will instantly update the value in `C1`. No manual action is required. + +You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#calculationmode) property to `Automatic`. + +The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/calculation-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/calculation-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/calculation-cs1" %} + +## Manual Mode + +In **Manual Mode**, formulas are not recalculated automatically when cell values change. Instead, recalculation must be triggered explicitly. This mode is useful when performance optimization is important, such as working with large datasets or formulas that require heavy computation. + +For example, if cell `C1` contains the formula `=A1+B1`, changing the values in `A1` or `B1` will not update `C1` automatically. The recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. + +The Spreadsheet provides two manual recalculation options: +* `Calculate Sheet`: Recalculates formulas only in the active sheet. +* `Calculate Workbook`: Recalculates formulas across all sheets in the workbook. + +The following code example demonstrates how to set the Manual calculation mode in a Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/calculation-cs2/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/calculation-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/calculation-cs2" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/create-custom-formulas.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/create-custom-formulas.md new file mode 100644 index 0000000000..260dbf9fed --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/create-custom-formulas.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Custom Function Creation in Angular Spreadsheet | Syncfusion +description: Learn here all about custom functions in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Create User Defined Functions / Custom Functions in Angular Spreadsheet + +The Spreadsheet includes a set of built-in formulas. For convenience, you can find the list of supported formulas [here](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/formulas#supported-formulas). + +You can also define and use formulas that are not supported by default, known as **user defined/custom formulas**, by using the [addCustomFunction](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#addcustomfunction) function. Keep in mind that a user defined/custom formula should return only a single value. If the formula returns an array, updating adjacent cell values will take more time and may affect performance. + +The following code example shows how to use an unsupported formula in the Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/formula-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/formula-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/formula-cs1" %} + +To directly compute a formula or expression, use the [computeExpression](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#computeexpression) method. This method will work for both built-in and used-defined/custom formula. + +The following code example shows how to use `computeExpression` method in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/formula-cs2/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/formula-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/formula-cs2" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/culture-specific-formula-separators.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/culture-specific-formula-separators.md new file mode 100644 index 0000000000..51a417cce7 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/culture-specific-formula-separators.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Culture-Specific Formula Separators in Angular Spreadsheet | Syncfusion +description: Learn here all about culture specific formula separators in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Culture-Specific Formula Separators in Angular Spreadsheet + +In earlier versions, even though culture-based Excel files could be imported into the Spreadsheet component, formulas did not calculate correctly. This happened because culture-based argument separators and support for culture-based formatted numeric values were not available. Starting from version **25.1.35**, you can now import culture-based Excel files into the Spreadsheet component with proper support. + +> Before importing culture-based Excel files, make sure the Spreadsheet component is rendered with the matching culture. Also, start the import/export services with the same culture to ensure compatibility. + +When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#listseparator) property will be updated based on the culture of the launched import/export service. + +In the example below, the Spreadsheet component is rendered with the **German culture[de]**. The example also shows how to set the culture-based argument separator and use culture-based formatted numeric values as arguments in formulas. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/formula-cs3/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/formula-cs3/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/formula-cs3" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/formula-bar.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/formula-bar.md new file mode 100644 index 0000000000..f8164a0e9d --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/formula-bar.md @@ -0,0 +1,12 @@ +--- +layout: post +title: Formula Bar in Angular Spreadsheet component | Syncfusion +description: Learn here all about formula bar in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Formula Bar in Angular Spreadsheet + +The formula bar is used to enter or edit cell data more easily. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#showformulabar) property to enable or disable the formula bar. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/formula-error-handling.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/formula-error-handling.md new file mode 100644 index 0000000000..30921eda1e --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/formula-error-handling.md @@ -0,0 +1,26 @@ +--- +layout: post +title: Formula Error Handling in Angular Spreadsheet component | Syncfusion +description: Learn here all about formula error handling in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Formula Error Handling in Angular Spreadsheet + +If you enter an invalid formula in a cell, an error dialog with an error message will appear. For instance, a formula with the incorrect number of arguments, a formula without parenthesis, etc. + +| Error Message | Reason | +|-------|---------| +| `We found that you typed a formula with an invalid arguments` | Occurs when passing an argument even though it wasn't needed. | +| `We found that you typed a formula with an empty expression` | Occurs when passing an empty expression in the argument. | +| `We found that you typed a formula with one or more missing opening or closing parenthesis` | Occurs when an open parenthesis or a close parenthesis is missing. | +| `We found that you typed a formula which is improper` | Occurs when passing a single reference but a range was needed. | +| `We found that you typed a formula with a wrong number of arguments` | Occurs when the required arguments were not passed. | +| `We found that you typed a formula which requires 3 arguments` | Occurs when the required 3 arguments were not passed. | +| `We found that you typed a formula with a mismatched quotes` | Occurs when passing an argument with mismatched quotes. | +| `We found that you typed a formula with a circular reference` | Occurs when passing a formula with circular cell reference. | +| `We found that you typed a formula which is invalid` | Except in the cases mentioned above, all other errors will fall into this broad category. | + +![Formula Alert Dialog](./images/formula-alert-dialog.png) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/named-ranges.md b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/named-ranges.md new file mode 100644 index 0000000000..8601a5a116 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formula-and-calculation/named-ranges.md @@ -0,0 +1,30 @@ +--- +layout: post +title: Named Ranges in Angular Spreadsheet component | Syncfusion +description: Learn here all about named ranges in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Named Ranges in Angular Spreadsheet + +You can assign a meaningful name to a cell range and then use that name in formulas for calculation. This makes formulas easier to read, understand, and maintain. Named ranges can be added to the Spreadsheet in several ways: + +* Use the [`definedNames`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#definednames) collection to add multiple named ranges during the initial load. +* Use the [`addDefinedName`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#adddefinedname) method to add a named range dynamically at runtime. +* Remove a named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#removedefinedname) method. +* Select a range of cells and enter a name for the selected range directly in the **Name Box**. + +The following code example demonstrates how named ranges can be defined and used in formulas within the Spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/defined-name-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/defined-name-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/defined-name-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formulas-and-calculations.md b/Document-Processing/Excel/Spreadsheet/Angular/formulas-and-calculations.md new file mode 100644 index 0000000000..1e50a38b5d --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/formulas-and-calculations.md @@ -0,0 +1,44 @@ +--- +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. +control: Formulas +platform: document-processing +documentation: ug +--- + +# Formulas in Angular Spreadsheet component + +The Syncfusion Angular Spreadsheet component supports formulas, allowing you to perform calculations on worksheet data. Formulas can reference cells from the same sheet or from different sheets, enabling dynamic and flexible data analysis. + +- **[Formula Property](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/cell#formula)**: Set a formula or expression for a cell at initial load using the `formula` property. +- **Data Binding**: Assign formulas or expressions to cells through data binding. +- **[Editing](./editing)**: Enter or modify a formula directly in a cell using the cell editing. +- **[updateCell Method](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#updatecell)**: Programmatically set or update the formula of a cell using the `updateCell` method. + +## Formula Behavior + +Formulas in the Spreadsheet component are automatically recalculated whenever referenced cell values change. This ensures that your calculations and results always stay up to date as you edit your data. You can use built-in formulas, create custom formulas, and handle formula errors for robust data processing. + +## Formula Features Overview + +The Angular Spreadsheet component provides a variety of features for working with formulas and calculations. Below is a quick overview of each feature, with links to their respective documentation sections: + +- **[Built-in Formulas](./formula-and-calculation/built-in-formulas)**: Use a wide range of standard formulas for common calculations. +- **[Custom Formula Creation](./formula-and-calculation/create-custom-formulas)**: Define your own formulas to meet specific calculation needs. +- **[Named Ranges](./formula-and-calculation/named-ranges)**: Assign names to cell ranges for easier reference in formulas. +- **[Formula Bar](./formula-and-calculation/formula-bar)**: Enter and edit formulas using the formula bar interface. +- **[Formula Error Handling](./formula-and-calculation/formula-error-handling)**: Manage and troubleshoot errors that occur in formulas. +- **[Calculation Modes](./formula-and-calculation/calculation-mode)**: Control when and how formulas are recalculated in the worksheet. +- **[Culture-Specific Formula Separators](./formula-and-calculation/culture-specific-formula-separators)**: Use separators that match your locale for formulas. + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. + +## See Also + +* [Editing](./cell-ranges-and-operations/editing) +* [Formatting](./formatting) +* [Open](./open-save#open) +* [Save](./open-save#save) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/formulas.md b/Document-Processing/Excel/Spreadsheet/Angular/formulas.md deleted file mode 100644 index 7e2d1fb6ef..0000000000 --- a/Document-Processing/Excel/Spreadsheet/Angular/formulas.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -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 -documentation: ug ---- - -# Formulas in Angular Spreadsheet component - -Formulas are used for calculating the data in a worksheet. You can refer the cell reference from same sheet or from different sheets. - -## Usage - -You can set formula for a cell in the following ways, - -* Using the `formula` property from `cell`, you can set the formula or expression to each cell at initial load. -* Set the formula or expression through data binding. -* You can set formula for a cell by [`editing`](./editing). -* Using the [`updateCell`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#updatecell) method, you can set or update the cell formula. - -## Culture-Based Argument Separator - -Previously, although you could import culture-based Excel files into the Spreadsheet component, the formulas wouldn't calculate correctly. This was due to the absence of culture-based argument separators and support for culture-based formatted numeric values as arguments. However, starting from version 25.1.35, you can now import culture-based Excel files into the Spreadsheet component. - -> Before importing culture-based Excel files, ensure that the Spreadsheet component is rendered with the corresponding culture. Additionally, launch the import/export services with the same culture to ensure compatibility. - -When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#listseparator) property will be updated based on the culture of the launched import/export service. - -In the example below, the Spreadsheet component is rendered with the `German culture (de)`. Additionally, you can find references on how to set the culture-based argument separator and culture-based formatted numeric value as arguments to the formulas. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/formula-cs3/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/formula-cs3/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/formula-cs3" %} - -## Create User Defined Functions / Custom Functions - -The Spreadsheet includes a number of built-in formulas. For your convenience, a list of supported formulas can be found [here](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/formulas#supported-formulas). - -You can define and use an unsupported formula, i.e. a user defined/custom formula, in the spreadsheet by using the [addCustomFunction](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addcustomfunction) function. Meanwhile, remember that you should define a user defined/custom formula whose results should only return a single value. If a user-defined/custom formula returns an array, it will be time-consuming to update adjacent cell values. - -The following code example shows an unsupported formula in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/formula-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/formula-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% 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. - -The following code example shows how to use `computeExpression` method in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/formula-cs2/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/formula-cs2/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/formula-cs2" %} - -## Formula bar - -Formula bar is used to edit or enter cell data in much easier way. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#showformulabar) property to enable or disable the formula bar. - -## 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, - -* 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. -* You can remove an added named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#removedefinedname) method. -* Select the range of cells, and then enter the name for the selected range in the name box. - -The following code example shows the usage of named ranges support. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/defined-name-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/defined-name-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/defined-name-cs1" %} - -## Calculation Mode - -The Spreadsheet provides a `Calculation Mode` feature like the calculation options in online Excel. This feature allows you to control when and how formulas are recalculated in the spreadsheet. The available modes are: - -* `Automatic`: Formulas are recalculated instantly whenever a change occurs in the dependent cells. -* `Manual`: Formulas are recalculated only when triggered explicitly by the user using options like `Calculate Sheet` or `Calculate Workbook`. - -You can configure the calculate mode using the [`calculationMode`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#calculationmode) property of the Spreadsheet. These modes offer flexibility to balance real-time updates and performance optimization. - -### Automatic Mode - -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`. - -The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/calculation-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/calculation-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/calculation-cs1" %} - -### Manual Mode - -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: - -* `Calculate Sheet`: Recalculates formulas for the active sheet only. -* `Calculate Workbook`: Recalculates formulas across all sheets in the workbook. - -The following code example demonstrates how to set the Manual calculation mode in a Spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/calculation-cs2/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/calculation-cs2/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/calculation-cs2" %} - -## 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). - -## Formula Error Dialog - -If you enter an invalid formula in a cell, an error dialog with an error message will appear. For instance, a formula with the incorrect number of arguments, a formula without parenthesis, etc. - -| Error Message | Reason | -|-------|---------| -| We found that you typed a formula with an invalid arguments | Occurs when passing an argument even though it wasn't needed. | -| We found that you typed a formula with an empty expression | Occurs when passing an empty expression in the argument. | -| We found that you typed a formula with one or more missing opening or closing parenthesis | Occurs when an open parenthesis or a close parenthesis is missing. | -| We found that you typed a formula which is improper | Occurs when passing a single reference but a range was needed. | -| We found that you typed a formula with a wrong number of arguments | Occurs when the required arguments were not passed. | -| We found that you typed a formula which requires 3 arguments | Occurs when the required 3 arguments were not passed. | -| We found that you typed a formula with a mismatched quotes | Occurs when passing an argument with mismatched quotes. | -| We found that you typed a formula with a circular reference | Occurs when passing a formula with circular cell reference. | -| We found that you typed a formula which is invalid | Except in the cases mentioned above, all other errors will fall into this broad category. | - -![Formula Alert Dialog](./images/formula-alert-dialog.png) - -## Note - -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. - -## See Also - -* [Editing](./editing) -* [Formatting](./formatting) -* [Open](./open-save#open) -* [Save](./open-save#save) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/global-local.md b/Document-Processing/Excel/Spreadsheet/Angular/global-local.md index dac37ff775..e0d1270ad5 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/global-local.md @@ -392,6 +392,401 @@ The following example demonstrates the Spreadsheet in `French` culture. In the b {% previewsample "/document-processing/samples/spreadsheet/angular/local-data-binding-cs2" %} +--- +layout: post +title: Global local in Angular Spreadsheet component | Syncfusion +description: Learn here all about Global local in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Global local +platform: document-processing +documentation: ug +--- + +# Global local in Angular Spreadsheet component + +## 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 Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the +[`locale`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#locale) value and translation object. + +The following list of properties and their values are used in the Spreadsheet. + +Locale keywords |Text +-----|----- +`Cut` | Cut +`Copy` | Copy +`Paste` | Paste +`PasteSpecial` | Paste Special +`All` | All +`Values` | Values +`Formats` | Formats +`Font` | Font +`FontSize` | Font Size +`Bold` | Bold +`Italic` | Italic +`Underline` | Underline +`Strikethrough` | Strikethrough +`TextColor` | Text Color +`FillColor` | Fill Color +`HorizontalAlignment` | Horizontal Alignment +`AlignLeft` | Align Left +`AlignCenter` | Center +`AlignRight` | Align Right +`VerticalAlignment` | Vertical Alignment +`AlignTop` | Align Top +`AlignMiddle` | Align Middle +`AlignBottom` | Align Bottom +`InsertFunction` | Insert Function +`Insert` | Insert +`Delete` | Delete +`Rename` | Rename +`Hide` | Hide +`Unhide` | Unhide +`NameBox` | Name Box +`ShowHeaders` | Show Headers +`HideHeaders` | Hide Headers +`ShowGridLines` | Show Gridlines +`HideGridLines` | Hide Gridlines +`AddSheet` | Add Sheet +`ListAllSheets` | List All Sheets +`FullScreen` | Full Screen +`CollapseToolbar` | Collapse Toolbar +`ExpandToolbar` | Expand Toolbar +`CollapseFormulaBar` | Collapse Formula Bar +`ExpandFormulaBar` | Expand Formula Bar +`File` | File +`Home` | Home +`Formulas` | Formulas +`View` | View +`New` | New +`Open` | Open +`SaveAs` | Save As +`ExcelXlsx` | Microsoft Excel +`ExcelXls` | Microsoft Excel 97-2003 +`CSV` | Comma-separated values +`FormulaBar` | Formula Bar +`Ok` | Ok +`Close` | Close +`Cancel` | Cancel +`Apply` | Apply +`MoreColors` | More Colors +`StandardColors` | Standard Colors +`General` | General +`Number` | Number +`Currency` | Currency +`Accounting` | Accounting +`ShortDate` | Short Date +`LongDate` | Long Date +`Time` | Time +`Percentage` | Percentage +`Fraction` | Fraction +`Scientific` | Scientific +`Text` | Text +`NumberFormat` | Number Format +`MobileFormulaBarPlaceHolder` | Enter value or Formula +`PasteAlert` | You can't paste it here because the copy area and paste area aren't in the same size. Please try pasting in a different range. +`DestroyAlert` | Are you sure you want to destroy the current workbook without saving and create a new workbook? +`SheetRenameInvalidAlert` | Sheet name contains invalid character. +`SheetRenameEmptyAlert` | Sheet name cannot be empty. +`SheetRenameAlreadyExistsAlert` | Sheet name already exists. Please enter another name. +`DeleteSheetAlert` | Are you sure you want to delete this sheet? +`DeleteSingleLastSheetAlert` | A Workbook must contain at least one visible worksheet. +`PickACategory` | Pick a category +`Description` | Description +`UnsupportedFile` | Unsupported File +`InvalidUrl` | Invalid Url +`SUM` | Adds a series of numbers and/or cells. +`SUMIF` | Adds the cells based on the specified condition. +`SUMIFS` | Adds the cells based on the specified conditions. +`ABS` | Returns the value of a number without its sign. +`RAND` | Returns a random number between 0 and 1. +`RANDBETWEEN` | Returns a random integer based on the specified values. +`FLOOR` | Rounds a number down to the nearest multiple of a given factor. +`CEILING` | Rounds a number up to the nearest multiple of a given factor. +`PRODUCT` | Multiplies a series of numbers and/or cells. +`AVERAGE` | Calculates average for the series of numbers and/or cells excluding text. +`AVERAGEIF` | Calculates average for the cells based on the specified criterion. +`AVERAGEIFS` | Calculates average for the cells based on the specified conditions. +`AVERAGEA` | Calculates the average for the cells evaluating TRUE as 1 text and FALSE as 0. +`COUNT` | Counts the cells that contain numeric values in a range. +`COUNTIF` | Counts the cells based on the specified condition. +`COUNTIFS` | Counts the cells based on specified conditions. +`COUNTA` | Counts the cells that contain values in a range. +`MIN` | Returns the smallest number of the given arguments. +`MAX` | Returns the largest number of the given arguments. +`DATE` | Returns the date based on the given year, month, and day. +`DAY` | Returns the day from the given date. +`DAYS` | Returns the number of days between two dates. +`IF` | Returns value based on the given expression. +`IFS` | Returns value based on the given multiple expressions. +`AND` | Returns TRUE if all the arguments are TRUE otherwise returns FALSE. +`OR` | Returns TRUE if any of the arguments are TRUE otherwise returns FALSE. +`IFERROR` | Returns value if no error found else it will return specified value. +`CHOOSE` | Returns a value from the list of values based on the index number. +`INDEX` | Returns the value of the cell in a given range based on row and column number. +`FIND` | Returns the position of a string within another string which is case sensitive. +`CONCATENATE` | Combines two or more strings together. +`CONCAT` | Concatenates a list or a range of text strings. +`SUBTOTAL` | Returns subtotal for a range using the given function number. +`RADIANS` | Converts degrees into radians. +`MATCH` | Returns the relative position of a specified value in the given range. +`DefineNameExists` | This name already exists try a different name. +`CircularReference` | When a formula refers to one or more circular references this may result in an incorrect calculation. +`ShowRowsWhere` | Show rows where | +`CustomFilterDatePlaceHolder` | Choose a date +`CustomFilterPlaceHolder` | Enter the value +`CustomFilter` | Custom Filter +`Between` | Between +`MatchCase` | Match Case +`DateTimeFilter` | DateTime Filters +`Undo` | Undo +`Redo` | Redo +`DateFilter` | Date Filters +`TextFilter` | Text Filters +`NumberFilter` | Number Filters +`ClearFilter` | Clear Filter +`NoResult` | No Matches Found +`FilterFalse` | False +`FilterTrue` | True +`Blanks` | Blanks +`SelectAll` | Select All +`GreaterThanOrEqual` | Greater Than Or Equal +`GreaterThan` | Greater Than +`LessThanOrEqual` | Less Than Or Equal +`LessThan` | Less Than +`NotEqual` | Not Equal +`Equal` | Equal +`Contains` | Contains +`EndsWith` | Ends With +`StartsWith` | Starts With +`ClearButton` | Clear +`FilterButton` | Filter +`CancelButton` | Cancel +`OKButton` | OK +`Search` | Search +`Link` | Link +`Hyperlink` | Hyperlink +`EditHyperlink` | Edit Hyperlink +`OpenHyperlink` | Open Hyperlink +`RemoveHyperlink` | Remove Hyperlink +`InsertLink` | Insert Link +`EditLink` | Edit Link +`WebPage` | WEB PAGE +`ThisDocument` | THIS DOCUMENT +`DisplayText` | Display Text +`Url` | URL +`CellReference` | Cell Reference +`Sheet` | Sheet +`DefinedNames` | Defined Names +`EnterTheTextToDisplay` | Enter the text to display +`EnterTheUrl` | Enter the URL +`ProtectSheet` | Protect Sheet +`UnprotectSheet` | Unprotect Sheet +`SelectCells` | Select cells +`FormatCells` | Format cells +`FormatRows` | Format rows +`Format` Columns | Format columns +`InsertLinks` | Insert links +`ProtectContent` | Protect the contents of locked cells +`ProtectAllowUser` | Allow all users of this worksheet to | +`EditAlert` | The cell you're trying to change is protected. To make a change, unprotect the sheet. +`FindReplaceTooltip` | Find & Replace +`InsertingEmptyValue` | Reference value is not valid. +`ByRow` | By Row +`ByColumn` | By Column +`MatchExactCellElements` | Match Exact Cell Contents +`EntercellAddress` | Enter Cell Address +`FindAndReplace` | Find and Replace +`ReplaceAllEnd` | matches replaced with. +`FindNextBtn` | Find Next +`FindPreviousBtn` | Find Previous +`ReplaceBtn` | Replace +`ReplaceAllBtn` | Replace All +`GotoHeader` | Go To +`GotoSpecialHeader` | Go To Special +`SearchWithin` | Search within +`SearchBy` | Search by +`Reference` | Reference +`Workbook` | Workbook +`NoElements` | We couldn’t find what you were looking for. +`FindWhat` | Find what +`ReplaceWith` | Replace with +`EnterValue` | Enter Value +`DefineNameInValid` | The name that you entered is not valid. +`FindValue` | Find Value +`ReplaceValue` | Replace Value +`DataValidation` | Data Validation +`CLEARALL` | CLEAR ALL +`APPLY` | APPLY +`CellRange` | Cell Range +`Allow` | Allow +`Data` | Data +`Minimum` | Minimum +`Maximum` | Maximum +`IgnoreBlank` | Ignore blank +`WholeNumber` | Whole Number +`Decimal` | Decimal +`Date` | Date +`TextLength` | Text Length +`List` | List +`NotBetween` | Not between +`EqualTo` | Equal to +`NotEqualTo` | Not equal to +`Greaterthan` | Greater than +`Lessthan` | Less than +`GreaterThanOrEqaulTo` | Greater than or eqaul to +`LessThanOrEqualTo` | Less than or equal to +`InCellDropDown` | In-cell-dropdown +`Sources` | Sources +`Value` | Value +`Retry` | Retry +`DialogError` | The list source must be a reference to a single row or column. +`ValidationError` | This value doesn't match the data validation restrictions defined for the cell. +`HideRow` | Hide Row +`HideRows` | Hide Rows +`UnHideRows` | UnHide Rows +`HideColumn` | Hide Column +`HideColumns` | Hide Columns +`UnHideColumns` | UnHide Columns +`InsertRow` | Insert Row +`InsertRows` | Insert Rows +`InsertColumn` | Insert Column +`InsertColumns` | Insert Columns +`DeleteRow` | Delete Row +`DeleteRows` | Delete Rows +`DeleteColumn` | Delete Column +`DeleteColumns` | Delete Columns +`Borders` | Borders +`TopBorders` | Top Borders +`LeftBorders` | Left Borders +`RightBorders` | Right Borders +`BottomBorders` | Bottom Borders +`AllBorders` | All Borders +`HorizontalBorders` | Horizontal Borders +`VerticalBorders` | Vertical Borders +`OutsideBorders` | Outside Borders +`InsideBorders` | Inside Borders +`NoBorders` | No Borders +`BorderColor` | Border Color +`BorderStyle` | Border Style +`INTERCEPT` | Calculates the point of the Y-intercept line via linear regression. +`SLOPE` | Returns the slope of the line from linear regression of the data points. +`FreezePanes` | Freeze Panes +`FreezeRows` | Freeze Rows +`FreezeColumns` | Freeze Columns +`UnfreezePanes` | Unfreeze Panes +`UnfreezeRows` | Unfreeze Rows +`UnfreezeColumns` | Unfreeze Columns +`MergeCells` | Merge Cells +`MergeAll` | Merge All +`MergeHorizontally` | Merge Horizontally +`MergeVertically` | Merge Vertically +`Unmerge` | Unmerge +`UnmergeCells` | Unmerge Cells +`SortAscending` | Ascending +`SortDescending` | Descending +`CustomSort` | Custom Sort +`ClearAllFilter` | Clear +`ReapplyFilter` | Reapply +`Clear` | Clear +`ClearContents` | Clear Contents +`ClearAll` | Clear All +`ClearFormats` | Clear Formats +`ClearHyperlinks` | Clear Hyperlinks +`Image` | Image +`AddColumn` | Add Column +`SortBy` | Sort by +`ThenBy` | Then by +`Chart` | Chart +`Column` | Column +`Bar` | Bar +`Area` | Area +`Pie` | Pie +`Doughnut` | Doughnut +`PieAndDoughnut` | Pie/Doughnut +`Line` | Line +`Radar` | Radar +`Scatter` | Scatter +`ChartDesign` | Chart Design +`ClusteredColumn` | Clustered Column +`StackedColumn` | Stacked Column +`StackedColumn100` | 100% Stacked Column +`ClusteredBar` | Clustered Bar +`StackedBar` | Stacked Bar +`StackedBar100` | 100% Stacked Bar +`StackedArea` | Stacked Area +`StackedArea100` | 100% Stacked Area +`StackedLine` | Stacked Line +`StackedLine100` | 100% Stacked Line +`AddChartElement` | Add Chart Element +`Axes` | Axes +`AxisTitle` | Axis Title +`ChartTitle` | Chart Title +`DataLabels` | Data Labels +`Gridlines` | Gridlines +`Legends` | Legends +`PrimaryHorizontal` | Primary Horizontal +`PrimaryVertical` | Primary Vertical +`None` | None +`AboveChart` | Above Chart +`Center` | Center +`InsideEnd` | Inside End +`InsideBase` | Inside Base +`OutsideEnd` | OutSide End +`PrimaryMajorHorizontal` | Primary Major Horizontal +`PrimaryMajorVertical` | Primary Major Vertical +`PrimaryMinorHorizontal` | Primary Minor Horizontal +`PrimaryMinorVertical` | Primary Minor Vertical +`Right` | Right +`Left` | Left +`Bottom` | Bottom +`Top` | Top +`SwitchRowColumn` | Switch Row/Column +`ChartTheme` | Chart Theme +`ChartType` | Chart Type +`Material` | Material +`Fabric` | Fabric +`Bootstrap` | Bootstrap +`HighContrastLight` | HighContrastLight +`MaterialDark` | MaterialDark +`FabricDark` | FabricDark +`HighContrast` | HighContrast +`BootstrapDark` | BootstrapDark +`Bootstrap4` | Bootstrap4 +`VerticalAxisTitle` | Vertical Axis Title +`HorizontalAxisTitle` | Horizontal Axis Title +`EnterTitle` | Enter Title +`ProtectWorkbook` | Protect Workbook +`Password` | Password (optional) | +`unProtectPassword` | Password +`EnterThePassword` | Enter the password +`ConfirmPassword` | Confirm Password +`EnterTheConfirmPassword` | Re-enter your password +`PasswordAlert` | Confirmation password is not identical +`UnProtectWorkbook` | Unprotect Workbook +`UnProtectPasswordAlert` | The password you supplied is not correct. +`InCorrectPassword` | Unable to open the file or worksheet with the given password. +`PasswordAlertMsg` | Please enter the password +`ConfirmPasswordAlertMsg` | Please enter the confirm password +`IsProtected` | is protected + +### Loading translations + +To load translation object in an application, use [`load`](https://helpej2.syncfusion.com/angular/documentation/common/globalization/internationalization#loading-culture-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). + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/local-data-binding-cs2/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/local-data-binding-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/local-data-binding-cs2" %} + ## Internationalization The Internationalization library is used to globalize number, date, and time values in the spreadsheet component. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md new file mode 100644 index 0000000000..30b31da3b0 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Overview Section for How‑to Guides in React Spreadsheet | Syncfusion +description: In this section, you can find answers to frequently asked questions and solutions for common scenarios in the Spreadsheet control. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# React Spreadsheet – How-to Guides Overview + +Explore practical solutions and tips for working with the Syncfusion React Spreadsheet component. The guides below cover a variety of common scenarios, helping you implement, customize, and get the most out of your spreadsheet features. + +## How-to Articles + +- [How to add custom icons to cells?](./how-to/add-cell-icon) +- [How to create dynamic cell templates with dropdowns?](./how-to/add-dynamic-cell-template) +- [How to change the active sheet while importing a file?](./how-to/change-active-sheet) +- [How to create a JSON object structure for the Spreadsheet?](./how-to/create-a-object-structure) +- [How to customize the Spreadsheet to look like a grid?](./how-to/customize-spreadsheet-like-grid) +- [How to find and replace in a selected range?](./how-to/find-replace-in-range) +- [How to get filtered row data?](./how-to/get-filtered-data) +- [How to identify which context menu was opened?](./how-to/identify-the-context-menu-opened) +- [How to paste only values without formatting?](./how-to/paste-only-values-without-formatting) +- [How to prevent actions without read-only or sheet protection?](./how-to/prevent-actions) + +## See Also + +- [Getting Started with React Spreadsheet](./getting-started) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/add-cell-icon.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/add-cell-icon.md new file mode 100644 index 0000000000..1e25c0b5ca --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/add-cell-icon.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Add icons inside cells in Angular Spreadsheet component | Syncfusion +description: Learn here all about adding icon inside cells using a custom template in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Add Custom Icons to Cells in Angular Spreadsheet + +In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property. + +The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/add-dynamic-cell-template.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/add-dynamic-cell-template.md new file mode 100644 index 0000000000..b5b440dc27 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/add-dynamic-cell-template.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Dynamic cell template in Angular Spreadsheet component | Syncfusion +description: Render dropdown templates inside cells in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Create Dynamic Cell Templates with Dropdowns in Angular Spreadsheet + +You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell. + +The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/customize-spreadsheet-like-grid.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/customize-spreadsheet-like-grid.md new file mode 100644 index 0000000000..5a6ea56268 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/customize-spreadsheet-like-grid.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Customize Spreadsheet like a Grid in Angular Spreadsheet | Syncfusion +description: Customize the Angular Spreadsheet to look and behave like a data grid by hiding UI elements and adding checkboxes for grid-like selection. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Customize the Spreadsheet like a Grid in Angular Spreadsheet + +The Angular Spreadsheet component provides extensive customization options to make it behave and appear like a traditional data grid. This guide explains how to configure the Spreadsheet to mimic grid including hiding unnecessary UI elements and rendering checkboxes for a grid-like experience. + +## Steps to Customize Spreadsheet as a Grid + +**Step 1: Hide Unnecessary UI Elements** + +To make the Spreadsheet look and behave like a simple data grid, you can hide default UI elements such as the **ribbon**, **formula bar**, **sheet tabs**, and **row and column headers**. Assigning `false` to the following properties will hide the respective elements: + +- [`showRibbon`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#showribbon): Hides the ribbon toolbar. +- [`showFormulaBar`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#showformulabar): Hides the formula bar. +- [`showSheetTabs`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#showsheettabs): Hides the sheet tabs. +- [`showHeaders`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/sheetmodel#showheaders): Hides the row and column headers in the sheet. + +**Example:** + +```js + + + + + + +``` +**Step 2: Render Checkboxes Like a Grid** + +Checkboxes can be rendered within cells of the first column using the [`beforeCellRender`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event, so that selection behaves like grid selection, allowing row selection based on the checkbox selection state. Additionally, you can bind custom functions to the checkbox click event as needed. + +The following code example demonstrates how to customize the Spreadsheet to behave like a grid: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1" %} + +## See Also + +* [Syncfusion Angular Grid Component](https://ej2.syncfusion.com/angular/documentation/grid/getting-started) +* [Syncfusion Angular Checkbox Component](https://ej2.syncfusion.com/angular/documentation/check-box/getting-started) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/find-replace-in-range.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/find-replace-in-range.md new file mode 100644 index 0000000000..7466770b8b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/find-replace-in-range.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Find and replace in range in Angular Spreadsheet component | Syncfusion +description: Learn here all about performing find and replace limited to the range in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Find and replace the text within the selected range of cells + +In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`. + +The following sample demonstrates how to limit the "Replace All" operation to the currently selected range. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/find-and-replace-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/find-and-replace-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/find-and-replace-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/get-filtered-data.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/get-filtered-data.md new file mode 100644 index 0000000000..cddca33308 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/get-filtered-data.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Retrieve filtered row data in Angular Spreadsheet component | Syncfusion +description: Learn here all about getting filtered row data in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Get filtered row data in Angular Spreadsheet + +Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowfiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering. + +The following example shows how to get the filtered rows from the Spreadsheet: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/filter-cs2/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/filter-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/filter-cs2" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/paste-only-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/paste-only-values-without-formatting.md new file mode 100644 index 0000000000..9d0a38259e --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/paste-only-values-without-formatting.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Paste Without Formatting in Angular Spreadsheet component | Syncfusion +description: Learn here about Paste only values without formatting during copy and paste in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Paste Values Without Formatting and styles in Angular Spreadsheet + +In the Syncfusion Angular Spreadsheet, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the [actionBegin](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet. + +The following example shows how to paste values without formatting. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/paste-values-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/paste-values-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/paste-values-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/prevent-actions.md new file mode 100644 index 0000000000..3489821c5e --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/prevent-actions.md @@ -0,0 +1,67 @@ +--- +layout: post +title: Prevent actions without read-only and sheet protection | Syncfusion +description: Learn here all about to prevent actions without read-only and sheet protection in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Prevent actions without read-only and protection in Angular Spreadsheet + +In Syncfusion Angular Spreadsheet, the [**read-only**](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/protect-sheet#make-cells-read-only-without-protecting-worksheet) feature makes a range of cells, rows, or columns completely non-editable and restricts all spreadsheet actions on those cells. Similarly, the [**sheet protection**](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/protect-sheet#protect-sheet) feature locks the entire sheet and restricts all spreadsheet actions on the sheet. It does not allow actions such as formatting cells, rows, or columns, selecting cells, or inserting hyperlinks—unless these options are explicitly enabled in the [`protectSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/protectsettingsmodel). + +If your requirement is to prevent actions (such as cut, paste, autofill, formatting, and validation) without locking the entire sheet using the [`protectSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#protectsheet) method or making the cells read-only via the [`setRangeReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#setrangereadonly) method, you can achieve this through event-based customization. This approach allows you to restrict specific actions on selected cells while keeping the rest of the sheet fully interactive. + +**Events to Use** +To achieve this requirement, the following events can be used: + +* [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#celledit) → To prevent editing for specific cells. +* [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin)→ To prevent spreadsheet actions such as cut, paste, autofill, formatting, etc. + +## Prevent editing for specific cells + +To prevent editing for specific cells, use the [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#celledit) event, which triggers whenever a cell enters edit mode. By checking the column index and setting `args.cancel = true`, you can prevent editing for those columns. This ensures that users cannot modify the cell content in those columns. + +```ts +// Triggers when cell editing starts in the spreadsheet. + cellEdit(args: any){ + const addressRange: number[] = getCellIndexes(args.address.split('!')[1]); + // preventing cellEditing from the readOnly columns + if (this.readOnlyColumns.includes(addressRange[1])) { + args.cancel = true; + } + } + + +``` + +## Prevent specific spreadsheet actions + +To prevent specific action after preventing the cell editing, you need to use the [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: + +* Fetch the target address based on the type of action being performed using `args.action` property. +* Verify if the target range includes the restricted columns. +* If the column is in the restricted list, cancel the action by setting `cancel` property to `true`. + +This approach ensures that spreadsheet actions such as cut, paste, autofill, formatting, validation, and conditional formatting are prevented for specific cells without protecting the sheet or making the cells read-only. + +> **Note:** In this example, column indexes are used to restrict actions. You can also apply the same restrictions using row indexes or specific cell addresses. This is a purely component-level customization and, unlike sheet protection, it will not be preserved in the exported file. + +The following example demonstrates how to prevent actions such as cut, paste, autofill, formatting, validation, and conditional formatting for specific cells(in the first and third columns) in the spreadsheet without protecting the sheet or making the cells read-only. You can also restrict additional actions by following the same approach. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/prevent-actions-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/prevent-actions-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/prevent-actions-cs1" %} + +## See Also + +* [Protection](../protect-sheet) +* [Events](../events) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md b/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md deleted file mode 100644 index 6cb474dd6c..0000000000 --- a/Document-Processing/Excel/Spreadsheet/Angular/illustrations.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -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. -platform: document-processing -control: Illustrations -documentation: ug ---- - -# Illustrations in Angular Spreadsheet component - -Illustrations help you to insert an image, shapes, and graphic objects in the Essential® JS 2 spreadsheet. - -## Image - -Adding images to a spreadsheet can enhance the visual appeal and help to convey information more clearly. - ->* The default value for the `allowImage` property is `true`. - -### Insert Image - -You can insert the image by using 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, - -| Parameter | Type | Description | -|-----|------|----| -| images | `ImageModel` | Specifies the options to insert image in spreadsheet. | -| range(optional) | `string` | Specifies the range in spreadsheet. | - -The available arguments in `ImageModel` are: - -* src: Specifies the image source. -* id: Specifies the image element id. -* height: Specifies the height of the image. -* width: Specifies the width of the image. -* top: Specifies the top position of the image. -* left: Specifies the left side of the image. - ->* In a spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF, and JPEG files. - -### Delete Image - -* 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, - -| Parameter | Type | Description | -|-----|------|----| -| id | `string` | Specifies the id of the image element to be deleted. | -| range(optional) | `string` | Specifies the range in spreadsheet. | - -### Image Customization - -Image feature allows you to view and insert an image in a spreadsheet, and you can change the height and width of the image by resizing and moving it to another position. - -#### Height and Width - -* You can change the height and width of the image by resizing. -* Use the `height` and `width` property in the `insertImage()` method programmatically. - -#### Top and Left - -* You can change the position of the image by drag and drop. -* Use the `top` and `left` property in the `insertImage()` method programmatically. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/image-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/image-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/image-cs1" %} - -### Limitations of Image - -The following features have some limitations in Image: - -* Corner resizing option in the image element. -* Copy and paste the external image. - -## Chart - -A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of `x`-axis and `y`-axis. You can use the [`allowChart`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowchart) property to enable or disable the chart functionality. - ->* The default value for the [`allowChart`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowchart) property is `true`. - -### Types of chart - -The following types of charts are available in the Spreadsheet. - ->* Column Chart ->* Bar Chart ->* Area Chart ->* Line Chart ->* Pie Chart ->* Scatter Chart - -### Insert Chart - -You can insert the chart by using 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, - -| Parameter | Type | Description | -|-----|------|----| -| chart | `ChartModel` | Specifies the options to insert a chart in the spreadsheet. | - -The available arguments in the `ChartModel` are: - -* type: Specifies the type of chart. -* theme: Specifies the theme of a chart. -* isSeriesInRows: Specifies to switch the row or a column. -* range: Specifies the selected range or specified range. -* id: Specifies the chart element id. -* markerSettings: Specifies the marker settings. The marker is used to provide information about the data points in the series and is currently only applicable to the line chart. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/chart-cs2/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/chart-cs2/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/chart-cs2" %} - -### Delete Chart - -* If you want to delete the chart, just select the chart, and then press the Delete key. -* Use the [`deleteChart()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#deletechart) method programmatically. - -The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#deletechart) method is, - -| Parameter | Type | Description | -|-----|------|----| -| id | `string` | Specifies the id of the chart element to be deleted. | - -### Chart Customization - -Chart feature allows you to view and insert a chart in a spreadsheet, and you can change the height and width of the chart by resizing and moving it to another position. - -* You can change the height and width of the chart by resizing. - -* You can change the position of the chart by drag and drop. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/chart-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/chart-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/chart-cs1" %} - -#### 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. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/chart-cs3/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/chart-cs3/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/chart-cs3" %} - -### Limitations of Chart - -The following features have some limitations in the Chart: - -* Insert row/delete row between the chart data source will not reflect the chart. -* Copy/paste into the chart data source will not reflect the chart. -* Corner resizing option in chart element. - -## Note - -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. - -## See Also - -* [Formatting](./formatting) -* [Rows and columns](./rows-and-columns) -* [Hyperlink](./link) -* [Sorting](./sort) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/delete-images.md b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/delete-images.md new file mode 100644 index 0000000000..fab47d2071 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/delete-images.md @@ -0,0 +1,45 @@ +--- +layout: post +title: Delete Images in Angular Spreadsheet component | Syncfusion +description: Learn here how to delete images in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Images +platform: document-processing +documentation: ug +--- + +# Delete images in Angular Spreadsheet + +Images added to a worksheet can be removed either through user interaction or programmatically. + +**Delete via UI:** + +To remove an image from the worksheet: + +1. **Click the image** to select it +2. **Press Delete** or **Backspace** to remove it immediately + +**Alternative UI method:** + +- **Select the image** and choose **Clear All** or **Clear Contents** from the ribbon to clear the selection and all embedded objects including the image + +**Delete programmatically:** + +The Spreadsheet component provides the [deleteImage](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#deleteimage) method. This method removes an image based on its unique identifier and the cell address where it is placed. + +Pass the image ID to remove a specific image. This approach is useful when you track image IDs at insertion time and want to remove them later without relying on user selection. + +Calling `deleteImage()` removes the image from the runtime model and the DOM overlay. + +The following code example shows how to delete an image by ID in spreadsheet: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/delete-image-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/delete-image-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/delete-image-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/image-customization.md b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/image-customization.md new file mode 100644 index 0000000000..9dd9d36014 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/image-customization.md @@ -0,0 +1,22 @@ +--- +layout: post +title: Image Customization in Angular Spreadsheet component | Syncfusion +description: Learn here how to customize images in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Images +platform: document-processing +documentation: ug +--- + +# Image Customization in Angular Spreadsheet + +Image feature allows you to view and insert an image in a spreadsheet, and you can change the height and width of the image by resizing and moving it to another position. + +## Height and Width + +* You can change the height and width of the image by resizing. +* Use the `height` and `width` property in the `insertImage()` method programmatically. + +## Top and Left + +* You can change the position of the image by drag and drop. +* Use the `top` and `left` property in the `insertImage()` method programmatically. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/insert-and-position-images.md b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/insert-and-position-images.md new file mode 100644 index 0000000000..61630b5ef6 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/insert-and-position-images.md @@ -0,0 +1,30 @@ +--- +layout: post +title: Insert and Position images in Angular Spreadsheet component | Syncfusion +description: Learn here how to customize images in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Images +platform: document-processing +documentation: ug +--- + +# Insert and Position images in Angular Spreadsheet + +In the Syncfusion Angular Spreadsheet component, images can be inserted into a worksheet and placed in a specific cell. The target cell determines where the image initially appears, and the image is rendered as an overlay on top of the grid. + +Images are inserted programmatically using the [insertImage](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertimage) method. This method allows you to define the image source along with its initial width and height, and specify the cell address where the image should be placed. + +Once an image is inserted, it can be repositioned by selecting and dragging it to another location within the worksheet. The image remains independent of cell values and does not interfere with data editing, sorting, or filtering operations. You can also insert multiple images at once by passing multiple image configurations to the method. + +The following code example shows how to insert an image in spreadsheet: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert-image-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert-image-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert-image-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/resize-images.md b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/resize-images.md new file mode 100644 index 0000000000..d83e7a6b17 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/resize-images.md @@ -0,0 +1,18 @@ +--- +layout: post +title: Resize Images in Angular Spreadsheet component | Syncfusion +description: Learn here how to resize images in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Images +platform: document-processing +documentation: ug +--- + +# Resize images in Angular Spreadsheet + +After inserting an image into the spreadsheet, you can resize it to fit the layout or align it with surrounding content. + +**Resize via UI:** + +1. **Click the image** to select it (selection handles appear around it). +2. **Drag a middle edge handle** to resize horizontally or vertically. Click the image itself to move. +3. **Release** to apply the new size or position. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/select-and-deselect-images.md b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/select-and-deselect-images.md new file mode 100644 index 0000000000..0809b934f1 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/image-and-illustration/select-and-deselect-images.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Select and Deselect Iamges in Angular Spreadsheet component | Syncfusion +description: Learn here how to select and deselect images in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Images +platform: document-processing +documentation: ug +--- + +# Select and deselect images in Angular Spreadsheet + +You can select images in the spreadsheet either by clicking them in the UI or programmatically using methods. + +**Select an image via UI:** + +1. **Click the image** in the worksheet to select it +2. Resize handles and a selection border appear around the image + +**Select an image programmatically:** + +The [selectImage](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#selectimage) method allows you to programmatically select an image in the active sheet. Pass the image ID to select a specific image, or use the cell address where the image is located. + +**Deselect an image programmatically:** + +The [deselectImage](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#deselectimage) method removes the selection from the currently active image. Use this method to deselect any selected image without needing to specify an image ID. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images-and-illustrations.md b/Document-Processing/Excel/Spreadsheet/Angular/images-and-illustrations.md new file mode 100644 index 0000000000..fffbd62602 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/images-and-illustrations.md @@ -0,0 +1,33 @@ +--- +layout: post +title: Images and illustrations in Angular Spreadsheet component | Syncfusion +description: Learn here how to insert, position, resize, select, and delete images in the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Images and Illustrations + +Syncfusion Angular Spreadsheet component allows you to insert images directly into worksheet cells to enhance visual presentation and provide additional context alongside data. Images such as logos, screenshots, diagrams, or illustrations can be placed within a sheet, positioned as needed, resized, selected, or removed. + +Images can be controlled using the [allowImage](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowimage) property, which is enabled by default. + +## Overview of Images and Illustrations Operations + +The Angular Spreadsheet component also provides a range of features for working with images and illustrations. Below is a quick overview of each feature, with links to their respective documentation sections: + +- **[Insert and Position Images](./images-and-illustrations/insert-and-position-images)**: Add images to your spreadsheet and place them at the desired location. +- **[Resize Images](./images-and-illustrations/resize-images)**: Change the height and width of images to fit your needs. +- **[Delete Images](./images-and-illustrations/delete-images)**: Remove images that are no longer required from your spreadsheet. +- **[Select and Deselect Images](./images-and-illustrations/select-and-deselect-images)**: Select one or multiple images for further actions or deselect them as needed. +- **[Image Customization](./images-and-illustrations/image-customization)**: Customize image properties such as size and position programmatically. + +## Limitations of Image + +* Corner resizing option is not available in the image element. + +## See Also +* [Charts](./charts-and-visualizations) +* [Formatting](./formatting) +* [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md index 77f82da3e1..a126e280b3 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md @@ -2,8 +2,8 @@ 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 +platform: document-processing documentation: ug --- @@ -12,7 +12,7 @@ documentation: ug The keyboard shortcuts supported in the spreadsheet are, | Shortcut | Description | -|-------|---------| +|----------|-------------| | Ctrl + O | Displays dialog to open a file. | | Ctrl + S / Alt + F2 | Saves the workbook. | | Ctrl + P | Print the active worksheet when the spreadsheet is in focus. | @@ -39,20 +39,11 @@ The keyboard shortcuts supported in the spreadsheet are, | Alt + M | Go to `Formulas` tab. | | Alt + A | Go to `Data` tab. | | Alt + W | Go to `View` tab. | -| Tab | Navigate the active cell to the next cell in the same row. | -| Shift + Tab | Navigate the active cell to the previous cell in the same row. | -| Right or Left arrow| Move the focus to next or previous item in the tab if the focus is on ribbon tab.| -| Up arrow | When a menu is open, move focus to the next item. | -| Down arrow | When a menu is open, move focus to the previous item. | | Spacebar or Enter | Activate a selected button. | | Ctrl + F8 | Expand or collapse the ribbon content. | | Ctrl + Shift + U | Expand or collapse the formula bar. | | Ctrl + 9 | Hide the selected row. | | Ctrl + 0 | Hide the selected column. | -| Home | Moves the selection to starting column in worksheet. | -| Ctrl + Home | Move the selection to the first visible cell on a worksheet. | -| Ctrl + Shift + Home | Extend the selection of cells to the beginning of the worksheet. | -| Ctrl + End | Move to the last cell on a worksheet, right most last column and last row cell. | | Ctrl + & | Apply an outline border to the selected cells. | | Ctrl + Shift + & | Apply an outline border to the cells that you've chosen. | | Ctrl + Shift + ~ | Apply the `General` number format. | @@ -67,57 +58,21 @@ The keyboard shortcuts supported in the spreadsheet are, | Shift + Spacebar | Select an entire row in a worksheet. | | Shift + F3 | Opens `Insert Function` dialog. | | Ctrl + Alt + N | Opens new workbook. | -| Shift + Page Down | Perform page down by selecting all cells between. | -| Shift + Page Up | Perform page up by selecting all cells between. | -| Ctrl + Left | Navigate to the non-blank cell before the active cell in the same row. | -| Ctrl + Right | Navigate to the last non-blank cell in the same row as the active cell. | -| Ctrl + Up | Navigate to the first non-blank cell in the same row as the active cell. | -| Ctrl + Down | Navigate to the last cell that is not blank in the same column as the active cell. | -| Ctrl + Shift + Left | Extend the cell selection to the previous non-blank cell in the same row as the active cell. | -| Ctrl + Shift + Right | Extend the cell selection to the last non-blank cell in the same row as the active cell. | -| Ctrl + Shift + Up | Extend the selection of cells to the first non-blank cell in the same row as the active cell. | -| Ctrl + Shift + Down | Extend the selection of cells to the last non-blank cell in the same row as the active cell. | | Shift + Alt + K | Open the `List All Sheets` dropdown option. | -| Up arrow | Navigate from the active cell to the previous cell in the same column. | -| Down arrow | Navigate from the active cell to the next cell in the same column. | -| Left arrow | Navigate from the active cell to the previous cell in the same row. | -| Right arrow | Navigate from the active cell to the next cell in the same row. | -| Page Up | Move page up. | -| Page Down | Move page down. | -| Shift + Up | Extend the selection of cells to the previous row. | -| Shift + Down | Extend the selection of cells to the next row. | -| Shift + Left | Extend the selection of cells to the previous column. | -| Shift + Right | Extend the selection of cells to the next column. | -| Ctrl + Top | Navigate to the non-blank cell before the active cell in the same column. | -| Ctrl + Shift + Top | Extend the cell selection to the previous non-blank cell in the same column as the active cell. | -| Ctrl + Shift + Bottom | Extend the cell selection to the last non-blank cell in the same column as the active cell. | -| Enter | Navigate the active cell to the next cell in the same column. | -| Shift + Enter | Navigate to the previous cell in the same column from the active cell. | | Alt + Down | Open the list data validation menu and filter menu. | | Alt + Up | Close the list data validation menu and filter menu. | | Delete | Remove the contents of the cell. | -| Shift + Home | Extend the cell selection to the first column of a worksheet. | | Shift + F11 | Add a new sheet. | +| Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | | Ctrl + Shift + 9 | Unhide the selected rows. | | Ctrl + Shift + 0 | Unhide the selected columns. | | Ctrl + D | Fill the cell down. | | Ctrl + R | Fill the cell right. | -| Alt + Enter | While editing, add a new line. | -| Enter | Complete the cell editing and select the cell below in the same column. | -| Shift + Enter | Complete the cell editing and select the cell above in the same column. | -| Tab | Complete the cell editing and select the next cell in the same row. | -| Shift + Tab | Complete the cell editing and select the previous cell in the same row. | | Ctrl + Shift + F2 | Opens the comment editor for the active cell. Upon pressing the `Esc` key, the comment editor in focus will close. | -| Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | -| Alt | Focus on the active ribbon tab. | -| Left | Move the focus to the previous items in the ribbon content. | -| Right | Move the focus to the next items in the ribbon content. | -| Alt + Down | Open the ribbon dropdown menu. | -| Esc / Alt + Up | Close the ribbon dropdown menu. | ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/bootstrap5/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/link.md b/Document-Processing/Excel/Spreadsheet/Angular/link.md index 416bd45fca..f639c2d524 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/link.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/link.md @@ -1,15 +1,14 @@ --- layout: post -title: Link in Angular Spreadsheet component | Syncfusion -description: Learn here all about Link in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing +title: Link in React Spreadsheet component | Syncfusion +description: Learn here all about Link in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Link +platform: document-processing documentation: ug --- +# Link in React Spreadsheet component -# Link in Angular Spreadsheet component - -Hyperlink is used to navigate to web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the [`allowHyperlink`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowhyperlink) property to enable or disable hyperlink functionality. +Hyperlink is used to navigate to web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the [`allowHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowhyperlink) property to enable or disable hyperlink functionality. > * The default value for `allowHyperlink` property is `true`. @@ -20,32 +19,37 @@ You can insert a hyperlink in a worksheet cell for quick access to related infor **User Interface**: In the active spreadsheet, click the cell where you want to create a hyperlink. Insert hyperlink can be done by any of the following ways: -* Select the INSERT tab in the Ribbon toolbar and choose the `Link` item. -* Right-click the cell and then click Hyperlink item in the context menu, or you can press Ctrl+K. -* Use the [`addHyperlink()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addhyperlink) method programmatically. +* Select the **INSERT** tab in the Ribbon toolbar and choose the `Link` item. +* Right-click the cell and then click Hyperlink item in the context menu, or you can press `Ctrl + K`. +* Use the [`addHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#addhyperlink) method programmatically. ## Edit Hyperlink -You can change an existing hyperlink in your workbook by changing its destination or the text that is used to represent it. +You can update an existing hyperlink in your workbook by changing either: + +* **Destination Link** – Modify the link target (web address, cell reference, or sheet). +* **Display Text** – Change the text shown in the cell that represents the hyperlink. + **User Interface**: In the active spreadsheet, Select the cell that contains the hyperlink that you want to change. Editing the hyperlink while opening the dialog can be done by any one of the following ways: -* Select the INSERT tab in the Ribbon toolbar and choose the `Link` item. +* Select the **INSERT** tab in the Ribbon toolbar and choose the `Link` item. * Right-click the cell and then click Edit Hyperlink item in the context menu, or you can press Ctrl+K. 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. +You can remove a hyperlink from a cell without losing the display text. +This operation clears only the link itself, leaving the text in the cell unchanged. **User Interface**: In the active spreadsheet, click the cell where you want to remove a hyperlink. remove hyperlink can be done by any of the following ways: * Right-click the cell and then click Remove Hyperlink item in the context menu. -* Use the [`removeHyperlink()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#removehyperlink) method programmatically. +* Use the [`removeHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#removehyperlink) method programmatically. ## How to change target attribute @@ -69,10 +73,10 @@ There is an event named `beforeHyperlinkClick` which triggers only on clicking h ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data. ## See Also * [Sorting](./sort) * [Filtering](./filter) -* [Undo Redo](./undo-redo) \ No newline at end of file +* [Undo Redo](./undo-redo) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md b/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md index b76e0ce0c4..cfd75bb6ee 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/mobile-responsiveness.md @@ -2,8 +2,8 @@ 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 +platform: document-processing documentation: ug --- @@ -14,7 +14,3 @@ The Spreadsheet control rendered in desktop mode will be adaptive in all mobile 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. ![Spreadsheet Adaptive Mode](./images/spreadsheet_adaptive_mode.gif) - -## Note - -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/bootstrap5/spreadsheet/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/notes.md b/Document-Processing/Excel/Spreadsheet/Angular/notes.md index 3c0780c4bc..8063251658 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/notes.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/notes.md @@ -2,8 +2,8 @@ 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. +control: Notes platform: document-processing -control: Notes documentation: ug --- @@ -11,7 +11,8 @@ documentation: ug The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enablenotes) property, which defaults to **true**. -When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes. +* When opening an Excel document with notes, they are displayed in the Spreadsheet control. +* Cells containing notes are marked with a small red triangle in the top-right corner. Hovering over these cells shows the note content. ![Adding, editing, and deleting a note in Spreadsheet](./images/spreadsheet_add_edit_delete_note.gif) @@ -36,12 +37,13 @@ In the active worksheet, you can add a note in the following ways: * **Context Menu**: Right-click the desired cell and select **Add Note**. * **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**. * **Keyboard Shortcut**: Select the cell and press Shift + F2. -* **Programmatically**: +* **Programmatically**: * Use the `updateCell` method with the note model to add a note to a specific cell. * Bind notes via code-behind during initial load by associating the note model with the cell model. A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box. + ## Editing a note In the active worksheet, you can modify the content of existing notes in the document: @@ -52,6 +54,7 @@ In the active worksheet, you can modify the content of existing notes in the doc The note editor dialog box will open with the existing content. After editing the content, you can either click on other cells or press the Esc button to automatically save the changes and close the dialog box. + ## Deleting a note You can remove notes from cells using the following ways: @@ -61,31 +64,29 @@ You can remove notes from cells using the following ways: The note will be removed from the cell, and the red triangle indicator will be removed. -## Navigating between notes + +## Navigating Between Notes The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab. ![Navigating between notes in Spreadsheet](./images/spreadsheet_next_previous_note.gif) ### Previous Note - To navigate to the previous note: - -* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**. -* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward. -* If no prior note exists in the sheet, the search continues to the previous worksheet in order. -* If the workbook contains no notes, the selection remains on the current cell. +* Go to the **Review** tab, open the **Notes** dropdown, and select **Previous Note**. +* The Spreadsheet will highlight the previous note in the current worksheet, searching leftward and then upward. +* If no earlier note exists in the sheet, the search continues in the previous worksheet. +* If the workbook has no notes, the selection stays on the current cell. ### Next Note - To navigate to the next note: +* Go to the **Review** tab, open the **Notes** dropdown, and select **Next Note**. +* The Spreadsheet will highlight the next note in the current worksheet, searching rightward and then downward. +* If no later note exists in the sheet, the search continues in the next worksheet. +* If the workbook has no notes, the selection stays on the current cell. -* In the **Review** tab, open the **Notes** dropdown and select **Next Note**. -* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward. -* If no subsequent note exists in the sheet, the search continues to the next worksheet in order. -* If the workbook contains no notes, the selection remains on the current cell. - -This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery. +This navigation feature streamlines reviewing by letting you jump directly between notes across worksheets. +It ensures efficient traversal, so you don’t miss any feedback or comments while working through your document. ## Show/Hide Note @@ -119,15 +120,28 @@ This functionality enhances workflow efficiency by providing flexible control ov ![Show/Hide notes in Spreadsheet](./images/spreadsheet_show_hide_note.gif) -## Saving the document with notes +## Saving the Document with Notes + +You can save and export Spreadsheet data along with notes into an Excel document. +To do this, go to **File > Save As** in the ribbon menu. -The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls). +Notes are preserved when exporting to: +* **Microsoft Excel (.xlsx)** +* **Microsoft Excel 97–2003 (.xls)** -> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available. +Notes are **not** included when exporting to: +* **Comma Separated Values (.csv)** +* **Excel Macro-Enabled Workbook (.xlsm)** +* **Excel Binary Workbook (.xlsb)** +* **PDF Document (.pdf)** ## Disabling notes -To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work. +To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. + +* Notes in the document will not be displayed when opened in the Spreadsheet when `enableNotes` set to `false`. +* The **Add Note** option will be removed from the context menu. +* Keyboard shortcuts related to notes will no longer work. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -145,9 +159,14 @@ In the below example, the note functionality is disabled in the Spreadsheet. {% previewsample "/document-processing/samples/spreadsheet/angular/note-cs2" %} -## Integrating notes during initial loading and using cell data binding +## Integrating Notes During Initial Loading and Using Cell Data Binding + +You can add notes to cells initially when the Spreadsheet loads by using **cell data binding**. +This is done through the `notes` property in the cell settings. -The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet. +* Define the `notes` property inside the cell configuration. +* When the Spreadsheet initializes, the notes will automatically appear in the specified cells. +* Each cell can have its own note content bound through the model. In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event. @@ -168,4 +187,4 @@ In the below example, you can navigate between notes using **Previous Note** and * When importing the document with notes, the formatting of the content in the notes will not be available. Similarly, while adding notes, we cannot apply formatting to them. * The style and appearance of the dialog box for the notes, including size, color, border, and other elements, cannot be directly changed. * Exporting the workbook along with notes is not supported in file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf). -* Notes added outside the used ranges of the worksheet will not be included in the exported document. \ No newline at end of file +* Notes added outside the used ranges of the worksheet will not be included in the exported document. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md new file mode 100644 index 0000000000..9d9669737b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md @@ -0,0 +1,176 @@ +--- +layout: post +title: Opening excel from AWS S3 in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from AWS S3 in Angular Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Open file from AWS S3 +documentation: ug +--- + +# Open file from AWS S3 + +To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Amazon; +using Amazon.Runtime; +using Amazon.S3; +using Amazon.S3.Model; +using Amazon.S3.Transfer; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private IConfiguration _configuration; +public readonly string _accessKey; +public readonly string _secretKey; +public readonly string _bucketName; + +public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) +{ + _hostingEnvironment = hostingEnvironment; + _cache = cache; + _configuration = configuration; + _accessKey = _configuration.GetValue("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("BucketName"); +} + +``` + +5. Create the `OpenFromS3()` method to open the document from the AWS S3 bucket. + +```csharp + +[Route("api/[controller]")] +[ApiController] +public class SpreadsheetController : ControllerBase +{ + [HttpPost] + [Route("OpenFromS3")] + public async Task OpenFromS3([FromBody] FileOptions options) + { + try + { + //Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + //Create an S3 client to interact with AWS + using (var client = new AmazonS3Client(credentials, config)) + { + using (MemoryStream stream = new MemoryStream()) + { + //Get the full file name using input from the client + string bucketName = "your-bucket-name"; + string fileName = options.FileName + options.Extension; + //Download the file from S3 into memory + var response = await client.GetObjectAsync(new GetObjectRequest + { + BucketName = bucketName, + Key = fileName + }); + await response.ResponseStream.CopyToAsync(stream); + stream.Position = 0; // Reset stream position for reading + //Wrap the stream as a FormFile for processing + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + //Convert Excel file to JSON using Workbook.Open method. + var result = Workbook.Open(open); + //Return the JSON result to the client + return Content(result, "application/json"); + } + } + } + catch (Exception ex) + { + // Handle any errors and return a message + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } + } + + // To receive file details from the client. + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; + } +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "AccessKey": "Your Access Key from AWS S3", + "SecretKey": "Your Secret Key from AWS S3", + "BucketName": "Your Bucket name from AWS S3" +} + +``` + +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the AWS S3 bucket into the client-side spreadsheet. + +```ts + + + +// Function to open a spreadsheet file from AWS S3 via an API call +openFromS3() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); + }; + +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md new file mode 100644 index 0000000000..e0a67aa44a --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md @@ -0,0 +1,158 @@ +--- +layout: post +title: Open excel from Azure Blob in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Azure Blob Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Azure Blob Storage +documentation: ug +--- + +# Open file from Azure Blob Storage + +To load a file from Azure Blob Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using System; +using System.IO; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Configuration; +using Syncfusion.EJ2.Spreadsheet; +using Azure.Storage.Blobs; +using Azure.Storage.Blobs.Specialized; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private readonly string _storageConnectionString; +private readonly string _storageContainerName; + +public SpreadsheetController(IConfiguration configuration) +{ + // Fetch values from appsettings.json + _storageConnectionString = configuration.GetValue("connectionString"); + _storageContainerName = configuration.GetValue("containerName"); +} + +``` + +5. Create the `OpenFromAzure()` method to open the document from the Azure Blob Storage. + +```csharp + +[HttpPost] +[Route("OpenFromAzure")] +public async Task OpenFromAzure([FromBody] FileOptions options) +{ + if (options == null || string.IsNullOrWhiteSpace(options.FileName) || string.IsNullOrWhiteSpace(options.Extension)) + return BadRequest("Invalid file options."); + + try + { + using (MemoryStream stream = new MemoryStream()) + { + string fileName = options.FileName + options.Extension; + + // Connect to Azure Blob Storage + BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); + BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName); + + // Download file into memory + await blockBlobClient.DownloadToAsync(stream); + stream.Position = 0; + + // Wrap stream as FormFile and convert to Spreadsheet-compatible JSON + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + + string result = Workbook.Open(open); + return Content(result, "application/json"); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } +} + +// DTO that receives file details from the client +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "connectionString": "DefaultEndpointsProtocol=https;AccountName=yourAccount;AccountKey=yourKey;EndpointSuffix=core.windows.net", + "containerName": "your-container-name" +} + +``` +N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet. + +```ts + + + +openFromAzure() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from Azure. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; + +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md new file mode 100644 index 0000000000..9a4328aa97 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md @@ -0,0 +1,150 @@ +--- +layout: post +title: Open excel from Google Cloud in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Cloud Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Google Cloud Storage +documentation: ug +--- + +# Open file from Google Cloud Storage + +To load a file from Google Cloud Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Cloud.Storage.V1; +using Syncfusion.EJ2.Spreadsheet; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```Csharp + +private readonly string _bucketName; +private readonly StorageClient _storageClient; + +public SpreadsheetController(IConfiguration configuration) +{ + // Path of the JSON key downloaded from Google Cloud + string keyFilePath = configuration.GetValue("GoogleKeyFilePath"); + + // Create StorageClient with service-account credentials + var credentials = GoogleCredential.FromFile(keyFilePath); + _storageClient = StorageClient.Create(credentials); + + // Bucket that stores the Excel files + _bucketName = configuration.GetValue("BucketName"); +} + +``` + +5. Create the `OpenFromGoogleCloud()` method to open the document from the Google Cloud Storage. + +```Csharp + +[HttpPost] +[Route("OpenFromGoogleCloud")] +public IActionResult OpenFromGoogleCloud([FromBody] FileOptions options) +{ + try + { + using MemoryStream stream = new MemoryStream(); + + // / + string fileName = options.FileName + options.Extension; + + // Download the object into memory + _storageClient.DownloadObject(_bucketName, fileName, stream); + stream.Position = 0; + + // Feed the stream to Syncfusion to convert it into JSON + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + + string result = Workbook.Open(open); + return Content(result, "application/json"); + } + catch (Exception ex) + { + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } +} + +// DTO that receives file details from the client +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```Json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "GoogleKeyFilePath": "path/to/service-account-key.json", + "BucketName": "your-gcs-bucket-name" +} + +``` + +N> Note: Install the Google.Cloud.Storage.V1 NuGet package in the service project. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet. + +```ts + + + +openFromAzure() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from Google Cloud Storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md new file mode 100644 index 0000000000..aa9c78557f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md @@ -0,0 +1,183 @@ +--- +layout: post +title: Open excel from Google Drive in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Drive in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Google Drive +documentation: ug +--- + +# Open file from Google Drive + +To load a file from Google Drive in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Set up Google Drive API + +You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). + +**Step 2:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +* Open the `SpreadsheetController.cs` file in your web service project. + +* Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Apis.Drive.v3; +using Google.Apis.Services; +using Syncfusion.EJ2.Spreadsheet; + +``` + +* Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials +public readonly string folderId; +public readonly string applicationName; +public readonly string credentialPath; + +//constructor for assigning credentials +public SpreadsheetController(IConfiguration configuration) +{ + folderId = configuration.GetValue("FolderId"); + credentialPath = configuration.GetValue("CredentialPath"); + applicationName = configuration.GetValue("ApplicationName"); +} + +``` + +* Create the `OpenExcelFromGoogleDrive()` method to open the document from the Google Drive. + +```csharp + +[HttpPost] +[Route("OpenExcelFromGoogleDrive")] +public async Task OpenExcelFromGoogleDrive([FromBody] FileOptions options) +{ +try +{ + // Create a memory stream to store file data + MemoryStream stream = new MemoryStream(); + + // Authenticate using Service Account + GoogleCredential credential; + // Load Google service account credentials + using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read)) + { + credential = GoogleCredential.FromStream(streamKey) + .CreateScoped(DriveService.Scope.Drive); + } + + // Create Google Drive API service + var service = new DriveService(new BaseClientService.Initializer() + // Initialize Google Drive API client + { + HttpClientInitializer = credential, + ApplicationName = applicationName, + }); + + // List Excel files in Google Drive folder + var listRequest = service.Files.List(); + // Query Google Drive for Excel, CSV files in the specified folder + listRequest.Q = $"(mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' or mimeType='application/vnd.ms-excel' or mimeType='text/csv') and '{folderId}' in parents and trashed=false"; + listRequest.Fields = "files(id, name)"; + var files = await listRequest.ExecuteAsync(); + // Find the requested file + string fileIdToDownload = files.Files.FirstOrDefault(f => f.Name == options.FileName + options.Extension)?.Id; + // Get the file ID for the requested file name + if (string.IsNullOrEmpty(fileIdToDownload)) + // Get the file ID for the requested file name + return NotFound("File not found in Google Drive."); + // Download the file + var request = service.Files.Get(fileIdToDownload); + await request.DownloadAsync(stream); + // Download file content into memory stream + stream.Position = 0; + // Prepare file for Syncfusion Excel processing + OpenRequest open = new OpenRequest + // Wrap downloaded stream as FormFile for Syncfusion processing + { + File = new FormFile(stream, 0, stream.Length, options.FileName, options.FileName + options.Extension) + }; + + // Convert Excel file to JSON using Syncfusion XlsIO + var result = Workbook.Open(open); + return Content(result, "application/json"); +} +catch (Exception ex) +{ + return BadRequest("Error occurred while processing the file: " + ex.Message); +} +} + +// Class to store FileOptions +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +* Open the `appsettings.json` file in your web service project, add your Google Drive configuration details. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "CredentialPath": "path-to-your-service-account-key.json", + "FolderId": "your-google-drive-folder-id", + "ApplicationName": "YourAppName" +} + +``` + +N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. + +**Step 4:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and process the Excel file from the Google Drive and load the JSON result into the client-side spreadsheet using the [openFromJson](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openfromjson) method. + +```typescript + + +openFromGoogleDrive() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from Google Drive. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; +``` + +N> The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/print.md b/Document-Processing/Excel/Spreadsheet/Angular/print.md index 24ec625091..3a3c359568 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/print.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/print.md @@ -2,8 +2,8 @@ layout: post title: Print in Angular Spreadsheet component | Syncfusion description: Learn here all about print feature in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Print platform: document-processing -control: Print documentation: ug --- @@ -43,7 +43,7 @@ The `printOptions` contain three properties, as described below. ## Disable printing -The printing functionality in the Spreadsheet can be disabled by setting the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowprint) property to **false**. After disabling, the **"Print"** option will not be available in the **"File"** menu of the ribbon and as a keyboard shortcut. +The printing functionality in the Spreadsheet can be disabled by setting the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#allowprint) property to **false**. After disabling, the **"Print"** option will not be available in the **"File"** menu of the ribbon and as a keyboard shortcut. ![Spreadsheet with print option disabled](./images/spreadsheet_print_disable.png) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/protect-sheet.md b/Document-Processing/Excel/Spreadsheet/Angular/protect-sheet.md index ee2eb3a1e3..4e5c69f97b 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/protect-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/protect-sheet.md @@ -2,23 +2,29 @@ layout: post title: Protect sheet in Angular Spreadsheet component | Syncfusion description: Learn here all about Protect sheet in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Protect sheet +platform: document-processing documentation: ug --- -# Protect sheet in Angular Spreadsheet component +# Protection in Angular Spreadsheet component + +Sheet protection allows you to prevent users from modifying data in the Spreadsheet. +When a sheet is protected, editing actions such as typing, formatting, or deleting content are restricted, ensuring that important data remains secure. -Sheet protection helps you to prevent the users from modifying the data in the spreadsheet. +You can enable protection by using the [`protectSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#protectsheet) method. +This locks the sheet and restricts user actions based on the protection settings you configure. -## Protect Sheet +## Sheet Protection -Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. -You can use the [`isProtected`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#isprotected) property to enable or disable the Protecting functionality. +### Protect Sheet + +Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. You can use the [`isProtected`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#isprotected) property to enable or disable the Protecting functionality. > * The default value for `isProtected` property is `false`. -By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities the `protectSettings` options are used in a protected spreadsheet. +By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities +the `protectSettings` options are used in a protected spreadsheet. The available `protectSettings` options in spreadsheet are, @@ -40,9 +46,9 @@ In the active Spreadsheet, the sheet protection can be done by any of the follow * Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options. * Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options. -* Use the [`protectSheet()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#protectsheet) method programmatically. +* Use the [`protectSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#protectsheet) method programmatically. -The following example shows `Protect Sheet` functionality with password in the Spreadsheet control. +The following example shows `Protect Sheet` functionality in the Spreadsheet control. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -56,13 +62,10 @@ The following example shows `Protect Sheet` functionality with password in the S {% previewsample "/document-processing/samples/spreadsheet/angular/protect-sheet-cs1" %} -### Limitations of Protect sheet - -* Password encryption is not supported - -## Unprotect Sheet +### Unprotect Sheet -Unprotect sheet is used to enable all the functionalities that are already disabled in a protected spreadsheet. +The **Unprotect Sheet** feature restores all functionalities that were disabled in a protected spreadsheet. +Once a sheet is unprotected, users can edit, format, insert, delete, and move data without restrictions. **User Interface**: @@ -70,11 +73,11 @@ In the active Spreadsheet, the sheet Unprotection can be done by any of the foll * Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab. * Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu. -* Use the [`unprotectSheet()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#unprotectsheet) method programmatically. +* Use the [`unprotectSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#unprotectsheet) method programmatically. -## Unlock the particular cells in the protected sheet +### Unlock the particular cells in the protected sheet -In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#lockcells) method, with the parameter `range` and `isLocked` property as false. +In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#lockcells) method, with the parameter `range` and `isLocked` property as false. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -88,11 +91,15 @@ In protected spreadsheet, to make some particular cell or range of cells are edi {% previewsample "/document-processing/samples/spreadsheet/angular/lock-cells-cs1" %} -## Make cells read-only without protecting worksheet +## Read-only -Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. +The read-only feature allows you to restrict editing for specific rows, columns, or cell ranges without protecting the entire worksheet. This provides flexibility to safeguard important data while still allowing users to interact with other parts of the sheet as needed. -Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table: +### Make Cells Read-only Without Protecting the Worksheet + +Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. + +Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table: | Parameter | Description | |-----|------| @@ -152,11 +159,11 @@ The following example demonstrates how to make rows, columns, and cells read-onl {% previewsample "/document-processing/samples/spreadsheet/angular/readonly-cs1" %} -## Protect Workbook +## Workbook Protection + +### Protect Workbook -Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. -You can use the [`password`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#password) property to protect workbook with password. -You can use the [`isProtected`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#isprotected) property to protect or unprotect the workbook without the password. +Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the [`password`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#password) property to protect workbook with password. You can use the [`isProtected`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#isprotected) property to protect or unprotect the workbook without the password. > The default value for `isProtected` property is `false`. @@ -164,7 +171,7 @@ You can use the [`isProtected`](https://ej2.syncfusion.com/angular/documentation In the active Spreadsheet, you can protect the worksheet by selecting the Data tab in the Ribbon toolbar and choosing the `Protect Workbook` item. Then, enter the password and confirm it and click on OK. -The following example shows `Protect Workbook` by using the [`isProtected`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#isprotected) property in the Spreadsheet control. +The following example shows `Protect Workbook` by using the [`isProtected`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#isprotected) property in the Spreadsheet control. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -178,7 +185,7 @@ The following example shows `Protect Workbook` by using the [`isProtected`](http {% previewsample "/document-processing/samples/spreadsheet/angular/local-data-binding-cs4" %} -The following example shows `Protect Workbook` by using the [`password`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#password) property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion® in the dialog box. +The following example shows `Protect Workbook` by using the [`password`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#password) property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion® in the dialog box. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -189,22 +196,22 @@ The following example shows `Protect Workbook` by using the [`password`](https:/ {% include code-snippet/spreadsheet/angular/local-data-binding-cs5/src/main.ts %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/samples/spreadsheet/angular/local-data-binding-cs5" %} -## Unprotect Workbook +### Unprotect Workbook -Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hide or unhide sheets feature in the spreadsheet. +The **Unprotect Workbook** feature restores full access to workbook-level operations such as inserting, deleting, renaming, moving, copying, hiding and unhiding sheets that were restricted when the workbook was protected. **User Interface**: -In the active Spreadsheet, the workbook Unprotect can be done in any of the following ways: +In the active Spreadsheet, the workbook can be unprotected in any of the following ways: * Select the `Unprotect Workbook` item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box. ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/change-text-in-column-headers.md b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/change-text-in-column-headers.md new file mode 100644 index 0000000000..2d6b8e291a --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/change-text-in-column-headers.md @@ -0,0 +1,26 @@ +--- +layout: post +title: Changing Text in Column Headers in Angular Spreadsheet | Syncfusion +description: Learn here all about how to change text in column headers in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Rows and Columns +platform: document-processing +documentation: ug +--- + +# Changing text in column headers in Angular Spreadsheet + +Using the [`beforeCellRender`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#beforecellrender) event, you can change the text in the column headers. In that event, you can use the `e-header-cell` class to identify the header cell element and update its text value. + +The following code example shows how to change the text in the column headers. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/column-header-change-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/column-header-change-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/column-header-change-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/delete-rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/delete-rows-and-columns.md new file mode 100644 index 0000000000..f2ebc6d944 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/delete-rows-and-columns.md @@ -0,0 +1,37 @@ +--- +layout: post +title: Delete in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to delete in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Rows and Columns +platform: document-processing +documentation: ug +--- + +# Delete in Angular Spreadsheet + +Delete support provides an option for deleting the rows and columns in the spreadsheet. Use [`allowDelete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowdelete) property to enable or disable the delete option in Spreadsheet. + +The rows and columns can be deleted dynamically in the following ways, + +* Using [`delete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#delete) method, you can delete the loaded rows and columns. +* Using context menu, you can delete the selected rows and columns. + +The following code example shows the delete operation of rows and columns in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/delete/row-column-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/delete/row-column-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/delete/row-column-cs1" %} + +## Limitations of delete + +The following features have some limitations in Insert/Delete: + +* Delete row/column between the filter applied cells. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/freeze-pane.md similarity index 54% rename from Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md rename to Document-Processing/Excel/Spreadsheet/Angular/row-and-column/freeze-pane.md index 9f7bafddce..97f5b9684a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/freeze-pane.md @@ -2,14 +2,20 @@ 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. +control: Rows and Columns platform: document-processing -control: Freeze pane documentation: ug --- # Freeze pane in Angular Spreadsheet component -Freeze Panes helps you to keep particular rows or columns visible when scrolling the sheet content in the spreadsheet. You can specify the number of frozen rows and columns using the [`frozenRows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#frozenrows) and [`frozenColumns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#frozencolumns) properties inside the [`Sheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sheets) property. +**Freeze Panes** helps you keep specific rows or columns visible while scrolling through the sheet content. This makes it easier to work with large spreadsheets without losing track of important headers or labels. + +You can set the number of frozen rows and columns using the [`frozenRows`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#frozenrows) and [`frozenColumns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#frozencolumns) properties inside the [`Sheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sheets) property. + +To quickly get started with Freeze Panes in Angular Spreadsheet, you can check out this video tutorial: + +{% youtube "https://www.youtube.com/watch?v=TX4P6gFymwo" %} ## Apply freeze panes on UI @@ -18,7 +24,7 @@ Freeze Panes helps you to keep particular rows or columns visible when scrolling In the active spreadsheet, click the cell where you want to create freeze panes. Freeze panes can be done in any of the following ways: * Select the View tab in the Ribbon toolbar and choose the `Freeze Panes` item. -* Use the [`freezePanes`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#freezepanes) method programmatically. +* Use the [`freezePanes`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#freezepanes) method programmatically. ## FrozenRows @@ -37,12 +43,12 @@ It allows you to keep a certain number of columns visible while scrolling horizo **User Interface**: -In the active spreadsheet, select the cell where you want to create frozen columns. Frozen columns can be done in any one of the following ways: +In the active spreadsheet, you can freeze columns by selecting the cell where you want them to remain visible. Frozen columns can be applied in the following ways: -* Select the View tab in the Ribbon toolbar and choose the `Freeze Columns` item. -* You can specify the number of frozen columns using the `frozenColumns` property inside the `Sheet` property. +* Go to the **View** tab in the Ribbon toolbar and choose the **Freeze Columns** option. +* Set the number of frozen columns using the [`frozenColumns`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/sheet#frozencolumns) property inside the [Sheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/sheet) property. -In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as ‘2’. Hence, the two columns on the left and the top two rows are frozen. +In this demo, `frozenColumns` is set to **2** and `frozenRows` is set to **2**. As a result, the first two columns on the left and the top two rows remain frozen while scrolling. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -60,12 +66,12 @@ In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as Here, we have listed out the limitations with Freeze Panes feature. -* Merging the cells between freeze and unfreeze area. +* Merging cells between the freeze and unfreeze areas is not supported. * If images and charts are added inside the freeze area cells, their portion in the unfreeze area will not move when scrolling. ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/insert-rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/insert-rows-and-columns.md new file mode 100644 index 0000000000..64d7f5c6e1 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/insert-rows-and-columns.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Insert in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to insert in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Rows and Columns +platform: document-processing +documentation: ug +--- + +# Insert in Angular Spreadsheet + +You can insert rows or columns anywhere in a spreadsheet. Use the [`allowInsert`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowinsert) property to enable or disable the insert option in Spreadsheet. + +## Row + +The rows can be inserted in the following ways, + +* Using [`insertRow`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#insertrow) method, you can insert the rows once the component is loaded. +* Using context menu, insert the empty rows in the desired position. + +The following code example shows the options for inserting rows in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert/row-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert/row-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert/row-cs1" %} + +## Column + +The columns can be inserted in the following ways, + +* Using [`insertColumn`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#insertcolumn) method, you can insert the columns once the component is loaded. +* Using context menu, insert the empty columns in the desired position. + +The following code example shows the options for inserting columns in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert/column-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert/column-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert/column-cs1" %} + +## Limitations of insert + +The following features have some limitations in Insert/Delete: + +* Insert row/column between the formatting applied cells. +* Insert row/column between the data validation. +* Insert row/column between the conditional formatting applied cells. +* Insert row/column between the filter applied cells. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/row-and-column-size.md b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/row-and-column-size.md new file mode 100644 index 0000000000..52dc0bf765 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/row-and-column-size.md @@ -0,0 +1,66 @@ +--- +layout: post +title: Row and Column Size in Angular Spreadsheet component | Syncfusion +description: Learn here all about row and column size in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Rows and Columns +platform: document-processing +documentation: ug +--- + +# Row and Column Size in Angular Spreadsheet + +You can change the size of rows and columns in the spreadsheet by using [setRowsHeight](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#setrowsheight) and [setColumnsWidth](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#setcolumnswidth) methods. + +## Row + +You can change the height of single or multiple rows by using the [setRowsHeight](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#setrowsheight) method. + +You can provide the following type of ranges to the method: + +* Single row range: `['2:2']` +* Multiple rows range: `['1:100']` +* Multiple rows with discontinuous range: `['1:10', '15:25', '30:40']` +* Multiple rows with different sheets: `[Sheet1!1:50, 'Sheet2!1:50', 'Sheet3!1:50']` + +Additionally, each row model includes a [customHeight](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rowmodel#customheight) property that indicates the row height was explicitly set either by manually adjusting the row header boundary or programmatically. When [customHeight](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/rowmodel#customheight) is true, the height is treated as manually defined and will not change automatically when enabling wrap text, increasing font size, or changing the font family; the height remains fixed until the user or code updates it. + +The following code example shows how to change the height for single/multiple rows in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert/row-height-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert/row-height-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert/row-height-cs1" %} + +## Column + +You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#setcolumnswidth) method. + +You can provide the following type of ranges to the method: + +* Single column range: `['F:F']` +* Multiple columns range: `['A:F']` +* Multiple columns with discontinuous range: `['A:C', 'G:I', 'K:M']` +* Multiple columns with different sheets: `[Sheet1!A:H, 'Sheet2!A:H', 'Sheet3!A:H']` + +Additionally, each column model includes a [customWidth](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/columnmodel#customwidth) property that indicates the column width was explicitly set either by manually adjusting the column header boundary or programmatically. When [customWidth](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/columnmodel#customwidth) is true, the width is treated as manually defined. + +The following code example shows how to change the width for single/multiple columns in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert/column-width-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert/column-width-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert/column-width-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/show-hide.md b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/show-hide.md new file mode 100644 index 0000000000..b4df7be511 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/row-and-column/show-hide.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Hide and show in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to hide and show in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Rows and Columns +platform: document-processing +documentation: ug +--- + +# Hide and show + +You can show or hide the rows and columns in the spreadsheet through property binding, method, and context menu. + +## Row + +The rows can be hidden or shown through the following ways, + +* Using `hidden` property in row, you can hide/show the rows at initial load. +* Using `hideRow` method, you can hide the rows by specifying the start and end row index, set the last argument `hide` as `false` to unhide the hidden rows. +* Right-click on the row header and select the desired option from context menu + +## Column + +The columns can be hidden or shown through following ways, + +* Using `hidden` property in columns, you can hide/show the columns at initial load. +* Using `hideColumn` method, you can hide the columns by specifying the start and end column index, set the last argument `hide` as `false` to unhide the hidden columns. +* Right-click on the column header and select the desired option from context menu + +The following code example shows the hide/show rows and columns operation in the spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/hide-show-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/hide-show-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/hide-show-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/Angular/rows-and-columns.md index 1fba18ba1e..7e549f17ea 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/rows-and-columns.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/rows-and-columns.md @@ -2,152 +2,30 @@ layout: post title: Rows and columns in Angular Spreadsheet component | Syncfusion description: Learn here all about Rows and columns in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Rows and columns +platform: document-processing documentation: ug --- # Rows and columns in Angular Spreadsheet component -Spreadsheet is a tabular format consisting of rows and columns. The intersection point of rows and columns are called as cells. The list of operations that you can perform in rows and columns are, - -* Insert -* Delete -* Show and Hide - -## Insert - -You can insert rows or columns anywhere in a spreadsheet. Use the [`allowInsert`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowinsert) property to enable or disable the insert option in Spreadsheet. - -### Row - -The rows can be inserted in the following ways, - -* Using [`insertRow`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertrow) method, you can insert the rows once the component is loaded. -* Using context menu, insert the empty rows in the desired position. - -The following code example shows the options for inserting rows in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/insert/row-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/insert/row-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/insert/row-cs1" %} - -### Column - -The columns can be inserted in the following ways, - -* Using [`insertColumn`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#insertcolumn) method, you can insert the columns once the component is loaded. -* Using context menu, insert the empty columns in the desired position. - -The following code example shows the options for inserting columns in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/insert/column-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/insert/column-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/insert/column-cs1" %} - -## Delete - -Delete support provides an option for deleting the rows and columns in the spreadsheet. Use [`allowDelete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowdelete) property to enable or disable the delete option in Spreadsheet. - -The rows and columns can be deleted dynamically in the following ways, - -* Using [`delete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#delete) method, you can delete the loaded rows and columns. -* Using context menu, you can delete the selected rows and columns. - -The following code example shows the delete operation of rows and columns in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/delete/row-column-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/delete/row-column-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/delete/row-column-cs1" %} - -## Limitations - -The following features have some limitations in Insert/Delete: - -* Insert row/column between the formatting applied cells. -* Insert row/column between the data validation. -* Insert row/column between the conditional formatting applied cells. -* Insert/delete row/column between the filter applied cells. - -## Hide and show - -You can show or hide the rows and columns in the spreadsheet through property binding, method, and context menu. - -## Row - -The rows can be hidden or shown through the following ways, - -* Using `hidden` property in row, you can hide/show the rows at initial load. -* Using `hideRow` method, you can hide the rows by specifying the start and end row index, set the last argument `hide` as `false` to unhide the hidden rows. -* Right-click on the row header and select the desired option from context menu - -## Column - -The columns can be hidden or shown through following ways, - -* Using `hidden` property in columns, you can hide/show the columns at initial load. -* Using `hideColumn` method, you can hide the columns by specifying the start and end column index, set the last argument `hide` as `false` to unhide the hidden columns. -* Right-click on the column header and select the desired option from context menu - -The following code example shows the hide/show rows and columns operation in the spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/hide-show-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/hide-show-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/hide-show-cs1" %} - -## Changing text in column headers +A spreadsheet is organized in a tabular format consisting of **rows** and **columns**. The intersection of a row and a column is called a **cell**. -Using the [`beforeCellRender`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event, you can change the text in the column headers. In that event, you can use the `e-header-cell` class to identify the header cell element and update its text value. +## Overview of Row and Column Operations -The following code example shows how to change the text in the column headers. +The Angular Spreadsheet component provides several features for managing rows and columns. Below is a quick overview of each operation, with links to their respective documentation sections: -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/column-header-change-cs1/src/app.ts %} -{% endhighlight %} +- **[Insert Rows and Columns](./row-and-column/insert-rows-and-columns)**: Add new rows or columns to the worksheet as needed. +- **[Delete Rows and Columns](./row-and-column/delete-rows-and-columns)**: Remove existing rows or columns from the worksheet. +- **[Show and Hide Rows and Columns](./row-and-column/show-hide-rows-and-columns)**: Control the visibility of rows and columns by hiding or unhiding them. +- **[Change Text in Column Headers](./row-and-column/change-text-in-column-headers)**: Customize the text displayed in column headers. +- **[Freeze Pane](./row-and-column/freeze-pane)**: Keep specific rows or columns visible while scrolling through the worksheet. +- **[Size](./row-and-column/row-and-column-size)**: Adjust the height of rows and the width of columns to fit your data. -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/column-header-change-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/column-header-change-cs1" %} ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md new file mode 100644 index 0000000000..9b34ebed6f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md @@ -0,0 +1,162 @@ +--- +layout: post +title: Saving excel to AWS S3 in Angular Spreadsheet control | Syncfusion +description: Learn how to save a Excel file from AWS S3 in Angular Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Save file to AWS S3 +documentation: ug +--- + +# Save spreadsheet to AWS S3 + +To save a file to the AWS S3, you can follow the steps below. + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Amazon; +using Amazon.Runtime; +using Amazon.S3; +using Amazon.S3.Model; +using Amazon.S3.Transfer; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields + +```csharp + +private IConfiguration _configuration; +public readonly string _accessKey; +public readonly string _secretKey; +public readonly string _bucketName; + +public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) +{ + _hostingEnvironment = hostingEnvironment; + _cache = cache; + _configuration = configuration; + _accessKey = _configuration.GetValue("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("BucketName"); +} + +``` + +5. Create the `SaveToS3()` method to open the document from the AWS S3 bucket + +```csharp + +[HttpPost] +[Route("SaveToS3")] +public async Task SaveToS3([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel file stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; // Reset stream for upload + + // Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + + // Define S3 bucket and file name + string bucketName = "your-bucket-name"; + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + + // Initialize S3 client + using (var client = new AmazonS3Client(credentials, config)) + { + // Use TransferUtility to upload the file stream + var fileTransferUtility = new TransferUtility(client); + await fileTransferUtility.UploadAsync(fileStream, bucketName, fileName); + } + + // Return success message + return Ok("Excel file successfully saved to AWS S3."); + } + catch (Exception ex) + { + } +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "AccessKey": "Your Access Key from AWS S3", + "SecretKey": "Your Secret Key from AWS S3", + "BucketName": "Your Bucket name from AWS S3" +} + +``` + +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```ts + + + +// Function to save the current spreadsheet to AWS S3 via an API call +saveToS3() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToS3', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md new file mode 100644 index 0000000000..e77f1cead5 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md @@ -0,0 +1,133 @@ +--- +layout: post +title: Save excel to Azure Blob in Angular Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Azure Blob Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Azure Blob Storage +documentation: ug +--- + +# Save file to Azure Cloud Storage + +To save a file to Azure Blob Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using System; +using System.IO; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Configuration; +using Syncfusion.EJ2.Spreadsheet; +using Azure.Storage.Blobs; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private readonly string _storageConnectionString; +private readonly string _storageContainerName; + +public SpreadsheetController(IConfiguration configuration) +{ + _storageConnectionString = configuration.GetValue("connectionString"); + _storageContainerName = configuration.GetValue("containerName"); +} + +``` + +5. Create the `SaveToAzure()` method to save the document to the Azure Blob storage. + +```csharp + +[HttpPost] +[Route("SaveToAzure")] +public async Task SaveToAzure([FromForm] SaveSettings saveSettings) +{ + if (saveSettings == null || string.IsNullOrWhiteSpace(saveSettings.FileName)) + return BadRequest("Invalid save settings."); + + try + { + // Convert spreadsheet JSON to Excel/PDF/CSV stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; + + // Define Azure Blob Storage client + BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); + + // Define blob name using file name and save type + string blobName = $"{saveSettings.FileName}.{saveSettings.SaveType.ToString().ToLower()}"; + BlobClient blobClient = containerClient.GetBlobClient(blobName); + + // Upload the Excel file stream to Azure Blob Storage (overwrite if exists) + await blobClient.UploadAsync(fileStream, overwrite: true); + + return Ok("Excel file successfully saved to Azure Blob Storage."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Azure Blob Storage: " + ex.Message); + } +} + +``` + +N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. Ensure the configured connection string has permissions to read and write blobs in the specified container. + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```ts + + + +saveToAzure() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to Azure-blog storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToAzure', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md new file mode 100644 index 0000000000..76f38e93c8 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md @@ -0,0 +1,124 @@ +--- +layout: post +title: Save excel to Google Cloud in Angular Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Google Cloud Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Google Cloud Storage +documentation: ug +--- + +# Save file to Google Cloud Storage + +To save a file to Google Cloud Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Cloud.Storage.V1; +using Syncfusion.EJ2.Spreadsheet; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp +private readonly string _bucketName; +private readonly StorageClient _storageClient; + +public SpreadsheetController(IConfiguration configuration) +{ + // Path of the JSON key downloaded from Google Cloud + string keyFilePath = configuration.GetValue("GoogleKeyFilePath"); + + // Create StorageClient with service-account credentials + var credentials = GoogleCredential.FromFile(keyFilePath); + _storageClient = StorageClient.Create(credentials); + + // Bucket that stores the Excel files + _bucketName = configuration.GetValue("BucketName"); +} +``` + +5. Create the `SaveToGoogleCloud()` method to save the document to the Google Cloud storage. + +```csharp +[HttpPost] +[Route("SaveToGoogleCloud")] +public async Task SaveToGoogleCloud([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; + + // File name inside the bucket + string fileName = $"{saveSettings.FileName}.{saveSettings.SaveType.ToString().ToLower()}"; + + // Upload the stream to Google Cloud Storage + await _storageClient.UploadObjectAsync(_bucketName, fileName, null, fileStream); + + return Ok("Excel file successfully saved to Google Cloud Storage."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Google Cloud Storage: " + ex.Message); + } +} +``` + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```ts + + + +saveToGoogleCloud() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to Google storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToGoogleCloud', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> Note: The back-end requires the Google.Cloud.Storage.V1 NuGet package and a service-account key that has Storage Object Admin (or equivalent) permissions on the target bucket. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md new file mode 100644 index 0000000000..0993675d73 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md @@ -0,0 +1,201 @@ +--- +layout: post +title: Save excel to Google Drive in Angular Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file to Google Drive from Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Google Drive +documentation: ug +--- + +# Save file to Google Drive + +To save a file to Google Drive in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Set up Google Drive API + +You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). + +**Step 2:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +* Open the `SpreadsheetController.cs` file in your web service project. + +* Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Apis.Drive.v3; +using Google.Apis.Services; +using Syncfusion.EJ2.Spreadsheet; + +``` + +* Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials +public readonly string folderId; +public readonly string applicationName; +public readonly string credentialPath; + +//constructor for assigning credentials +public SpreadsheetController(IConfiguration configuration) +{ + folderId = configuration.GetValue("FolderId"); + credentialPath = configuration.GetValue("CredentialPath"); + applicationName = configuration.GetValue("ApplicationName"); +} + +``` + +* Create the `SaveExcelToGoogleDrive()` method to save the document to the Google Drive. + +```csharp + +[HttpPost] +[Route("SaveExcelToGoogleDrive")] +public async Task SaveExcelToGoogleDrive([FromForm] SaveSettings saveSettings) +{ + try + { + //Generate Excel file stream using Syncfusion + Stream generatedStream = Workbook.Save(saveSettings); + //Copy to MemoryStream to ensure full content is flushed and seekable + MemoryStream excelStream = new MemoryStream(); + // Copy generated stream to MemoryStream for upload + await generatedStream.CopyToAsync(excelStream); + excelStream.Position = 0; // Reset position for upload + // Prepare file name with extension based on SaveType + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + // Validate service account credential file + if (!System.IO.File.Exists(credentialPath)) + throw new FileNotFoundException($"Service account key file not found at {credentialPath}"); + //Authenticate using Service Account credentials + GoogleCredential credential; + // Load Google service account credentials + using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read)) + { + credential = GoogleCredential.FromStream(streamKey) + .CreateScoped(DriveService.Scope.Drive); + } + //Initialize Google Drive API service + var service = new DriveService(new BaseClientService.Initializer() + // Initialize Google Drive API client + { + HttpClientInitializer = credential, + ApplicationName = applicationName, + }); + //Prepare file metadata + var fileMetadata = new Google.Apis.Drive.v3.Data.File() + { + Name = fileName + }; + //Check if file already exists in the specified folder + var listRequest = service.Files.List(); + listRequest.Q = $"name='{fileName}' and trashed=false"; + // Query Google Drive for Excel, CSV files in the specified folder + listRequest.Fields = "files(id)"; + var files = await listRequest.ExecuteAsync(); + // Reset stream position before upload (important for both update and create) + excelStream.Position = 0; + // Set MIME type dynamically based on SaveType + string mimeType = saveSettings.SaveType switch + { + SaveType.Xlsx => "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + SaveType.Xls => "application/vnd.ms-excel", + SaveType.Csv => "text/csv", + }; + + if (files.Files.Any()) + { + // If File exists Update in the existing file + var updateRequest = service.Files.Update(fileMetadata, files.Files[0].Id, excelStream, mimeType); + updateRequest.Fields = "id"; + await updateRequest.UploadAsync(); + } + else + { + // If File does not exist, Create new file + var createRequest = service.Files.Create(fileMetadata, excelStream,mimeType); + createRequest.Fields = "id"; + await createRequest.UploadAsync(); + } + return Ok("Excel file successfully saved/updated in Google Drive."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Google Drive: " + ex.Message); + } +} + +``` + +* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration + +```json +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "CredentialPath": "path-to-your-service-account-key.json", + "FolderId": "your-google-drive-folder-id", + "ApplicationName": "YourAppName" +} +``` + +N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. + +**Step 4:** Modify the index file in the Spreadsheet sample to save the Spreadsheet as JSON data using the [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method and send the saved JSON to the server via fetch call. + +```ts + + +// Save the current spreadsheet to Google Drive +saveToGoogleDrive() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to Google storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToGoogleDrive', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/scrolling.md b/Document-Processing/Excel/Spreadsheet/Angular/scrolling-and-virtualization.md similarity index 73% rename from Document-Processing/Excel/Spreadsheet/Angular/scrolling.md rename to Document-Processing/Excel/Spreadsheet/Angular/scrolling-and-virtualization.md index a14d5bd4bc..92b11247a0 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/scrolling.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/scrolling-and-virtualization.md @@ -1,30 +1,30 @@ --- layout: post -title: Scrolling in Angular Spreadsheet component | Syncfusion -description: Learn here all about Scrolling in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing +title: Scrolling and Virtualization in Angular Spreadsheet component | Syncfusion +description: Learn here all about Scrolling and Virtualization in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. control: Scrolling +platform: document-processing documentation: ug --- -# Scrolling in Angular Spreadsheet component +# Scrolling and Virtualization in Angular Spreadsheet component -Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the [`allowScrolling`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowscrolling) as true. +Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the [`allowScrolling`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#allowscrolling) as true. > By default, the `allowScrolling` property is true. -You have the following options in Scrolling by using [`scrollSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollSettings). +You have the following options in Scrolling by using [`scrollSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#scrollsettings). * Finite scrolling. * Virtual scrolling. ## Finite Scrolling -Finite scrolling supports two type of modes in scrolling. You can use the [`isFinite`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollsettings#isfinite) property in [`scrollSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollsettings) to specify the mode of scrolling. +Finite scrolling supports two type of modes in scrolling. You can use the [`isFinite`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollSettings/#isfinite) property in [`scrollSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#scrollsettings) to specify the mode of scrolling. -* Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollsettings#isfinite) property as `true`. +* Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollSettings/#isfinite) property as `true`. -* Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollsettings#isfinite) property as `false`. +* Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/scrollSettings/#isfinite) property as `false`. > By Default, the `isFinite` property is `false`. @@ -46,7 +46,7 @@ You can scroll through the worksheet using one of the following ways, ## Finite scrolling with defined rows and columns -If you want to perform scrolling with defined rows and columns, you must define `rowCount` and `colCount` in the [`sheets`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sheets) property and set `isFinite` as true and `enableVirtualization` as false in `scrollSettings`. +If you want to perform scrolling with defined rows and columns, you must define `rowCount` and `colCount` in the [`sheets`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#sheets) property and set `isFinite` as true and `enableVirtualization` as false in `scrollSettings`. The following code example shows the finite scrolling with defined rows and columns in the spreadsheet. Here, we used rowCount as 20 and colCount as 20, after reaching the 20th row or 20th column you can't able to scroll. @@ -64,4 +64,4 @@ The following code example shows the finite scrolling with defined rows and colu ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. \ No newline at end of file +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/searching.md b/Document-Processing/Excel/Spreadsheet/Angular/searching.md index a2a0bc3ba1..201e0e9b81 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/searching.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/searching.md @@ -2,58 +2,58 @@ layout: post title: Searching in Angular Spreadsheet component | Syncfusion description: Learn here all about Searching in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Searching +platform: document-processing documentation: ug --- # Searching in Angular Spreadsheet component -Find and Replace helps you to search for the target text and replace the found text with alternative text within the sheet or workbook. You can use the [`allowFindAndReplace`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowfindandreplace) property to enable or disable the Find and Replace functionality. +Find and Replace helps you to search for target text and replace the founded text with alternative text within the sheet or workbook. You can use the [`allowFindAndReplace`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowfindandreplace) property to enable or disable Find and Replace functionality. > * The default value for `allowFindAndReplace` property is `true`. ## Find -Find feature is used to select the matched contents of a cell within the sheet or workbook. It is extremely useful when working with large set of data source. +Find is used to select the matched contents of a cell within sheet or workbook. It is extremely useful when working with large sets of data source. **User Interface**: Find can be done by any of the following ways: -* Select the Search icon in the Ribbon toolbar or use `Ctrl + F` key to open the Find dialog. -* Use find Next and find Previous buttons to search the given value in the workbook. -* Select the option button in Find dialog to open the Find and Replace dialog. Then, select the below properties for enhanced searching. +* Select the Search icon in the Ribbon toolbar or using `Ctrl + F` key to open the Find dialog. +* Using find Next and find Previous buttons to search the given value in workbook. +* Select the option button in Find dialog to open the Find and Replace dialog then select the below properties for enhanced searching. > * `Search within`: To search the target in a sheet (default) or in an entire workbook. > * `Search by`: It enhance the search, either By Rows (default), or By Columns. > * `Match case`: To find the matched value with case sensitive. > * `Match exact cell contents`: To find the exact matched cell value with entire match cases. -* Using [`find()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#find) method to perform find operation. +* Using [`find`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#find) method to perform find operation. ## Replace -Replace feature is used to change the find contents of a cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook. +Replace is used to change the find contents of a cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook. **User Interface**: Replace can be done by any of the following ways: -* Use `Ctrl + H` key to open the Find and Replace dialog. -* Use Replace button to change the found value in sheet or workbook. -* Using Replace All button, all the matched criteria can be replaced with find value based on sheet or workbook. -* Using [`replace()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`. -* Using [`replace()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`. +* Using `Ctrl + H` key to open the Find and Replace dialog. +* Using Replace button to change the found value in sheet or workbook. +* Using ReplaceAll button to change all the found value's in sheet or workbook. +* Using [`replace`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`. +* Using [`replace`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`. ## Go to -Go to feature is used to navigate to a specific cell address in the sheet or workbook. +Go to is used to navigate to a specific cell address in the sheet or workbook. **User Interface**: -* Use `Ctrl + G` key to open the Go To dialog. -* Use [`goTo()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#goto) method to perform Go To operation. +* Using `Ctrl + G` key to open the Go To dialog. +* Using [`goTo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#goto) method to perform Go To operation. In the following sample, searching can be done by following ways: @@ -77,7 +77,9 @@ In the following sample, searching can be done by following ways: ## Limitations * Undo/redo for Replace All is not supported in this feature. +* Replace All functionality is not restricted to selected range of cells. +* Find and Replace in Formulas, Notes not supported. ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. \ No newline at end of file +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/selection.md b/Document-Processing/Excel/Spreadsheet/Angular/selection.md index a0d47c6508..5a4f55434e 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/selection.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/selection.md @@ -2,26 +2,30 @@ layout: post title: Selection in Angular Spreadsheet component | Syncfusion description: Learn here all about Selection in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Selection +platform: document-processing documentation: ug --- # Selection in Angular Spreadsheet component -Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. To enable selection, set `mode` as `Single` | `Multiple` in [`selectionSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#selectionsettings). If you set `mode` to `None`, it disables the UI selection. +Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. -> * The default value for `mode` in `selectionSettings` is `Multiple`. +To configure selection, use the [`selectionSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#selectionsettings) property: +* `mode = "Single"` → allows selecting only one cell, row, or column at a time. +* `mode = "Multiple"` → allows selecting multiple cells, rows, or columns at once. +* `mode = "None"` → disables UI selection completely. -You have the following options in Selection, +> The default value for `mode` is `Multiple`. -* Cell selection -* Row selection -* Column selection +You can perform: +* Cell selection – highlight individual cells. +* Row selection – highlight entire rows. +* Column selection – highlight entire columns. ## Cell selection -Cell selection is used to select a single or multiple cells. It can be performed using the [`selectRange`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#selectrange) method. +Cell selection is used to select a single or multiple cells. It can be performed using the [`selectRange`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#selectrange) method. **User Interface**: @@ -71,7 +75,7 @@ You can perform column selection in any of the following ways, * To select non-adjacent columns, hold `Ctrl` and select the column header. * You can also use the `selectRange` method for row selection. -The following sample shows the column selection in the spreadsheet, here selecting the 3rd column using the `selectRange` method. +The following sample shows the column selection in the spreadsheet, here selecting the 3rd column using the `selectRange` method. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -87,7 +91,9 @@ The following sample shows the column selection in the spreadsheet, here selecti ## Get selected cell values -You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. You can also programmatically perform selections using the [selectRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#selectrange) method. This selection behavior is controlled by the [selectionSettings](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#selectionsettings) property. Finally, you can retrieve the selected cell values as a collection using the [getData](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#getdata) method. +You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. Additionally, you can also programmatically perform selection using the [selectRange](https://helpej2.syncfusion.com/angular/documentation/api/spreadsheet#selectrange) method. This selection behavior is controlled based on the [selectionSettings](https://helpej2.syncfusion.com/angular/documentation/api/spreadsheet#selectionsettings) property. Now, retrieving the selected cell values as a collection is achievable using the [getData](https://helpej2.syncfusion.com/angular/documentation/api/spreadsheet#getdata) method. + +Below is a code example demonstrating how to retrieve the selected cell values as a collection programmatically: {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -101,9 +107,9 @@ You can select single or multiple cells, rows, or columns using mouse and keyboa {% previewsample "/document-processing/samples/spreadsheet/angular/selected-cell-values" %} -## Remove Selection +## Remove selection -The following sample shows, how to remove the selection in the spreadsheet. Here changing the `mode` as `None` in [`selectionSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#selectionsettings) to disable's the UI selection. +The following sample shows, how to remove the selection in the spreadsheet. Here changing the `mode` as `None` in [`selectionSettings`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#selectionsettings) to disable's the UI selection. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -123,4 +129,4 @@ The following sample shows, how to remove the selection in the spreadsheet. Here ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. \ No newline at end of file +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md new file mode 100644 index 0000000000..1ca888caed --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Deploy Spreadsheet Server to Azure App Service using CLI | Syncfusion +description: Learn how to deploy the Syncfusion Spreadsheet Server Docker image to Azure App Service using Azure CLI. +control: How to deploy Spreadsheet Server Docker Image to Azure App Service using Azure CLI +platform: document-processing +documentation: ug +--- + +# Deploy Spreadsheet Docker to Azure App Service using Azure CLI + +## Prerequisites + +* `Docker` installed on your machine (Windows, macOS, or Linux). +* `Azure CLI` installed based on your operating system. [Download Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli) +* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access. +* The [`Spreadsheet Server Docker image`](https://hub.docker.com/r/syncfusion/spreadsheet-server) available. + +## Deploy to Azure App Service using Azure CLI + +**Step 1:** Log in to Azure + +Open your terminal and sign in to Azure using the command below. This authenticates your CLI with Azure. + +```bash +az login +``` + +**Step 2:** Create a resource group + +Create a resource group with the following command in your preferred location. + +```bash +az group create --name < your-app-name> --location +``` + +**Step 3:** Create an app service plan + +Create a resource group with the following command in your preferred location. + +```bash +az appservice plan create --name --resource-group < your-resource-group> --sku S1 --is-linux +``` + +This creates an App Service plan in the standard pricing tier (S1) and ensures it runs on Linux containers with the --is-linux flag. + +**Step 4:** Create the docker-compose.yml file + +Define your container configuration in a docker-compose.yml file. This file specifies the container name, image, and environment variables for the Spreadsheet Server: + +```bash +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server + environment: + + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:8080" + +``` + +Note: Replace YOUR_LICENSE_KEY with your valid Syncfusion license key. + +**Step 5:** Create a Docker compose app + +Deploy the containerized app to Azure App Service using the following command. + +```bash +az webapp create --resource-group --plan < your-app-service-plan> --name --multicontainer-config-type compose --multicontainer-config-file docker-compose.yml +``` + +This command creates a web app that runs your Spreadsheet Server Docker container using the configuration defined in the docker-compose.yml file. + +**Step 6:** Browse your app + +Once deployed, your app will be live at https://XXXXXXXXXX.azurewebsites.net. + +![azure cli](../images/azure-cli.png) + +**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints: +``` +openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" +saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save +``` +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) + +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md new file mode 100644 index 0000000000..48fdc9810f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md @@ -0,0 +1,137 @@ +--- +layout: post +title: Deploy Spreadsheet Docker to AWS EKS Cluster | Syncfusion +description: Learn how to deploy the Syncfusion Spreadsheet server Docker image to AWS EKS and connect it to the Angular Spreadsheet component. +control: How to deploy spreadsheet server to AWS EKS using Docker +platform: document-processing +documentation: ug +--- + +# How to deploy spreadsheet server to AWS EKS Cluster + +## Prerequisites + +* `AWS account` and [`AWS CLI`](https://aws.amazon.com/cli/) installed and configured. +* [`kubectl`](https://kubernetes.io/docs/tasks/tools/) installed and configured. +* Access to an existing EKS cluster, or you can create one via the AWS console or CLI. +* Docker installed if you plan to build and push a custom image. + +**Step 1:** Configure your environment +* Open a terminal and authenticate to AWS + +```bash + +aws configure # enter your Access Key, Secret Key, region, and output format (e.g., json) + +``` +* Update your kubectl context to point to the EKS cluster: + +```bash + +aws eks update-kubeconfig --region --name + +``` +* After updating the [`kubeconfig`](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/) with the EKS cluster, you can verify the node’s state. + +```bash + +kubectl get nodes # verify that your cluster nodes are ready + +``` + +**Step 2:** Create the Deployment +Create a file named spreadsheet-deployment.yaml defining a deployment for the Syncfusion® container. The container listens on port `8080`: + +```yaml + +apiVersion: apps/v1 +kind: Deployment +metadata: + name: spreadsheet-server + labels: + app: spreadsheet-server +spec: + replicas: 1 # Increase to 2 or more for higher availability + selector: + matchLabels: + app: spreadsheet-server + template: + metadata: + labels: + app: spreadsheet-server + spec: + containers: + - name: spreadsheet-server + image: syncfusion/spreadsheet-server:latest + ports: + - containerPort: 8080 + env: + - name: SYNCFUSION_LICENSE_KEY + value: "YOUR_LICENSE_KEY" + +``` + +> If you build a custom image, push it to Docker Hub or AWS ECR and update `image:` field accordingly. + +**Step 3:** Expose the Service +Create a `spreadsheet-service.yaml` to define a Service of type `LoadBalancer` that forwards traffic to the container. Customize the external port (5000) as needed; the internal `targetPort` should remain 8080 because the container listens on that port. + +```yaml + +apiVersion: v1 +kind: Service +metadata: + name: spreadsheet-server-service +spec: + selector: + app: spreadsheet-server + type: LoadBalancer + ports: + - protocol: TCP + port: 5000 # External port exposed by the load balancer + targetPort: 8080 # Internal container port + +``` + +**Step 4:** Deploy to EKS +* Apply the manifests: + +```bash + +kubectl apply -f spreadsheet-deployment.yaml +kubectl apply -f spreadsheet-service.yaml + +``` + +* Use the kubectl get pods command to monitor pod status. To retrieve the external address, run: + +```bash + +kubectl get svc spreadsheet-server-service + +``` + +* Retrieve the external address from the Service output. Use `https://` only if the Load Balancer is configured with TLS (use ACM for certificates). + +**Step 5:** Configure the Angular client + +Start by following the steps provided in this [link](../getting-started.md) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) properties of your Angular Spreadsheet component: + +```ts + + +``` + +> Use `https://` if your Load Balancer has TLS configured. + +**Step 6:** Scaling and customization +- `Scale replicas:` To handle a higher workload, you can scale your deployment by increasing the replicas count in your `spreadsheet-deployment.yaml` file and then run `kubectl apply -f spreadsheet-deployment.yaml` to apply the changes. Kubernetes will automatically manage the distribution of traffic across the pods. +- `Resource limits:` Define `resources.requests`, and `resources.limits` in the container spec to allocate CPU and memory appropriately. +- `Environment variables:` In addition to SYNCFUSION_LICENSE_KEY, you can set other configuration keys (e.g., culture) using the env: section in the deployment manifest without modifying the docker image. + +For more information on deploying Spreadsheet docker image in Amazon EKS kindly refer to this [`Blog`](https://www.syncfusion.com/blogs/post/spreadsheet-server-eks-deployment) + +## See Also +* [Docker Image Overview in Angular Spreadsheet](./spreadsheet-server-docker-image-overview) +* [Publish Spreadsheet Server to Azure App Service using Visual Studio](./publish-spreadsheet-server-to-azure-using-visual-studio) +* [Deploy Spreadsheet Docker to Azure App Service using Azure CLI](./deploy-spreadsheet-docker-to-azure-using-azure-cli) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md new file mode 100644 index 0000000000..1c50b61223 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md @@ -0,0 +1,57 @@ +--- +layout: post +title: Deploy Spreadsheet Server to Azure App Service via VS | Syncfusion +description: Learn how to publish the Syncfusion Spreadsheet Server Web API to Azure App Service using Visual Studio. +control: How to publish Spreadsheet Server in Azure App Service using Visual Studio +platform: document-processing +documentation: ug +--- + +# Publish Spreadsheet Server to Azure App Service using Visual Studio + + +## Prerequisites + +* `Visual Studio 2022` or later is installed. +* [`.NET 8.0 SDK`](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later installed. +* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access. +* The [`Spreadsheet Web API project`](https://github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/tree/main/WebAPI) repository cloned locally. + +Make sure you build the project using the Build > Build Solution menu command before following the deployment steps. + +## Publish to Azure App Service + +**Step 1:** In Solution Explorer, right-click the project and click Publish (or use the Build > Publish menu item). + +![azure publish ](../images/azure_publish.png) + +**Step 2:** In the Pick a publish target dialog box, select Azure as deployment target. + +![azure target ](../images/azure_target.png) + +**Step 3:** After selecting Azure, choose Azure App Service under the target options. + +![azure app service](../images/azure_app_service.png) + +**Step 4:** Select Publish. The Create App Service dialog box appears. Sign in with your Azure account, if necessary, and then the default app service settings populate the fields. + +![azure credentials](../images/azure_credentials.png) + +**Step 5:** Select Create. Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser with the app name at, +``` +http://.azurewebsites.net +``` + +![azure_published_window](../images/azure_published_window.png) + +**Step 6:** Once the deployment process is complete, The deployed API will be live at the following URL: +https://XXXXXXXXXX.azurewebsites.net + +**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints: +``` +openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" +saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save +``` +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) + +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md new file mode 100644 index 0000000000..d73eb69897 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md @@ -0,0 +1,101 @@ +--- +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 +documentation: ug +--- + +# Docker Image Overview in Angular Spreadsheet + +The [**Syncfusion® 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. + +This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet back-end functionalities. This server-side Web API project targets ASP.NET Core 8.0. + +You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker). + +The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms. + +## Prerequisites + +Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment: + +* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). +* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/). + +## How to deploy the Spreadsheet Docker Image + +**Step 1:** Pull the spreadsheet-server image from Docker Hub. + +```console +docker pull syncfusion/spreadsheet-server +``` + +**Step 2:** Create the `docker-compose.yml` file with the following code in your file system. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:8080" +``` + +**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file. + +**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following: + +```console +docker-compose up +``` + +Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`. + +**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) + +```ts +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' +import { Component } from '@angular/core'; + +@Component({ +imports: [ + SpreadsheetAllModule + ], + +standalone: true, + selector: 'app-root', + template: '' +}) +export class AppComponent { } +``` + +## How to configure different cultures using a Docker compose file + +By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + # Specify the culture to configure for the Spreadsheet server + LC_ALL: de_DE.UTF-8 + LANGUAGE: de_DE.UTF-8 + LANG: de_DE.UTF-8 + ports: + - "6002:8080" +``` + +Please refer to these getting started pages to create a Spreadsheet in [`Javascript`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/getting-started), [`Angular`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started), [`Vue`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started), [`ASP.NET Core`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core), and [`ASP.NET MVC`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/getting-started-mvc). \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/sort.md b/Document-Processing/Excel/Spreadsheet/Angular/sort.md index be0aba9326..eaee947eb8 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/sort.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/sort.md @@ -2,38 +2,36 @@ layout: post title: Sort in Angular Spreadsheet component | Syncfusion description: Learn here all about Sort in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Sort +platform: document-processing documentation: ug --- # Sort in Angular Spreadsheet component -Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowsorting) property to enable or disable sorting functionality. +Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowsorting) property to enable or disable sorting functionality. > * The default value for `allowSorting` property is `true`. By default, the `sort` module is injected internally into Spreadsheet to perform sorting. -## Sort by cell value - -In the active Spreadsheet, select a range of cells to sort by cell value. The range sort can be done by any of the following ways: -* Select the sort item in the Ribbon toolbar and choose the ascending or descending item. -* Right-click the sheet, select the sort item in the context menu and choose the ascending/descending item. -* Use the [`sort()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sort) method programmatically. +## Sort by Cell value -The cell values can be sorted in the following orders: -* Ascending -* Descending +In the active Spreadsheet, you can sort a selected range of cells by their values. Sorting can be done in following ways: -> * Ascending is the default order for sorting. +* **Ribbon Toolbar** – Select the sort option under the Ribbon toolbar and choose ascending or descending. +* **Context Menu** – Right-click the sheet, select the sort option, and choose ascending or descending. +* **Programmatically** – Use the [`sort`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sort) method. -The `sort()` method with empty arguments will sort the selected range by active cell’s column as sort column in ascending order. +The cell values can be sorted in the following orders: +* **Ascending** – Default order for sorting. +* **Descending** – Reverse order. +When the `sort` method is called with empty arguments, the selected range is sorted by the active cell’s column in ascending order. -> * The [`beforeSort`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforesort) event will be triggered before sorting the specified range. -> * The [`sortComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sortcomplete) event will be triggered after the sort action is completed successfully. +> * The [`beforeSort`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#beforesort) event will be triggered before sorting the specified range. +> * The [`sortComplete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sortcomplete) event will be triggered after the sort action is completed successfully. -The following code example shows `sort` functionality in the Spreadsheet control. +The following code example demonstrates the `sort` functionality in the Spreadsheet control. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -49,15 +47,15 @@ The following code example shows `sort` functionality in the Spreadsheet control ## Data contains header -You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#containsheader) property to `true` and pass it as `sortOption` arguments of the sort() method. +You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#containsheader) property to `true` and pass it as `sortOption` arguments of the sort method. > * If the `containsHeader` property is not set and active cell column’s first cell value type is differed from the second cell value type, the first row data in the range are marked as column headers. You can also enable or disable this property using `beforeSort` event arguments, -```typescript +```ts - beforeSort (args) { + const beforeSort = (args: BeforeSortEventArgs): void => { args.sortOptions.containsHeader = true; } @@ -65,21 +63,20 @@ You can also enable or disable this property using `beforeSort` event arguments, In the custom sort dialog, the `Data contains header` checkbox is checked on load. Thus, the default value for `containsHeader` is `true` in custom sort dialog. -## Case sensitive sort - -The default sort functionality of Spreadsheet is a case insensitive sorting. When you want to perform sorting with case sensitive, you need to set the [`caseSensitive`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#casesensitive) property to `true` and pass it as `sortOption` arguments of the sort() method. +## Case Sensitive sort -Case sensitive sorting is applicable only for cells with alphabets. In ascending order sorting with case sensitive enabled, the cells with lower case text will be placed above the cells with upper case text. +By default, sorting in the Spreadsheet is **case insensitive**. To perform sorting with case sensitivity, set the [`caseSensitive`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#casesensitive) property to `true` and pass it as part of the `sortOption` arguments in the `sort` method. +* Case sensitive sorting applies only to cells containing alphabets. +* In ascending order with case sensitivity enabled, cells with lowercase text appear above cells with uppercase text. > * The default value for the `caseSensitive` property is `false`. You can also enable or disable this property using `beforeSort` event arguments, -```typescript - - beforeSort (args) { +```ts + const beforeSort = (args: BeforeSortEventArgs): void => { args.sortOptions.caseSensitive = true; - } + } ``` @@ -89,22 +86,27 @@ In the custom sort dialog, the `Case sensitive` checkbox is unchecked on load as When you want to perform sorting on multiple columns, it can be done by any of the following ways: * Select the `Custom sort…` menu item from the Ribbon toolbar item or context menu item. -* Use the `sort()` method programmatically by providing sort criteria. +* Use the `sort` method programmatically by providing sort criteria. > * The current sorting functionality supports sorting based on cell values only. -### Custom sort dialog +### Custom Sort Dialog -The custom sort dialog helps sorting multiple columns in the selected range by utilizing the rich UI. This dialog will be appeared while choosing the `Custom sort…` from the Ribbon item or context menu item. By default, sort criteria with the first column name from the selected range will be appeared in the dialog on initial load and it cannot be removed. +The custom sort dialog allows sorting multiple columns in a selected range using a rich UI. This dialog appears when you choose `Custom sort…` from the Ribbon or context menu. + +* By default, the dialog shows sort criteria with the first column name from the selected range. This initial criterion cannot be removed. +* You can add more criteria using the `Add Column` button at the bottom of the dialog. Each criterion can have its own sort order. +* Newly added criteria can be removed using the `delete` icon next to each item. -You can add multiple criteria using the `Add Column` button at the bottom of the dialog. Thus, multiple columns can be specified with different sort order. The newly added sort criteria items can be removed using the `delete` icons at the end of each items. +* **Data contains header** – Refer to the [Data contains header](./sort#data-contains-header) topic for details about the checkbox. +* **Case sensitive** – Refer to the [Case sensitive sort](./sort#case-sensitive-sort) topic for details about the checkbox. -You can refer to the [`Data contains header`](./sort#data-contains-header) topic to learn more about `Data contains header` checkbox. To learn more about `Case sensitive` checkbox, you can refer to [`Case sensitive sort`](./sort#case-sensitive-sort) topic. +This dialog makes it easy to sort complex datasets by multiple columns with clear, customizable options. ### Passing sort criteria manually -The multi-column sorting can also be performed manually by passing sort options to the `sort()` method programmatically. The `sortOption` have the following arguments: -* [`sortDescriptors`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sortdescriptors) – Sort criteria collection that holds the collection of field name, sort order, and [`sortComparer`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sortcomparer). +The multi-column sorting can also be performed manually by passing sort options to the `sort` method programmatically. The `sortOption` have the following arguments: +* [`sortDescriptors`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sortdescriptors) – Sort criteria collection that holds the collection of field name, sort order, and [`sortComparer`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sortcomparer). * `containsHeader` – Boolean argument that specifies whether the range has headers in it. * `caseSensitive` – Boolean argument that specifies whether the range needs to consider case. @@ -125,7 +127,7 @@ The multi-column sorting can also be performed manually by passing sort options ## Custom sort comparer -The [`sortDescriptor`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sortdescriptor) holds the [`sortComparer`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function. +The [`sortDescriptor`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sortdescriptor) holds the [`sortComparer`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function. By customizing sort comparer, you can define the sort action as desired. @@ -134,10 +136,14 @@ By customizing sort comparer, you can define the sort action as desired. For custom sort comparer example, refer to the [`Sort a range by custom list`] below. ### Sort a range by custom list - You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`. -In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`. +For example, in the demo below, the `Trustworthiness`column is sorted according to the custom list values: +* `Perfect` +* `Sufficient` +* `Insufficient` + +This approach lets you control the order of sorting beyond the default ascending or descending options, making it easier to arrange data according to personalized or domain-specific criteria. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -151,7 +157,6 @@ In the following demo, the `Trustworthiness` column is sorted based on the custo {% previewsample "/document-processing/samples/spreadsheet/angular/custom-sort-cs1" %} - ## Known error validations The following errors have been handled for sorting, @@ -164,13 +169,14 @@ The following errors have been handled for sorting, ## Limitations * Sorting is not supported with formula contained cells. +* Sort by color is not supported. ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/bootstrap5/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also -* [Hyperlink](./link) -* [Filtering](./filter) -* [Undo Redo](./undo-redo) +* [Hyperlink](../spreadsheet/link) +* [Filtering](../spreadsheet/filter) +* [Undo Redo](../spreadsheet/undo-redo) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/suspend-resume.md b/Document-Processing/Excel/Spreadsheet/Angular/suspend-resume.md index d63701acc5..8cbfcaff27 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/suspend-resume.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/suspend-resume.md @@ -46,7 +46,7 @@ Execute the actions you want to apply. The Spreadsheet model is updated, but the Call `resumeRefresh` after all operations are complete. The Spreadsheet then renders all accumulated changes in a single refresh. -#### Example pattern +### Example pattern ```js let spreadsheet; diff --git a/Document-Processing/Excel/Spreadsheet/Angular/template.md b/Document-Processing/Excel/Spreadsheet/Angular/template.md index a7c9d873bf..d4d41c1fda 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/template.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/template.md @@ -2,20 +2,33 @@ layout: post title: Template in Angular Spreadsheet component | Syncfusion description: Learn here all about Template in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Template +platform: document-processing documentation: ug --- # Template in Angular Spreadsheet component -Cell Template is used for adding HTML elements into Spreadsheet. You can add the cell template in spreadsheet by using the `template` property and specify the address using the `address` property inside the `ranges` property. You can customize the Html elements similar to Syncfusion® components (TextBox, DropDownList, RadioButton, MultiSelect, DatePicker etc) by using the `beforeCellRender` event. In this demo, Cell template is applied to `C2:C9` and instantiated with Html input components like TextBox, RadioButton, TextArea. You need to bind the events to perform any operations through HTML elements or Syncfusion® components. Here, we have added `change` event in to the MultiSelect control, and we have updated the selected data into the spreadsheet cell through that change event. +Cell templates allow you to embed HTML elements and Syncfusion® components directly into spreadsheet cells. This enables rich, interactive data entry experiences beyond standard cell values. + +## Key Features + +- **HTML Elements** – You can add TextBox, RadioButton, TextArea, and other HTML controls to cells for enhanced user input options +- **Syncfusion Components** – You can integrate DropDownList, MultiSelect, DatePicker, and other Syncfusion controls for advanced data entry +- **Event Binding** – You can attach event handlers to perform operations on user interaction and update spreadsheet data +- **Custom Rendering** – You can use the `beforeCellRender` event for advanced customization and dynamic template modifications + +## Cell Templates + +Define a cell template using the `template` property and specify the target range with the `address` property within the `ranges` configuration. This associates your template with specific cells in the spreadsheet. + +The `beforeCellRender` event fires before template rendering, allowing you to customize HTML elements and Syncfusion components dynamically based on cell address, data, or application state. The following sample describes the above behavior. -Sample link: [`Cell template`](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/cell-template) +Sample link: [`Cell template`](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/tailwind3/spreadsheet/cell-template) - +{% previewsample "/document-processing/samples/spreadsheet/angular/template-cs1" %} ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also -* [Filtering](./filter) -* [Sorting](./sort) -* [Hyperlink](./link) \ No newline at end of file +* [Worksheet](./worksheet) +* [Rows and columns](./rows-and-columns) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/troubleshooting/http-413-entity-too-large.md b/Document-Processing/Excel/Spreadsheet/Angular/troubleshooting/http-413-entity-too-large.md new file mode 100644 index 0000000000..e7aad96e2b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/troubleshooting/http-413-entity-too-large.md @@ -0,0 +1,55 @@ +--- +layout: post +title: HTTP 413 error in Angular Spreadsheet component | Syncfusion +description: Resolve the HTTP 413 'Entity too large' error when exporting large Excel files from Angular Spreadsheet by increasing server request limits. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Troubleshoot HTTP 413 "Entity too large" error + +Sometimes, when exporting the Spreadsheet with a large dataset, an `Entity too large` issue may occur. This is related to an HTTP request attempting to receive a large amount of data. To resolve this, configure your server to handle larger data transfers. + +## Solutions + +To resolve this, configure your local Web API back-end to accept larger request bodies. Add the following settings to increase the allowed request size: + +### Step 1: Update web.config (Server-side) + +Add or update the `requestLimits` configuration in your WebAPI's `web.config` file to increase the maximum allowed content length: + +```xml + + + + + + + + + + +``` + +### Step 2: Update Program.cs (Server-side) + +Configure the Form Options in your `Program.cs` to handle larger form submissions: + +```csharp +builder.Services.Configure(options => +{ + options.ValueLengthLimit = int.MaxValue; // or set a custom larger value + options.KeyLengthLimit = int.MaxValue; + options.MultipartBodyLengthLimit = long.MaxValue; +}); +``` + +Additionally, we recommend setting the `isFullPost` property to `false` in the `beforeSave` event when exporting large Excel files. When `isFullPost` is `false`, to mitigate Spreadsheet can lead to performance issues such as timeouts or delays, particularly due to the size and complexity during export. See the `isFullPost` [documentation]((https://help.syncfusion.com/document-processing/excel/spreadsheet/Angular/performance-best-practices#handling-large-file-saves-with-isfullpost-option) ) for details. + +## See Also + +* [Performance Best Practices](../performance-best-practices) +* [Open excel files](../open-excel-files.md) +* [Save Excel files](../save-excel-files.md) +* [Web Service](../web-services/webservice-overview.md) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/troubleshooting/spreadsheet-double-header.md b/Document-Processing/Excel/Spreadsheet/Angular/troubleshooting/spreadsheet-double-header.md new file mode 100644 index 0000000000..cc7b637436 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/troubleshooting/spreadsheet-double-header.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Double header issue in Angular Spreadsheet component | Syncfusion +description: Resolve duplicate or misplaced header caused by multiple refresh/resize actions in Angular Spreadsheet component. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Double Header Rendering Issue in Angular Spreadsheet Component + +In some scenarios, the Spreadsheet header appears twice or is rendered below the data instead of at the top. This typically occurs when multiple refresh or resize actions are triggered simultaneously or in rapid succession. + +**Common cause:** +```js + this.spreadsheet.refresh(); + this.spreadsheet.resize(); // Multiple operations queued without waiting +``` + +The image below illustrates the double header rendering issue: + +![Double header example](../images/image.png) + +--- +## Troubleshooting checklist (in order) + +Follow these steps in order to diagnose and fix the double-header issue: + +1. **Ensure only one refresh/resize at a time:** Avoid triggering multiple `refresh()` or `resize()` actions simultaneously or before previous operations complete. + +2. **Avoid refresh in rapid UI updates:** Do not call `refresh()` during frequent UI updates, loops, or multiple event triggers. + +3. **Use lifecycle events carefully:** Use event handlers (`created`, `actionComplete`, etc.) without redundant `refresh()` or `resize()` calls. + +4. **Verify package version:** Ensure you are using the latest version of the Spreadsheet package. Known issues related to double headers may already be resolved in newer versions. + +5. **Initialization & mounts:** Ensure the Spreadsheet component is initialized only once and that no duplicate mounts occur in your application. + +6. **Inspect frozen panes and merged cells:** If your Spreadsheet uses frozen panes, hidden rows, or merged cells, verify these features aren't interfering with header rendering. + +7. **Inspect CSS/layout issues:** Use browser developer tools to inspect and rule out CSS-related issues (position, z-index, transforms) that may visually duplicate or misplace the header. + +--- + +## See Also + +* [Performance Best Practices](../performance-best-practices) +* [Resize handling](../mobile-responsiveness) +* [Freeze panes](../freeze-pane) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/ui-customization.md b/Document-Processing/Excel/Spreadsheet/Angular/ui-customization.md new file mode 100644 index 0000000000..1e73f6b40c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/ui-customization.md @@ -0,0 +1,106 @@ +--- +layout: post +title: UI Customization in Angular Spreadsheet component | Syncfusion +description: Learn here how to customize and manage the user interface in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# User Interface Customization + +The Syncfusion Angular Spreadsheet component provides options to customize the user interface and control the behavior of its UI components. + +You can control the ribbon tabs, toolbar items, context menu, and overall appearance. Use these options to show, hide, or modify UI elements and attach custom behavior. + +## Create Custom Ribbon Tabs and Items + +The Syncfusion Angular Spreadsheet component lets you create your own ribbon tabs and add custom items inside them. + +You can create a new tab using the [addRibbonTabs](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addribbontabs) method. With this, you can create a separate tab where you place the actions and features that you want. You can also add custom items inside these tabs. Each item can run your own functionality, allowing you to perform any action you need. + +The following code sample shows how to create custom ribbon tabs and groups. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1" %} + +## Add Toolbar Items + +The Syncfusion Angular Spreadsheet component allows you to extend the Ribbon by adding custom toolbar items. You can make Toolbar items to execute custom actions. + +To add these items, the component provides the [addToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addtoolbaritems) method, which lets you insert new tools into a chosen tab. This makes it simple to include your own actions. You can add items to an existing tab or you can include them as part of a new Ribbon tab. + +Additionally, you can enhance the visual appearance of ribbon items by adding icons to the custom toolbar items using prefixIcon and suffixIcon properties of [ToolbarItemModel](https://ej2.syncfusion.com/angular/documentation/api/toolbar/itemmodel). This helps users quickly identify and access the features they need. + +The following code sample shows how to add toolbar items. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/angular/add-toolbar-items-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/angular/add-toolbar-items-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1" %} + +## Hide or Show Ribbon Tabs and Items + +The Syncfusion Angular Spreadsheet component allows you to hide or show ribbon tabs and toolbar items. This helps you create a simple and clean user interface by showing only the tools that are needed. + +You can hide any ribbon tab by using the [hideRibbonTabs](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hideribbontabs) method. You can hide toolbar items using the [hideToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hidetoolbaritems) method, where the items are hidden based on their index in the tab. + +The following code sample shows how to hide or show ribbon items. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/show-or-hide-ribbon-items-cs1" %} + +## Enable or Disable Ribbon Tabs and Items + +The Syncfusion Angular Spreadsheet component lets you enable or disable ribbon tabs and toolbar items when needed. You can enable or disable ribbon tabs by using the [enableRibbonTabs](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enableribbontabs) method. To enable or disable specific toolbar items inside a ribbon tab, use the [enableToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enabletoolbaritems) method. +These methods accept an array of ribbon tab names or toolbar item IDs along with a boolean value. Set the value to true to enable or false to disable the items. + +The following code sample shows how to enable or disable a ribbon tab and toolbar items. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/enable-or-disable-ribbon-items-cs1" %} + +## Note + +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. + +## See Also + +* [Worksheet](./worksheet) +* [Rows and columns](./rows-and-columns) +* [Cell templates](./user-interface-customization/custom-cell-templates) +* [Context menu customization](./user-interface-customization/customize-context-menu) +* [File menu customization](./user-interface-customization/customize-filemenu) +* [Theming-and-styling](./user-interface-customization/theming-and-styling) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/undo-redo.md b/Document-Processing/Excel/Spreadsheet/Angular/undo-redo.md index 2af1a08920..974bcdb070 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/undo-redo.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/undo-redo.md @@ -2,38 +2,59 @@ layout: post title: Undo redo in Angular Spreadsheet component | Syncfusion description: Learn here all about Undo redo in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Undo redo +platform: document-processing documentation: ug --- # Undo redo in Angular Spreadsheet component -`Undo` option helps you to undone the last action performed and `Redo` option helps you to do the same action which is reverted in the Spreadsheet. You can use the [`allowUndoRedo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#allowundoredo) property to enable or disable undo redo functionality in spreadsheet. +The Undo and Redo functionality allows you to reverse or restore actions performed in the Spreadsheet. `Undo` reverses the last action you performed, while `Redo` restores an action that was previously undone. This feature is essential for efficient data entry and editing, allowing users to experiment with changes without lose of work. + +You can enable or disable undo redo functionality using the [`allowUndoRedo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowundoredo) property. > * The default value for `allowUndoRedo` property is `true`. By default, the `UndoRedo` module is injected internally into Spreadsheet to perform undo redo. +## Supported Operations in Undo/Redo + +The following operations are automatically recorded and can be undone/redone: + +| Operation | Explanation | +|-----------|------------| +| `Cell Edits` | • Restores values, formulas, and formatting to previous state
• Preserves cell dependencies and references
• Reverts wrapping and hyperlink changes | +| `Copy/Paste` | • Undoes pasted content including ranges, images, and shapes
• Restores original cell state before paste
• Maintains external metadata and clipboard history | +| `Insert/Delete` | • Restores deleted rows, columns, or sheets
• Re-applies or removes insertions
• Automatically updates all affected references | +| `Hide/Show` | • Toggles visibility state back to previous condition
• Restores hidden/visible row or column layout | +| `Resize` | • Reverts row height and column width to original dimensions
• Restores layout and visual alignment | +| `Merge/Unmerge` | • Restores merged cell state or unmerges previously merged cells
• Preserves cell content and formatting | +| `Autofill` | • Reverts generated data series to original cells
• Restores conditional formatting variants | +| `Sort` | • Restores original row order after sort
• Maintains data integrity for multi-row sorts
• Preserves cell references and dependencies | +| `Notes/Comments` | • Removes added notes or restores deleted comments
• Reverts comment edits to previous text | +| `Conditional Formatting` | • Removes applied rules or restores deleted rules
• Reverts condition modifications | +| `Data Validation` | • Removes validation rules or restores deleted rules
• Reverts validation criteria changes | +| `Charts & Images` | • Removes inserted charts or images
• Restores deleted charts or images
• Reverts anchor position and properties | + ## Undo It reverses the last action you performed with Spreadsheet. Undo can be done by any of the following ways: -* Select the undo item from HOME tab in Ribbon toolbar. +* Select the undo item from **HOME** tab in Ribbon toolbar. * Use `Ctrl + Z` keyboard shortcut to perform the undo. -* Use the [`undo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#undo) method programmatically. +* Use the [`undo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#undo) method programmatically. ## Redo It reverses the last undo action you performed with Spreadsheet. Redo can be done by any of the following ways: -* Select the redo item from HOME tab in Ribbon toolbar. +* Select the redo item from **HOME** tab in Ribbon toolbar. * Use `Ctrl + Y` keyboard shortcut to perform the redo. -* Use the [`redo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#redo) method programmatically. +* Use the [`redo`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#redo) method programmatically. ## Update custom actions in UndoRedo collection -You can update your own custom actions in UndoRedo collection, by using the [`updateUndoRedoCollection`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#updateundoredocollection) method. And also customize the undo redo operations of your custom action by using `actionComplete` event. +You can update your own custom actions in UndoRedo collection, by using the [`updateUndoRedoCollection`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#updateundoredocollection) method. And also customize the undo redo operations of your custom action by using `actionComplete` event. The following code example shows `How to update and customize your own actions for undo redo` functionality in the Spreadsheet control. @@ -51,7 +72,7 @@ The following code example shows `How to update and customize your own actions f ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/custom-cell-templates.md b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/custom-cell-templates.md new file mode 100644 index 0000000000..efca920638 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/custom-cell-templates.md @@ -0,0 +1,28 @@ +--- +layout: post +title: Custom templates in angular spreadsheet component | syncfusion +description: Learn here how to add custom templates to show icons or controls in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Create Custom Cell Templates + +The Syncfusion Angular Spreadsheet component lets you display custom templates inside cells.You can insert icons, labels, buttons, or any custom templates. This is useful when you need custom functionality inside cells. You can add templates to cells by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell. + +The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell. + +The following code sample shows how to create custom cell templates. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/customize-context-menu.md b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/customize-context-menu.md new file mode 100644 index 0000000000..fb01211fec --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/customize-context-menu.md @@ -0,0 +1,67 @@ +--- +layout: post +title: Context menu item in Angular Spreadsheet component | Syncfusion +description: Learn here how to customize the context menu by adding or hiding items in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Customize Context Menu + +The Syncfusion Angular Spreadsheet component provides an easy way to customize the context menu. You can add custom menu items, hide default items, or change what happens when a user selects a menu option. This giving access to useful actions. You can perform the following context menu customization options in the spreadsheet + +* Add Context Menu Items +* Remove Context Menu Items +* Enable/Disable Context Menu Items + +## Add Context Menu Items + +You can add custom items to the context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#addcontextmenuitems) event. Since multiple context menus are available, to identify which context menu opened, you can use the[contextmenuBeforeOpen](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#contextmenubeforeopen) event and access the menu's class name from its event arguments. For more information, refer to this guide: https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/how-to/identify-the-context-menu-opened#identify-the-context-menu-opened-in-angular-spreadsheet-component + +You can use the [contextmenuItemSelect](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#contextmenuitemselect) event to handle when a context menu item is chosen. This event is triggered when the user selects a menu item and provides the selected item's details and the target element in its event arguments; handle it to prevent default function or adding custom functions to the context menu item. + +The following code sample shows how to handle custom actions in the `contextmenuItemSelect` event. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/context-menu-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/context-menu-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/context-menu-cs1" %} + +## Remove Context Menu Items + +You can remove the items in context menu using the [`removeContextMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#removecontextmenuitems) in `contextmenuBeforeOpen` event + +The following code sample removes the Insert Column item from the row/column header context menu. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/context-menu-cs2/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/context-menu-cs2/src/main.ts %} +{% endhighlight %} +{% endtabs %} +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/context-menu-cs2" %} + +## Enable/Disable Context Menu Items + +You can enable/disable the items in context menu using the [`enableContextMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#enablecontextmenuitems) in `contextmenuBeforeOpen` event + +The following code sample disables the Rename item in the pager context menu. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/context-menu-cs3/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/context-menu-cs3/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/context-menu-cs3" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/customize-filemenu.md b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/customize-filemenu.md new file mode 100644 index 0000000000..682efe4730 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/customize-filemenu.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Custom file menu in Angular Spreadsheet component | Syncfusion +description: Learn here how to customize the File menu in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Customize File Menu in Angular Spreadsheet + +The Syncfusion Angular Spreadsheet component lets you customize the File menu. You can hide file menu items, disable items, and add your own custom items with click actions. This helps you build a clear, task‑focused menu. You can perform the following file menu customization options in the spreadsheet + +* Add File Menu Items +* Hide/Show File Menu Items +* Enable/Disable File Menu Items + +## Add Custom File Menu Items + +In the Syncfusion Angular Spreadsheet component, you can add custom items to the File menu to include your custom actions. These items are inserted before or after a chosen built‑in File menu item by using the [addFileMenuItems](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#addfilemenuitems) method. + +A custom item can have its own text, icon, and sub‑items, and its click action is handled in the [fileMenuItemSelect](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#filemenuitemselect) event, where the selected item is identified and the defined functionality is executed. + +The following code sample shows how to add custom items in file menu: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/custom-filemenu-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/custom-filemenu-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/custom-filemenu-cs1" %} + +## Show or Hide File Menu Items + +You can show or hide File menu items using the [hideFileMenuItems](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hidefilemenuitems) method in [fileMenuBeforeOpen](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#filemenubeforeopen) event. + +The following code sample shows how to hide or show file menu items: + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/show-or-hide-filemenu-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/show-or-hide-filemenu-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/show-or-hide-filemenu-cs1" %} + +## Enable or Disable File Menu Items + +You can use the [enableFileMenuItems](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#enablefilemenuitems) method in the [fileMenuBeforeOpen](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#filemenubeforeopen) event to enable or disable File menu items. If there are duplicate item texts, target the item by its unique ID and set the third parameter `isUniqueId` to `true`. + +The following code sample shows how to enable or disable file menu items + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/enable-or-disable-filemenu-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/enable-or-disable-filemenu-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/enable-or-disable-filemenu-cs1" %} + +You can also use [fileMenuBeforeClose](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#filemenubeforeclose) when you need to run logic just before the File menu closes. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/styles.md b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/theming-and-styling.md similarity index 74% rename from Document-Processing/Excel/Spreadsheet/Angular/styles.md rename to Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/theming-and-styling.md index a02d1066d3..c3f44d388c 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/styles.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/user-interface-customization/theming-and-styling.md @@ -1,21 +1,33 @@ --- layout: post -title: Styles in Angular Spreadsheet component | Syncfusion -description: Learn here all about Styles in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +title: Theme and style in Angular Spreadsheet component | Syncfusion +description: Learn here how to use built‑in themes and apply custom styles in Syncfusion Angular Spreadsheet component of Sync fusion Essential JS 2 and more. +control: Spreadsheet platform: document-processing -control: Styles documentation: ug --- -# Styles in Angular Spreadsheet component +# Built in Themes in Angular Spreadsheet -To modify the Spreadsheet appearance, you need to override the default CSS of the spreadsheet. Please find the CSS structure that can be used to modify the Spreadsheet appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). +Our Syncfusion Angular Spreadsheet component provides a comprehensive set of built-in themes to deliver a consistent, modern, and visually appealing appearance across applications. Applying a theme loads the corresponding CSS file and updates the component’s appearance throughout the UI. + +For more information about the built-in themes in Syncfusion, please refer to the [documentation](https://ej2.syncfusion.com/angular/documentation/appearance/theme). + +## Customizing Theme Color + +The Syncfusion Angular Spreadsheet component supports many themes and lets you apply custom styles. You can customize theme colors using Theme Studio. Theme Studio lets you pick a theme, modify colors, and download a ready‑to‑use CSS file for your project. + +For more information on customizing the theme color via theme studio, please refer this [documentation](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) + +## CSS Customization + +To modify the Spreadsheet appearance, you need to override the default CSS of the spreadsheet. Please find the CSS structure that can be used to modify the Spreadsheet appearance. ## Customizing the Spreadsheet Use the below CSS to customize the Spreadsheet root element. -```css +``` .e-spreadsheet { font-family: cursive; @@ -29,7 +41,7 @@ Use the below CSS to customize the Spreadsheet root element. Use the below CSS to customize the Spreadsheet Ribbon. -```css +``` .e-spreadsheet .e-ribbon { background-color: #808080; @@ -41,7 +53,7 @@ Use the below CSS to customize the Spreadsheet Ribbon. You can customize the Spreadsheet formula bar panel by using this CSS. -```css +``` .e-spreadsheet .e-formula-bar-panel { border: none; @@ -53,7 +65,7 @@ You can customize the Spreadsheet formula bar panel by using this CSS. You can customize the Spreadsheet formula bar text by using this CSS. -```css +``` .e-spreadsheet .e-formula-bar-panel .e-formula-bar { font-weight: bold; @@ -67,7 +79,7 @@ You can customize the Spreadsheet formula bar text by using this CSS. Using this CSS, you can customize the Spreadsheet sheet element. -```css +``` .e-spreadsheet .e-sheet-panel .e-sheet { border-color: #000000; @@ -79,7 +91,7 @@ Using this CSS, you can customize the Spreadsheet sheet element. Use the below CSS to customize the Spreadsheet sheet header. -```css +``` .e-spreadsheet .e-sheet-panel .e-sheet .e-header-panel { font-style: oblique; @@ -91,7 +103,7 @@ Use the below CSS to customize the Spreadsheet sheet header. Use the below CSS to customize the Spreadsheet row header. -```css +``` .e-spreadsheet .e-row-header .e-header-cell { color: #0000FF !important; } @@ -102,7 +114,7 @@ Use the below CSS to customize the Spreadsheet row header. Use the below CSS to customize the Spreadsheet column header. -```css +``` .e-spreadsheet .e-column-header .e-header-cell { color: #0000FF !important; } @@ -113,7 +125,7 @@ Use the below CSS to customize the Spreadsheet column header. Customize the Spreadsheet selection element. -```css +``` .e-spreadsheet .e-selection { border-color: #0000FF; @@ -125,7 +137,7 @@ Customize the Spreadsheet selection element. Customize the Spreadsheet active cell element. -```css +``` .e-spreadsheet .e-active-cell { border-color: #0000FF; @@ -137,7 +149,7 @@ Customize the Spreadsheet active cell element. Using this CSS, you can customize the Spreadsheet cell element. -```css +``` .e-spreadsheet .e-cell { background-color: #0078d7 !important; @@ -149,9 +161,9 @@ Using this CSS, you can customize the Spreadsheet cell element. ### Customizing the Spreadsheet sorting icon -Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet ribbon. You can use the available Syncfusion® [icons](https://ej2.syncfusion.com/documentation/appearance/icons/#material) based on your theme. +Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet ribbon. You can use the available Syncfusion® [icons](https://ej2.syncfusion.com/documentation/appearance/icons#material) based on your theme. -```css +``` .e-spreadsheet .e-sort-filter-icon:before { background-color: #deecf9; @@ -164,7 +176,7 @@ Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet r Use the below CSS to customize the Spreadsheet filter dialog content element. -```css +``` .e-spreadsheet .e-filter-popup .e-dlg-content { background-color: #deecf9; @@ -176,7 +188,7 @@ Use the below CSS to customize the Spreadsheet filter dialog content element. Spreadsheet filter dialog footer element can be customized by using the below CSS. -```css +``` .e-spreadsheet .e-filter-popup .e-footer-content { background-color: #ccffff; @@ -188,7 +200,7 @@ Spreadsheet filter dialog footer element can be customized by using the below CS Use the below CSS to customize the Spreadsheet filter dialog input element. -```css +``` .e-spreadsheet .e-filter-popup .e-input-group input.e-input{ font-family: cursive; @@ -200,7 +212,7 @@ Use the below CSS to customize the Spreadsheet filter dialog input element. Use the below CSS to customize the Spreadsheet filter dialog button element. -```css +``` .e-spreadsheet .e-filter-popup .e-btn{ font-family: cursive; @@ -212,7 +224,7 @@ Use the below CSS to customize the Spreadsheet filter dialog button element. Spreadsheet Excel filter dialog number filters element can be customized by using the below CSS. -```css +``` .e-spreadsheet .e-filter-popup .e-contextmenu-wrapper ul{ background-color: #deecf9; @@ -226,7 +238,7 @@ Spreadsheet Excel filter dialog number filters element can be customized by usin Spreadsheet sheet tab panel can be customized by using the below CSS. -```css +``` .e-spreadsheet .e-sheet-tab-panel { background: #08fbfb; @@ -238,7 +250,7 @@ Spreadsheet sheet tab panel can be customized by using the below CSS. Spreadsheet sheet tab element can be customized by using the below CSS. -```css +``` .e-spreadsheet .e-sheet-tab-panel .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text { font-weight: bold; diff --git a/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md new file mode 100644 index 0000000000..a3c0290946 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Web Services Overview in Angular Spreadsheet | Syncfusion +description: Learn here all about how to connect web services using ASP.NET Core and ASP.NET MVC in Angular Spreadsheet of Syncfusion Essential JS 2 and more. +control: Web Services +platform: document-processing +documentation: ug +--- + +# Connect Web Services for Angular Spreadsheet Open and Save + +Unlock advanced Excel file processing in your web applications by connecting the Syncfusion Spreadsheet component to your own back-end web services. This overview explains the purpose, benefits, and high-level process for enabling open and save operations using ASP.NET Core and ASP.NET MVC. + +## What are Spreadsheet Open and Save Services? + +The Syncfusion Spreadsheet component allows users to import (open) and export (save) Excel files directly from the browser. These operations require secure, reliable back-end web services to process files and data. + +By default, demo endpoints hosted by Syncfusion are used. For production or development, it is strongly recommended to configure your own web services for: +- **Security:** Keep files and data within your infrastructure. +- **Performance:** Reduce latency and dependency on external services. +- **Customization:** Implement business logic for file validation, processing, or storage. +- **Compliance:** Meet regulatory and privacy requirements. + +## Supported Platforms + +You can implement these web services using: +- [ASP.NET Core (cross-platform, modern .NET)](./webservice-using-aspnetcore) +- [ASP.NET MVC (classic .NET Framework)](./webservice-using-aspnetmvc) + +Both platforms support endpoints for: +- **Open:** Import Excel files into the Spreadsheet component. +- **Save:** Export Spreadsheet data as Excel files. + +## How It Works + +1. **Configure Client URLs:** + Set the `openUrl` and `saveUrl` properties in the Spreadsheet component to your back-end endpoints. +2. **Implement back-end Endpoints:** + Use Syncfusion libraries in ASP.NET Core or MVC to handle file uploads (open) and data exports (save). +3. **Enable CORS:** + Allow cross-origin requests so your web app can communicate with the back-end service. +4. **Handle File Size and Security:** + Configure server settings for large file uploads and apply security best practices. + +## See Also + +- [Open Excel Files](../open-excel-files) +- [Save Excel Files](../save-excel-files) +- [Spreadsheet Server Docker Image Overview](../server-deployment/spreadsheet-server-docker-image-overview) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md new file mode 100644 index 0000000000..0f0cd54168 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md @@ -0,0 +1,143 @@ +--- +layout: post +title: Web Services using ASP.NET Core in Angular Spreadsheet | Syncfusion +description: Learn here all about web services using ASP.NET Core in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Web Services +platform: document-processing +documentation: ug +--- + +# Connecting Web Services for Spreadsheet Open and Save in ASP.NET Core + +This guide explains how to set up and connect local web services for open and save operations in the Syncfusion Spreadsheet component using ASP.NET Core. + +## Create a Local ASP.NET Core Web API + +### Create a New ASP.NET Core Web API Project + +Follow the official Microsoft tutorial to create a controller-based Web API project: + +[Tutorial: Create a controller-based web API with ASP.NET Core | Microsoft Learn](https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-10.0&source=recommendations&tabs=visual-studio#create-a-web-api-project) + +### Install Required Dependencies + +For spreadsheet open and save operations, install the following NuGet packages: + +| Platform | Assembly | NuGet Package | +|---------------|------------------------------------------|---------------| +| ASP.NET Core | Syncfusion.EJ2.Spreadsheet.AspNet.Core
Syncfusion.EJ2.AspNet.Core
Syncfusion.XlsIORenderer.Net.Core | [Syncfusion.EJ2.Spreadsheet.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core)
[Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core)
[Syncfusion.XlsIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.XlsIORenderer.Net.Core) | + +For more details, see the [dependencies section on nuget.org](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core#dependencies-body-tab). + +### Add Open and Save Controllers + +Add the following controller actions to enable open and save functionality: + +```csharp +// Open action +[HttpPost] +[Route("Open")] +public IActionResult Open([FromForm] IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + if (openRequest.Files && openRequest.Files.Count > 0) { + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); + } + return BadRequest("No file uploaded."); +} + +// Save action +[HttpPost] +[Route("Save")] +public IActionResult Save([FromForm] SaveSettings saveSettings) +{ + if(saveSettings && saveSettings.JSONData) { + return Workbook.Save(saveSettings); + } + return BadRequest("saveSettings or JSONData was not available."); +} +``` + +### Configure File Size Limits + +By default, ASP.NET Core and web servers impose size limits on incoming HTTP requests to prevent abuse and protect server resources. When uploading large Excel files, these requests can exceed the default limits, causing upload failures. To support large Excel files, you need to configure file size limits in your server settings to allow receiving large payloads over HTTP requests. + +**web.config** +```xml + + + + + + + + + + + +``` + +**Program.cs** +```csharp +// Configure FormOptions to allow large file uploads by setting multipart body and value length limits +// This enables the server to accept large Excel files in form submissions without rejecting them +builder.Services.Configure(options => +{ + options.MultipartBodyLengthLimit = int.MaxValue; + options.ValueLengthLimit = int.MaxValue; +}); + +// Configure Kestrel web server to allow large request bodies for handling large Excel file uploads +// This removes the default size restriction at the server level, enabling it to process large files +builder.WebHost.ConfigureKestrel(options => +{ + options.Limits.MaxRequestBodySize = int.MaxValue; +}); +``` + +### Enable CORS (Cross-Origin Resource Sharing) + +CORS (Cross-Origin Resource Sharing) is a security feature that allows web applications from different origins (domains, protocols, or ports) to communicate with your API. By default, browsers block cross-origin requests for security reasons. Since the Angular Spreadsheet component runs in the client browser and needs to communicate with your ASP.NET Core API for open and save operations, you must configure CORS to allow these requests. The following configuration enables cross-origin requests from any origin, which is suitable for development environments. + +Edit `Program.cs` to allow cross-origin requests: + +```csharp +// Configure CORS to allow the Angular Spreadsheet component to communicate with the API from any origin +// This is necessary for the browser to permit cross-origin requests for file open and save operations +var MyAllowSpecificOrigins = "AllowAllOrigins"; +builder.Services.AddCors(options => +{ + options.AddPolicy(MyAllowSpecificOrigins, builder => + { + builder.AllowAnyOrigin() + .AllowAnyMethod() + .AllowAnyHeader(); + }); +}); + +var app = builder.Build(); +app.UseCors(MyAllowSpecificOrigins); +``` + +### Run the Web API Project + +Build and run your Web API project. For detailed instructions, refer to: + +[Run the ASP.NET Core Web API project](https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-10.0&source=recommendations&tabs=visual-studio#run-the-project) + +### Configuring the Client-Side URLs + +Once your local service is launched, configure the openUrl and saveUrl properties in your client application to use the local endpoints for import and export operations + +```ts + +``` + +For more information, refer to the following [blog post](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). + +## See Also + +* [Docker Image Overview](../server-deployment/spreadsheet-server-docker-image-overview) +* [Open Excel Files](../open-excel-files) +* [Save Excel Files](../save-excel-files) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md new file mode 100644 index 0000000000..b97f421396 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Web Services using ASP.NET MVC in Angular Spreadsheet | Syncfusion +description: Learn here all about web services using ASP.NET MVC in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Web Services +platform: document-processing +documentation: ug +--- + +# Connecting Web Services for Spreadsheet Open and Save in ASP.NET MVC + +This guide explains how to set up and connect local web services for open and save operations in the Syncfusion Spreadsheet component using **ASP.NET MVC**. + +## Create a Local ASP.NET MVC Web Service + +### Create a New ASP.NET MVC Project + +Follow the official Microsoft tutorial to create an ASP.NET MVC 5 project: + +[Getting Started with ASP.NET MVC 5 | Microsoft Learn](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started) + +### Install Required Dependencies + +For spreadsheet open and save operations, install the following NuGet packages: + +| Platform | Assembly | NuGet Package | +|---------------|------------------------------------------|---------------| +| ASP.NET MVC5 | Syncfusion.XlsIO.AspNet.Mvc5
Syncfusion.ExcelToPdfConverter.AspNet.Mvc5
Syncfusion.Pdf.AspNet.Mvc5
Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5
Syncfusion.EJ2.MVC5 | [Syncfusion.XlsIO.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.XlsIO.AspNet.Mvc5)
[Syncfusion.ExcelToPdfConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelToPdfConverter.AspNet.Mvc5)
[Syncfusion.Pdf.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.Pdf.AspNet.Mvc5/)
[Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5)
[Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) | + +### Add Open and Save Actions in Controller + +Add the following action methods to your controller (e.g., `SpreadsheetController`) to enable open and save functionality: + +```csharp +using System.Web; +using System.Web.Mvc; +using Syncfusion.EJ2.Spreadsheet; + +public class SpreadsheetController : Controller +{ + // Open action + [HttpPost] + public ActionResult Open(OpenRequest openRequest) + { + if (openRequest != null && openRequest.File != null) + { + var result = Workbook.Open(openRequest); + return Content(result); + } + return new HttpStatusCodeResult(400, "No file uploaded."); + } + + // Save action + [HttpPost] + public void Save(SaveSettings saveSettings) + { + if (saveSettings != null && saveSettings.JSONData != null) + { + Workbook.Save(saveSettings); + } + } +} +``` + +### Configure File Size Limits + +By default, ASP.NET MVC and web servers impose size limits on incoming HTTP requests to prevent abuse and protect server resources. When uploading large Excel files, these requests can exceed the default limits, causing upload failures. To support large Excel files, you need to configure file size limits in your server settings to allow receiving large payloads over HTTP requests. + + +**web.config** +```xml + + + + + + + + + + + + + + +``` + +### Enable CORS (Cross-Origin Resource Sharing) + +CORS (Cross-Origin Resource Sharing) is a security feature that allows web applications from different origins (domains, protocols, or ports) to communicate with your API. By default, browsers block cross-origin requests for security reasons. Since the Angular Spreadsheet component runs in the client browser and needs to communicate with your ASP.NET MVC web service for open and save operations, you must configure CORS to allow these requests. The following configuration enables cross-origin requests from any origin, which is suitable for development environme + +**How to Enable CORS in ASP.NET MVC** + +1. Open `Global.asax.cs` in your project. +2. Add the following code to the `Application_BeginRequest` method: + +```csharp +// Configure CORS to allow the Angular Spreadsheet component to communicate with the API from any origin +// This is necessary for the browser to permit cross-origin requests for file open and save operations +protected void Application_BeginRequest() +{ + // Allow all origins. For production, specify allowed origins instead of '*'. + HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); + HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); + HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); + + // Handle preflight requests + if (HttpContext.Current.Request.HttpMethod == "OPTIONS") + { + HttpContext.Current.Response.End(); + } +} +``` + +### Run the MVC Project + +After adding the controller codes and above mentioned configurations, build and run the MVC project (F5 or Ctrl+F5 in Visual Studio). + +--- + +### Configuring the Client-Side URLs + +Once your local service is launched, configure the openUrl and saveUrl properties in client application to use the local endpoints to perform import and export operation. + +```ts + +``` + +For more information, refer to the following [blog post](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). + +## See Also + +* [Docker Image Overview](../server-deployment/spreadsheet-server-docker-image-overview) +* [Open Excel Files](../open-excel-files) +* [Save Excel Files](../save-excel-files) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/delete-sheet.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/delete-sheet.md new file mode 100644 index 0000000000..04475aa15b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/delete-sheet.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Delete Worksheet in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to delete a worksheet in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + + +# Delete Worksheet in Angular Spreadsheet + +Our Angular Spreadsheet component allows you to remove sheets that are no longer needed, helping you keep your workbook organized and relevant. You can delete a sheet using the user interface or programmatically, but at least one worksheet must always remain in the workbook. + +You can delete an existing worksheet in the Spreadsheet component using the following methods: + +* Right-click on the sheet tab, and then select the **Delete** option from the context menu. +* Use the [`delete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#delete) method to remove sheets programmatically. + +> **Note:** You cannot delete a worksheet if only one sheet exists in the workbook. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/duplicate-sheet.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/duplicate-sheet.md new file mode 100644 index 0000000000..82d2e098fa --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/duplicate-sheet.md @@ -0,0 +1,22 @@ +--- +layout: post +title: Duplicate Worksheet in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to duplicate a worksheet in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + +# Duplicate Worksheet in Angular Spreadsheet + +The Spreadsheet component allows you to create a copy of an existing worksheet along with its data, formatting, and configurations. Duplicating a sheet is useful when you want to reuse the same structure or data without manually recreating it. + +While duplicating the worksheet, a new worksheet is created as an exact copy of the selected sheet and is placed next to it. The duplicated sheet will automatically be assigned a unique name to avoid conflicts with existing sheet names. + +You can duplicate a worksheet in the following way, + +* Right-click on the sheet tab, and then select the `Duplicate` option from the context menu. + +* Duplicate a sheet programmatically using the [duplicateSheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#duplicatesheet) method; it copies the specified worksheet (including data, formatting and settings) and places the copy next to the original so you can reuse or edit it without affecting the source. + +![Duplicate sheet](../images/spreadsheet-duplicate.png) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/headers-and-gridlines.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/headers-and-gridlines.md new file mode 100644 index 0000000000..0be0b257a4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/headers-and-gridlines.md @@ -0,0 +1,40 @@ +--- +layout: post +title: Headers and Gridlines in Angular Spreadsheet component | Syncfusion +description: Learn here all about headers and gridlines in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + +# Headers and Gridlines in Angular Spreadsheet + +Headers and gridlines are essential visual elements in the Angular Spreadsheet component. Headers display the row numbers and column letters, helping you identify and reference cells easily. Gridlines are the faint lines that separate cells, making the worksheet easier to read and organize. Both headers and gridlines can be shown or hidden to customize the appearance of your spreadsheet. + +## Headers + +By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers by using one of the following ways, + +* Switch to `View` tab, and then select `Hide Headers` option to hide both the row and column headers. +* Set `showHeaders` property in `sheets` as `true` or `false` to show or hide the headers at initial load. By default, the `showHeaders` property is enabled in each worksheet. + +## Gridlines + +Gridlines act as a border like appearance of cells. They are used to distinguish cells on the worksheet. You can dynamically show or hide gridlines by using one of the following ways, + +* Switch to `View` tab, and then select `Hide Gridlines` option to hide the gridlines in worksheet. +* Set `showGridLines` property in `sheets` as `true` or `false` to show or hide the gridlines at initial load. By default, the [showGridLines](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet#showgridlines) property is enabled in each worksheet. + +The following code example shows the headers and gridlines operation in spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/headers-gridlines-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/headers-gridlines-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/headers-gridlines-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/insert-sheet.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/insert-sheet.md new file mode 100644 index 0000000000..21f0f3e1b9 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/insert-sheet.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Insert Worksheet in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to insert a worksheet in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + +# Insert Worksheet in Angular Spreadsheet + +In the Angular Spreadsheet component, you can insert new worksheets to organize and manage your data more effectively. Sheets can be added either through the user interface or programmatically, allowing you to expand your workbook as needed. You can choose to add a sheet next to the current sheet, at a specific position, or make the newly inserted sheet active. + +## Ways to Insert a Worksheet + +You can dynamically add or insert a sheet by one of the following ways, + +* Click the `Add Sheet` button in the sheet tab. This will add a new empty sheet next to current active sheet. +* Right-click on the sheet tab, and then select `Insert` option from the context menu to insert a new empty sheet before the current active sheet. +* Using [`insertSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#insertsheet) method, you can insert one or more sheets at your desired index. + +The following code example shows the insert sheet operation in spreadsheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert/sheet-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert/sheet-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert/sheet-cs1" %} + +## Insert a sheet programmatically and make it active sheet + +A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#goto) method. + +The following code example shows how to insert a sheet programmatically and make it the active sheet. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/insert-sheet-change-active-sheet-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/insert-sheet-change-active-sheet-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/insert-sheet-change-active-sheet-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/move-sheet.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/move-sheet.md new file mode 100644 index 0000000000..9dab898531 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/move-sheet.md @@ -0,0 +1,22 @@ +--- +layout: post +title: Move a Worksheet in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to move a worksheet in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + +# Move Worksheet in Angular Spreadsheet + +The Spreadsheet component provides options to rearrange worksheets by moving them to the left or right within the sheet tab panel. This helps you organize worksheets in the required order. + +You can move a worksheet using the following way, + +* Right-click on the sheet tab, and then select either `Move Left`(moves the sheet one position to the left) or `Move Right`(moves the sheet one position to the right) option from the context menu. + +* Move sheets programmatically using the [moveSheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#movesheet) method, which moves a worksheet from one position to another based on the position passed in the method and updates the sheet tab order. + +![Move sheet tabs](../images/spreadsheet-move-tab.png) + +>**Note:** The Move Left and Move Right options are enabled only when there are two or more worksheets available in the Spreadsheet. These options are automatically disabled when the selected sheet is already at the first or last position. diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/rename-sheet.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/rename-sheet.md new file mode 100644 index 0000000000..33f2662b60 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/rename-sheet.md @@ -0,0 +1,16 @@ +--- +layout: post +title: Rename a Worksheet in Angular Spreadsheet component | Syncfusion +description: Learn here all about how to rename a worksheet in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + +# Rename Worksheet in Angular Spreadsheet + +Renaming a worksheet helps you organize your workbook by giving each sheet a meaningful name. This makes it easier to identify the purpose or content of each sheet, especially when working with multiple worksheets. + +You can dynamically rename an existing worksheet as follows: + +* Right-click on the sheet tab, and then select the **Rename** option from the context menu. Enter the new name and press Enter. The updated name will appear immediately in the sheet tab. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/sheet-visibility.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/sheet-visibility.md new file mode 100644 index 0000000000..f6dc5a455b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet-management/sheet-visibility.md @@ -0,0 +1,34 @@ +--- +layout: post +title: Sheet Visibility in Angular Spreadsheet component | Syncfusion +description: Learn here all about sheet visibility in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Worksheet +platform: document-processing +documentation: ug +--- + +# Sheet visibility + +Hiding a worksheet can help prevent unauthorized or accidental changes to your file. + +There are three visibility state as like Microsoft Excel, + +| State | Description | +|-------|---------| +| `Visible` | You can see the worksheet once the component is loaded. | +| `Hidden` | This worksheet is not visible, but you can unhide by selecting the sheet from `List All Sheets` dropdown menu. | +| `VeryHidden` | This worksheet is not visible and cannot be unhidden. Changing the state property to `Visible` is the only way to view this sheet. | + +The following code example shows the three types of sheet visibility state. + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} +{% include code-snippet/spreadsheet/angular/sheet-visiblity-cs1/src/app.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/sheet-visiblity-cs1-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/sheet-visiblity-cs1-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Angular/worksheet.md b/Document-Processing/Excel/Spreadsheet/Angular/worksheet.md index d9c923a835..124b99bc42 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/worksheet.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/worksheet.md @@ -2,129 +2,42 @@ layout: post title: Worksheet in Angular Spreadsheet component | Syncfusion description: Learn here all about Worksheet in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: document-processing control: Worksheet +platform: document-processing documentation: ug --- # Worksheet in Angular Spreadsheet component -Worksheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. - -## Add sheet - -You can dynamically add or insert a sheet by one of the following ways, - -* Click the `Add Sheet` button in the sheet tab. This will add a new empty sheet next to current active sheet. -* Right-click on the sheet tab, and then select `Insert` option from the context menu to insert a new empty sheet before the current active sheet. -* Using [`insertSheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at your desired index. - -The following code example shows the insert sheet operation in spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/insert/sheet-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/insert/sheet-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/insert/sheet-cs1" %} - -### Insert a sheet programmatically and make it active sheet - -A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#goto) method. - -The following code example shows how to insert a sheet programmatically and make it the active sheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/insert-sheet-change-active-sheet-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/insert-sheet-change-active-sheet-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/insert-sheet-change-active-sheet-cs1" %} - -## Delete sheet - -The Spreadsheet has support for removing an existing worksheet. You can dynamically delete the existing sheet by the following way, - -* Right-click on the sheet tab, and then select `Delete` option from context menu. -* Using [`delete`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#delete ) method to delete the sheets. - -## Rename sheet - -You can dynamically rename an existing worksheet in the following way, - -* Right-click on the sheet tab, and then select `Rename` option from the context menu. - -## Headers - -By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers by using one of the following ways, - -* Switch to `View` tab, and then select `Hide Headers` option to hide both the row and column headers. -* Set `showHeaders` property in `sheets` as `true` or `false` to show or hide the headers at initial load. By default, the `showHeaders` property is enabled in each worksheet. - -## Gridlines - -Gridlines act as a border like appearance of cells. They are used to distinguish cells on the worksheet. You can dynamically show or hide gridlines by using one of the following ways, - -* Switch to `View` tab, and then select `Hide Gridlines` option to hide the gridlines in worksheet. -* Set `showGridLines` property in `sheets` as `true` or `false` to show or hide the gridlines at initial load. By default, the `showGridLines` property is enabled in each worksheet. - -The following code example shows the headers and gridlines operation in spreadsheet. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/headers-gridlines-cs1/src/app.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/headers-gridlines-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/headers-gridlines-cs1" %} - -## Sheet visibility - -Hiding a worksheet can help prevent unauthorized or accidental changes to your file. +A **Worksheet** is a collection of cells organized in rows and columns. It allows you to store, format, and manipulate data efficiently within the Spreadsheet. Each worksheet provides a structured grid where you can enter values, apply formulas, and customize formatting to manage your data. -There are three visibility state as like Microsoft Excel, +Worksheets are part of the **Spreadsheet component**, and you can configure them using the [`sheets`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#sheets) property. This property lets you define multiple worksheets, each with its own settings such as rows, columns, data, and formatting options. -| State | Description | -|-------|---------| -| `Visible` | You can see the worksheet once the component is loaded. | -| `Hidden` | This worksheet is not visible, but you can unhide by selecting the sheet from `List All Sheets` dropdown menu. | -| `VeryHidden` | This worksheet is not visible and cannot be unhidden. Changing the state property to `Visible` is the only way to view this sheet. | +By using worksheets, you can: +* Organize data into separate tabs for better clarity. +* Apply different formatting styles to each sheet. +* Manage formulas and calculations independently across sheets. +* Import or export data while maintaining sheet-level configurations. -The following code example shows the three types of sheet visibility state. +## Overview of Worksheet Management Operations -{% tabs %} -{% highlight ts tabtitle="app.ts" %} -{% include code-snippet/spreadsheet/angular/sheet-visibility-cs1/src/app.ts %} -{% endhighlight %} +The Angular Spreadsheet component offers several worksheet management features to help you organize and customize your workbook. Here is a brief explanation of each feature, with links to their documentation: -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/spreadsheet/angular/sheet-visibility-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/spreadsheet/angular/sheet-visibility-cs1" %} +- **[Insert Sheet](./worksheet-management/insert-sheet)**: Add a new worksheet to your workbook, allowing you to expand and organize your data as needed. +- **[Delete Sheet](./worksheet-management/delete-sheet)**: Remove an existing worksheet from your workbook when it is no longer required. +- **[Rename Sheet](./worksheet-management/rename-sheet)**: Change the name of a worksheet to make it more descriptive or meaningful. +- **[Duplicate Sheet](./worksheet-management/duplicate-sheet)**: Create an exact copy of a worksheet, including its data and formatting. +- **[Move Sheet](./worksheet-management/move-sheet)**: Rearrange the order of worksheets within your workbook for better organization. +- **[Sheet Visibility](./worksheet-management/sheet-visibility)**: Show or hide specific worksheets to control what is visible to users. +- **[Headers and Gridlines](./worksheet-management/headers-and-gridlines)**: Display or hide row and column headers and gridlines to customize the worksheet view. ## Note -You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data. +You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data. ## See Also * [Sheet protection](./protect-sheet) * [Rows and columns](./rows-and-columns) * [Cell range](./cell-range) -* [Formatting](./formatting) +* [Formatting](./formatting) \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/app.ts new file mode 100644 index 0000000000..cbe7730712 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/app.ts @@ -0,0 +1,62 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'; + +@Component({ +imports: [ + SpreadsheetAllModule + ], + +standalone: true, + selector: 'app-container', + template: ` + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + public spreadsheetObj: SpreadsheetComponent | undefined; + + // To create plus icon wrapper. + createPlusIconWrapper = (): HTMLElement => { + const wrapperDiv: HTMLDivElement = document.createElement("div"); + wrapperDiv.className = 'e-custom-wrapper'; + const iconSpan: HTMLSpanElement = document.createElement("span"); + iconSpan.className = 'e-icons e-plus e-custom-icon'; + wrapperDiv.appendChild(iconSpan); + return wrapperDiv; + }; + handleCreated():void{ + if (!this.spreadsheetObj) return; + this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, 'A1'); + this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, 'B1'); + this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, 'C1'); + this.spreadsheetObj.resize(); + this.spreadsheetObj.addRibbonTabs([ + { + header: { text: 'Template' }, + content: [ + { + text: 'Add Icon', + tooltipText: 'Initialize', + click: () => { + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + this.spreadsheetObj.updateCell( + { template: 'plus-icon' } as any, + sheet.activeCell + ); + this.spreadsheetObj.resize(); + }, + }, + ], + }, + ]); + }; + handleBeforeCellRender(args: any): void{ + if (args.cell && args.cell.template === 'plus-icon') { + const wrapperDiv: HTMLElement = this.createPlusIconWrapper(); + args.element.insertBefore(wrapperDiv, args.element.firstChild); + } + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/app.ts new file mode 100644 index 0000000000..8a2c3a225a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/app.ts @@ -0,0 +1,93 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + + + +import { Component, OnInit,ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: `
+ + + + + + + + + + + + + +
` +}) +export class AppComponent implements OnInit { + + @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent; + + public CUSTOM_IDS = { + quickNote: 'custom_quick_note', + highlight: 'custom_highlight', + clear: 'custom_clear', + }; + + created() { + if (!this.spreadsheetObj) return; + + this.spreadsheetObj.addToolbarItems('Home', [ + { + id: this.CUSTOM_IDS.quickNote, + text: 'Quick Note', + tooltipText: 'Insert a short note in the current selection', + click: () => this.onQuickNote(), + }, + { + id: this.CUSTOM_IDS.highlight, + text: 'Highlight', + tooltipText: 'Highlight the current selection', + click: () => this.onHighlight() + }, + { + id: this.CUSTOM_IDS.clear, + text: 'Clear', + tooltipText: 'Clear contents of the current selection', + click: () => this.onClear(), + }, + ] as any); + } + + onQuickNote(){ + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const range = sheet.selectedRange || sheet.activeCell || 'A1'; + this.spreadsheetObj.updateCell({ notes: { text: 'Note' } } as any, range); + }; + + onHighlight(){ + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const range = sheet.selectedRange || sheet.activeCell || 'A1'; + this.spreadsheetObj.cellFormat({ backgroundColor: '#FFF9C4', color: '#5D4037' }, range); + }; + + onClear(){ + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const range = sheet.selectedRange || sheet.activeCell || 'A1'; + this.spreadsheetObj.clear({ type: 'Clear All', range }); + }; +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/add-toolbar-items-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/index.html new file mode 100644 index 0000000000..e57f943476 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/app.ts new file mode 100644 index 0000000000..58825ce152 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/app.ts @@ -0,0 +1,41 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj!: SpreadsheetComponent; + data: object[] = dataSource; + + create(): void{ + if (this.spreadsheetObj) { + // To change width of single column + this.spreadsheetObj.setColumnsWidth(100, ['F']); + // To change width of multiple columns + this.spreadsheetObj.setColumnsWidth(120, ['A:C', 'G:I', 'K:M']); + } + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/datasource.ts new file mode 100644 index 0000000000..75c3753ec6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/datasource.ts @@ -0,0 +1,237 @@ +/** + * Editing data source + */ +export let dataSource: Object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/column-width-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/app.ts new file mode 100644 index 0000000000..9d414761c9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/app.ts @@ -0,0 +1,29 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'; +import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons'; + + +@Component({ +imports: [ + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + public spreadsheetObj!: SpreadsheetComponent; + // Add a custom context menu item right before the menu opens + onContextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs) { + // To remove existing context menu items. + if (this.spreadsheetObj) { + this.spreadsheetObj.removeContextMenuItems(['Insert Column'], false); + } + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs2/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/app.ts new file mode 100644 index 0000000000..6fbdc50c58 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/app.ts @@ -0,0 +1,29 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'; +import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons'; + + +@Component({ +imports: [ + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + public spreadsheetObj!: SpreadsheetComponent; + // Add a custom context menu item right before the menu opens + onContextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs) { + //To enable / disable context menu items. + if (this.spreadsheetObj && args.element.id === this.spreadsheetObj.element.id + '_contextmenu') { + this.spreadsheetObj.enableContextMenuItems(['Rename'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id. + } + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/context-menu-cs3/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/app.ts new file mode 100644 index 0000000000..b27098160f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/app.ts @@ -0,0 +1,49 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + + + +import { Component, OnInit,ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: `` +}) +export class AppComponent implements OnInit { + + @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent; + ngOnInit(): void { + } + created(){ + if (!this.spreadsheetObj) return; + + this.spreadsheetObj.addRibbonTabs( + [ + { + header: { text: 'Custom tab' }, + content: [ + { + text: 'Custom', + tooltipText: 'Custom Btn', + cssClass: 'e-custom-btn', + click: () => { + // Your custom action here + this.spreadsheetObj.updateCell({ value: 'Custom action executed' } as any, 'A1'); + } + } + ] + } + ] + ); + }; +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/custom-tab-and-item-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/index.html new file mode 100644 index 0000000000..8b31f405ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/index.html @@ -0,0 +1,37 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/app.ts new file mode 100644 index 0000000000..113817f636 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/app.ts @@ -0,0 +1,76 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + + + +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, getFormatFromType, ChartModel, BeforeChartEventArgs } from '@syncfusion/ej2-angular-spreadsheet'; +import { chartData } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` +
+ + + + + + + + + + + + + + + + + + + + +
+ ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj: SpreadsheetComponent | undefined; + data: Object[] = chartData; + created() { + if (!this.spreadsheetObj) return; + + // Insert a Column chart based on A1:B6 + this.spreadsheetObj.insertChart([ + { + type: 'Column', // Column | Bar | Line | Pie | Doughnut | Area | Scatter ... + range: 'A1:B6', + top: 120, + left: 20, + height: 300, + width: 500, + }, + ]); + } + + removeById() { + this.spreadsheetObj!.deleteChart('e_spreadsheet_chart_5'); // removes the chart with id "salesChart" + } + + removeActive() { + this.spreadsheetObj!.deleteChart(); // no id → removes the currently selected chart + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/datasource.ts new file mode 100644 index 0000000000..b85eb4cbaf --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/datasource.ts @@ -0,0 +1,10 @@ +/** + * Chart data source + */ +export let chartData: Object[] = [ + { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 }, + { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 }, + { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 }, + { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 }, + { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 } +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/styles.css new file mode 100644 index 0000000000..3b6646ab1d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/src/styles.css @@ -0,0 +1,14 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/delete-chart-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts new file mode 100644 index 0000000000..5fc60bf88e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts @@ -0,0 +1,70 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellRenderEventArgs, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-angular-spreadsheet'; +import { DropDownList } from '@syncfusion/ej2-dropdowns'; + +@Component({ + imports: [ + SpreadsheetAllModule + ], + + standalone: true, + selector: 'app-root', + template: ` + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj: SpreadsheetComponent | undefined; + public dropDownOptions = [10, 20, 30, 40, 50, 60]; + created() { + console.log(this.spreadsheetObj) + if (!this.spreadsheetObj) return; + // Custom template tab to add dropdown to cell. + this.spreadsheetObj.addRibbonTabs([{ + header: { text: 'Template' }, content: [{ + text: 'DropDown List', click: () => { + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const [rowIdx, colIdx] = getCellIndexes(sheet.activeCell); + const cellModel: any = getCell(rowIdx, colIdx, sheet); + const cellEle = this.spreadsheetObj.getCell(rowIdx, colIdx); + if (cellModel && cellModel.template === 'dropdown-list') return; + this.addDropDownlist(cellEle, this.dropDownOptions); + } + }] + }]); + this.spreadsheetObj.setRowsHeight(35, ['1:100']); + // Rendering dropdown list for a specific range initially. + const activeSheet = this.spreadsheetObj.getActiveSheet(); + for (let colIdx = 0; colIdx <= 3; colIdx++) { + console.log("here"); + setCell(0, colIdx, activeSheet, { template: 'dropdown-list' } as any, true); + } + this.spreadsheetObj.resize(); + } + // Triggers before the cell is appended to the DOM. + beforeCellRender(args: CellRenderEventArgs) { + if (args.rowIndex !== undefined && args.colIndex !== undefined) { + // To render dropdown if template property 'dropdown-list' is set. + if (args.cell && (args.cell as any).template === 'dropdown-list') { + this.addDropDownlist(args.element, this.dropDownOptions); + } + } + } + // To render the dropdown list. + addDropDownlist(element: HTMLElement, legendOptions: number[]) { + element.innerHTML = ''; + const inputEle = document.createElement("input"); + element.appendChild(inputEle); + new DropDownList({ + placeholder: 'Select a value', + dataSource: legendOptions, + cssClass: 'e-dropdown-list', + change: (event) => { + this.spreadsheetObj?.updateCell({ value: event.value.toString() }, (this.spreadsheetObj.getActiveSheet()).activeCell); + } + }, inputEle); + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/app.ts new file mode 100644 index 0000000000..0ba2a060f5 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/app.ts @@ -0,0 +1,66 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + +import { Component, OnInit,ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + +standalone: true, + selector: 'app-container', + template: ` +
+
+ + + + +
+ + +
+ ` +}) +export class AppComponent implements OnInit { + + @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent; + ngOnInit(): void { + } + + public homeItemsToToggle: number[] = [0, 1, 2, 3, 4, 5]; + + disableInsertTab() { + if (!this.spreadsheetObj) return; + this.spreadsheetObj.enableRibbonTabs(['Insert'], false); + }; + + enableInsertTab() { + if (!this.spreadsheetObj) return; + this.spreadsheetObj.enableRibbonTabs(['Insert'], true); + }; + + disableHomeItems() { + if (!this.spreadsheetObj) return; + this.spreadsheetObj.enableToolbarItems('Home', this.homeItemsToToggle, false); + }; + + enableHomeItems() { + if (!this.spreadsheetObj) return; + this.spreadsheetObj.enableToolbarItems('Home', this.homeItemsToToggle, true); + }; + + created() { + if (!this.spreadsheetObj) return; + + this.spreadsheetObj.enableRibbonTabs(['Insert'], false); + this.spreadsheetObj.enableToolbarItems('Home', this.homeItemsToToggle, false); + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/enable-or-disable-ribbon-items-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/events/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/events/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/events/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/events/index.html b/Document-Processing/code-snippet/spreadsheet/angular/events/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/events/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/events/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/events/src/app.ts new file mode 100644 index 0000000000..ce549b0f85 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/events/src/app.ts @@ -0,0 +1,55 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + + + +import { Component } from '@angular/core'; +import { SpreadsheetComponent, BeforeSaveEventArgs, BeforeOpenEventArgs } from '@syncfusion/ej2-angular-spreadsheet'; + +@Component({ +imports: [ + + DropDownButtonModule, + SpreadsheetAllModule + ], + + + standalone: true, + selector: 'app-container', + template: `
+

Event Trace

+
+
+ +
+ +
+
+
` +}) +export class AppComponent { + actionBegin (args: any) { + this.appendElement(`actionBegin triggered for  ${args.action} action
`); + console.log(args); + } + actionComplete(args: any){ + this.appendElement(`actionComplete triggered for  ${args.action} action
`); + console.log(args); + } + appendElement(html: any){ + const span = document.createElement("span"); + span.innerHTML = html; + const log = document.getElementById('EventLog'); + if (log) { + log.insertBefore(span, log.firstChild); + } + }; + clearBtnClick(){ + const eventLog = document.getElementById('EventLog'); + if (eventLog) { + eventLog.innerHTML = ""; + } + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/events/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/events/src/datasource.ts new file mode 100644 index 0000000000..b354730d5a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/events/src/datasource.ts @@ -0,0 +1,40 @@ +export let data: Object[] = [ { + OrderID: 10248, + CustomerID: 'VINET', + EmployeeID: 5, + ShipName: 'Vins et alcools Chevalier', + ShipCity: 'Reims', + Website: 'https://www.amazon.com/' +}, +{ + OrderID: 10249, + CustomerID: 'TOMSP', + EmployeeID: 6, + ShipName: 'Toms Spezialitäten', + ShipCity: 'Münster', + Website: 'https://www.overstock.com/' +}, +{ + OrderID: 10250, + CustomerID: 'HANAR', + EmployeeID: 4, + ShipName: 'Hanari Carnes', + ShipCity: 'Rio de Janeiro', + Website: 'https://www.aliexpress.com/' +}, +{ + OrderID: 10251, + CustomerID: 'VICTE', + EmployeeID: 3, + ShipName: 'Victuailles en stock', + ShipCity: 'Lyon', + Website: 'http://www.alibaba.com/' +}, +{ + OrderID: 10252, + CustomerID: 'SUPRD', + EmployeeID: 4, + ShipName: 'Suprêmes délices', + ShipCity: 'Charleroi', + Website: 'https://taobao.com/' +}]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/events/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/events/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/events/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/events/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/events/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/events/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/index.html new file mode 100644 index 0000000000..e57f943476 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/app.ts new file mode 100644 index 0000000000..5e5b5242ae --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/app.ts @@ -0,0 +1,103 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj!: SpreadsheetComponent; + + data: object[] = dataSource; + + actionBegin(args: any): void{ + const action: string = args.action; + const eventArgs: any= args.args.eventArgs; + + // Check the action is beforeReplaceAll. + if (action === 'beforeReplaceAll') { + if (!this.spreadsheetObj) return; + + // Get the active sheet's selected range. + const selectedRange: string | undefined = this.spreadsheetObj.getActiveSheet().selectedRange; + if (!selectedRange) return; + + // Convert the selected range into cell collection. + const selectedRangeCollection: string[] = this.generateCellCollection(selectedRange, this.spreadsheetObj); + const replaceAllCollection: Array = eventArgs.addressCollection as Array; + if (!Array.isArray(replaceAllCollection)) return; + + // Create a Set from selectedRangeCollection for efficient lookup. + const selectedSet: Set = new Set(selectedRangeCollection); + const updatedCollection: Array = []; + + // Iterate through replaceAllCollection and keep only cells within selection. + for (const cell of replaceAllCollection) { + if (cell && selectedSet.has(cell)) { + updatedCollection.push(cell); + } else { + // If the cell is not in selectedRangeCollection, add null to the updated collection + updatedCollection.push(null); + } + } + + if (updatedCollection.length > 0) { + // Assign the newly created cell collection to the addressCollection of replaceAll action. + eventArgs.addressCollection = updatedCollection; + } + } + }; + + generateCellCollection(range: string, spreadsheet: SpreadsheetComponent): string[] { + // Initialize the collection that will hold cell references. + const collection: string[] = []; + + // Split the range string into start and end cell references. + let [startCell, endCell]: string[] = range.split(':'); + endCell = endCell || startCell; + + // Get the name of the active sheet. + const activeSheetName: string = spreadsheet.getActiveSheet().name!; + + // Extract column and row numbers from start and end cell references. + const [startCol, startRow]: string[] = startCell.match(/[A-Z]+|\d+/g) || []; + const [endCol, endRow]: string[] = endCell.match(/[A-Z]+|\d+/g) || []; + + // Calculate ASCII codes for start and end columns. + const colRange: [number, number] = [startCol.toUpperCase().charCodeAt(0), endCol.toUpperCase().charCodeAt(0)]; + + // Parse start and end row numbers. + const rowRange: [number, number] = [parseInt(startRow), parseInt(endRow)]; + + // Iterate over columns and rows within the specified range. + for (let col: number = colRange[0]; col <= colRange[1]; col++) { + for (let row: number = rowRange[0]; row <= rowRange[1]; row++) { + // Push each cell reference into the collection array + collection.push(`${activeSheetName}!${String.fromCharCode(col)}${row}`); + } + } + // Return the array of cell references. + return collection; + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/datasource.ts new file mode 100644 index 0000000000..75c3753ec6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/datasource.ts @@ -0,0 +1,237 @@ +/** + * Editing data source + */ +export let dataSource: Object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/find-and-replace-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/index.html new file mode 100644 index 0000000000..e72aeeb081 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/index.html @@ -0,0 +1,35 @@ + + + + + Syncfusion Angular Spreadsheet + + + + + + + + + + + +
LOADING....
+ + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/app.ts new file mode 100644 index 0000000000..5f63176b0d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/app.ts @@ -0,0 +1,85 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + + + +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj: SpreadsheetComponent | undefined; + + data: object[] = dataSource; + + created() { + // Applied border to range of cells using 'setBorder' method + this.spreadsheetObj!.setBorder({ borderLeft: '1px solid #e0e0e0', borderRight: '1px solid #e0e0e0' }, 'A2:E2'); + this.spreadsheetObj!.setBorder({ border: '1px solid #e0e0e0' }, 'A4:E11', 'Horizontal'); + this.spreadsheetObj!.setBorder({ border: '1px solid #e0e0e0' }, 'A3:E12', 'Outer'); + this.spreadsheetObj!.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E3:E4'); + this.spreadsheetObj!.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E9'); + this.spreadsheetObj!.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E12'); + this.spreadsheetObj!.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E5'); + this.spreadsheetObj!.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E8'); + this.spreadsheetObj!.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E11'); + this.spreadsheetObj!.cellFormat({ color: '#62c9e8' }, 'E6'); + this.spreadsheetObj!.cellFormat({ color: '#62c9e8' }, 'E10'); + this.spreadsheetObj!.cellFormat({ color: '#ff5b5b' }, 'E7'); + } +} + + diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/datasource.ts new file mode 100644 index 0000000000..360a49e086 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/datasource.ts @@ -0,0 +1,68 @@ +/** + * Number formatting data source + */ +export let dataSource: Object[] = [ + { + 'Salesperson': 'Jeffrey Burke', + 'Region Covered': 'Oklahoma', + 'February 2019 Sales': '28000', + 'Cost of Sales': '2460', + 'January 2019 Sales': '21238', + 'Percent Change': '.32' + }, + { + 'Salesperson': 'Amy Fernandez', + 'Region Covered': 'North Carolina', + 'February 2019 Sales': '23138', + 'Cost of Sales': '1521', + 'January 2019 Sales': '23212', + 'Percent Change': '0' + }, + { + 'Salesperson': 'Mark Hayes', + 'Region Covered': 'Massachusetts', + 'February 2019 Sales': '25092', + 'Cost of Sales': '1530', + 'January 2019 Sales': '20454', + 'Percent Change': '.23' + }, + { + 'Salesperson': 'Judith Ray', + 'Region Covered': 'California', + 'February 2019 Sales': '21839', + 'Cost of Sales': '1923', + 'January 2019 Sales': '24619', + 'Percent Change': '-.11' + }, + { + 'Salesperson': 'Rany Graham', + 'Region Covered': 'South Carolina', + 'February 2019 Sales': '23342', + 'Cost of Sales': '2397', + 'January 2019 Sales': '20045', + 'Percent Change': '.16' + }, + { + 'Salesperson': 'Christina Foster', + 'Region Covered': 'Delaware', + 'February 2019 Sales': '23368', + 'Cost of Sales': '1500', + 'January 2019 Sales': '17537', + 'Percent Change': '.33' + }, + { + 'Salesperson': 'Judy Green', + 'Region Covered': 'Texas', + 'February 2019 Sales': '21510', + 'Cost of Sales': '1657', + 'January 2019 Sales': '24951', + 'Percent Change': '-.14' }, + { + 'Salesperson': 'Paula Hall', + 'Region Covered': 'Virginia', + 'February 2019 Sales': '21314', + 'Cost of Sales': '2418', + 'January 2019 Sales': '18082', + 'Percent Change': '.18' + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/styles.css new file mode 100644 index 0000000000..ff6dbffb89 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/src/styles.css @@ -0,0 +1,12 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/systemjs.config.js new file mode 100644 index 0000000000..123ccba7d9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/systemjs.config.js @@ -0,0 +1,57 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/21.1.35/", + "angular:": "https://unpkg.com/@angular/" + }, + map: { + app: 'app', + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-angular-base": "syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js", + "@syncfusion/ej2-angular-spreadsheet": "syncfusion:ej2-angular-spreadsheet/dist/ej2-angular-spreadsheet.umd.min.js", + + '@angular/core': 'angular:core@5.2.0/bundles/core.umd.js', + '@angular/common': 'angular:common@5.2.0/bundles/common.umd.js', + '@angular/compiler': 'angular:compiler@5.2.0/bundles/compiler.umd.js', + '@angular/http': 'angular:http@5.2.0/bundles/http.umd.js', + '@angular/forms': 'angular:forms@5.2.0/bundles/forms.umd.js', + '@angular/router': 'angular:router@5.2.0/bundles/router.umd.js', + '@angular/platform-browser': 'angular:platform-browser@5.2.0/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic@5.2.0/bundles/platform-browser-dynamic.umd.js', + '@angular/material': 'angular:material@5.2.0/bundles/material.umd.js', + 'rxjs': 'https://unpkg.com/rxjs@5.5.10' + }, + packages: { + 'app': { main: 'main', defaultExtension: 'ts' }, + 'rxjs': { main: 'index' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/format/border-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/index.html new file mode 100644 index 0000000000..e57f943476 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/app.ts new file mode 100644 index 0000000000..91355e7543 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/app.ts @@ -0,0 +1,39 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj!: SpreadsheetComponent; + data: object[] = dataSource; + + actionBegin(args: any): void{ + // If the user is pasting, force paste to values only. + if (args.action === "clipboard") { + args.args.eventArgs.type = 'Values'; + } + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/datasource.ts new file mode 100644 index 0000000000..75c3753ec6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/datasource.ts @@ -0,0 +1,237 @@ +/** + * Editing data source + */ +export let dataSource: Object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/paste-values-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/index.html new file mode 100644 index 0000000000..e57f943476 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/app.ts new file mode 100644 index 0000000000..4b1ddca4f0 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/app.ts @@ -0,0 +1,78 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellStyleModel, getCellIndexes, getRangeIndexes } from '@syncfusion/ej2-angular-spreadsheet'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj!: SpreadsheetComponent; + data: object[] = dataSource; + + // Columns to be prevented editing. + public readOnlyColumns: number[] = [0, 2]; + + // Triggers when cell editing starts in the spreadsheet. + cellEdit(args: any){ + const addressRange: number[] = getCellIndexes(args.address.split('!')[1]); + // preventing cellEditing from the readOnly columns + if (this.readOnlyColumns.includes(addressRange[1])) { + args.cancel = true; + } + } + + // Triggers whenever any action begins in spreadsheet. + actionBegin(args: any){ + var address: string | undefined; + if (args.action == "clipboard") { + address = args.args.eventArgs.pastedRange; + } + else if (args.action == "autofill") { + address = args.args.eventArgs.fillRange; + } + else if (args.action == "format" || args.action == "validation" || args.action == "conditionalFormat") { + address = args.args.eventArgs.range; + } + else if (args.action == "cut") { + address = args.args.copiedRange + } + if (address) { + const addressRange: number[] = getRangeIndexes(address); + const colStart: number = addressRange[1]; + const colEnd: number = addressRange[3]; + // preventing other actions from the readOnly columns + for (var col: number = colStart; col <= colEnd; col++) { + if (this.readOnlyColumns.includes(col)) { + if (args.args.action == "cut") { + args.args.cancel = true; + } else { + args.args.eventArgs.cancel = true; + } + break; + } + } + } + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/datasource.ts new file mode 100644 index 0000000000..75c3753ec6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/datasource.ts @@ -0,0 +1,237 @@ +/** + * Editing data source + */ +export let dataSource: Object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/prevent-actions-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/index.html new file mode 100644 index 0000000000..e57f943476 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/app.ts new file mode 100644 index 0000000000..68c81648de --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/app.ts @@ -0,0 +1,41 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: ` + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj!: SpreadsheetComponent; + data: object[] = dataSource; + + create(): void{ + if (this.spreadsheetObj) { + // To change height for single row + this.spreadsheetObj.setRowsHeight(40, ['2']); + // To change height for multiple rows + this.spreadsheetObj.setRowsHeight(40, ['4:8', '10:12']); + } + }; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/datasource.ts new file mode 100644 index 0000000000..75c3753ec6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/datasource.ts @@ -0,0 +1,237 @@ +/** + * Editing data source + */ +export let dataSource: Object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/row-height-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/index.html new file mode 100644 index 0000000000..a36c5a3144 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/index.html @@ -0,0 +1,28 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/app.ts new file mode 100644 index 0000000000..ac15fceb56 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/app.ts @@ -0,0 +1,88 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + + + +import { Component, OnInit,ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + +standalone: true, + selector: 'app-container', + template: ` +
+
+ + + + + + +
+
+ ` +}) +export class AppComponent implements OnInit { + + @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent; + ngOnInit(): void { + } + // Items in the Home tab to hide/show (by index) + // Adjust these indices based on your app's ribbon layout + public homeItemsToToggle = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15]; + + hideInsertTab() { + if (!this.spreadsheetObj) return; + this.spreadsheetObj.hideRibbonTabs(['Insert']); + }; + + showInsertTab() { + if (!this.spreadsheetObj) return; + (this.spreadsheetObj as any).hideRibbonTabs(['Insert'], false); + }; + + hideHomeItems() { + if (!this.spreadsheetObj) return; + this.spreadsheetObj.hideToolbarItems('Home', this.homeItemsToToggle); + }; + + showHomeItems() { + if (!this.spreadsheetObj) return; + (this.spreadsheetObj as any).hideToolbarItems('Home', this.homeItemsToToggle, false); + }; + + created() { + if (!this.spreadsheetObj) return; + + // Initial state: hide the "Insert" tab and selected "Home" items + this.spreadsheetObj.hideRibbonTabs(['Insert']); + this.spreadsheetObj.hideToolbarItems('Home', this.homeItemsToToggle); + } + + onQuickNote(){ + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const range = sheet.selectedRange || sheet.activeCell || 'A1'; + this.spreadsheetObj.updateCell({ notes: { text: 'Note' } } as any, range); + }; + + onHighlight(){ + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const range = sheet.selectedRange || sheet.activeCell || 'A1'; + this.spreadsheetObj.cellFormat({ backgroundColor: '#FFF9C4', color: '#5D4037' }, range); + }; + + onClear(){ + if (!this.spreadsheetObj) return; + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const range = sheet.selectedRange || sheet.activeCell || 'A1'; + this.spreadsheetObj.clear({ type: 'Clear All', range }); + }; +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/show-or-hide-ribbon-items-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/index.html new file mode 100644 index 0000000000..e57f943476 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
LOADING....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/app.ts new file mode 100644 index 0000000000..492f9b9ad5 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/app.ts @@ -0,0 +1,212 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent, SpreadsheetAllModule, CellStyleModel, SheetModel, getRangeAddress, setRow, getCellAddress, getRangeIndexes } from '@syncfusion/ej2-angular-spreadsheet'; +import { createCheckBox } from '@syncfusion/ej2-angular-buttons'; +import { select } from '@syncfusion/ej2-base'; +import { dataSource } from './datasource'; + +@Component({ +imports: [ + + SpreadsheetAllModule + ], + + +standalone: true, + selector: 'app-container', + template: `
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj!: SpreadsheetComponent; + + data: object[] = dataSource; + public cellStyle: CellStyleModel = { verticalAlign: 'middle' }; + public scrollSettings = { isFinite: true }; + + onCreated(): void { + if (!this.spreadsheetObj) return; + const usedRange: any = this.spreadsheetObj.getActiveSheet().usedRange; + const lastCell: string = getCellAddress(0, usedRange.colIndex); + this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, `A1:${lastCell}`); + this.updateRowCountBasedOnData(); + } + + updateRowCountBasedOnData(): void { + const sheet: SheetModel = this.spreadsheetObj.getActiveSheet(); + const usedRange: any = sheet.usedRange; + this.spreadsheetObj.setSheetPropertyOnMute(sheet, 'rowCount', usedRange.rowIndex > 0 ? usedRange.rowIndex + 1 : 2); + this.spreadsheetObj.resize(); + } + + updateSelectedState(selectAllInput?: any, rowCallBack?: any, updateSelectedRange?: any): void { + const sheet: any = this.spreadsheetObj.getActiveSheet(); + let selectedCount = 0; + const lastColIdx = sheet.colCount - 1; + const newRangeColl: string[] = []; + let selectionStartIdx: number | undefined; + let isSelectionStarted: boolean | undefined; + + for (let rowIdx = 1; rowIdx < sheet.rowCount; rowIdx++) { + if (rowCallBack) rowCallBack(rowIdx); + if (sheet.rows[rowIdx] && sheet.rows[rowIdx].selected) { + if (updateSelectedRange && !isSelectionStarted) { + isSelectionStarted = true; + selectionStartIdx = rowIdx; + } + selectedCount++; + } else if (isSelectionStarted) { + newRangeColl.push(getRangeAddress([selectionStartIdx!, 0, rowIdx - 1, lastColIdx])); + isSelectionStarted = false; + } + } + + if (selectAllInput) { + if (selectedCount > 0) { + if (selectedCount === sheet.rowCount - 1) { + selectAllInput.classList.remove('e-stop'); + selectAllInput.classList.add('e-check'); + } else { + selectAllInput.classList.add('e-stop'); + } + } else { + selectAllInput.classList.remove('e-check'); + selectAllInput.classList.remove('e-stop'); + } + } + + if (updateSelectedRange) { + if (isSelectionStarted) { + newRangeColl.push(getRangeAddress([selectionStartIdx!, 0, sheet.rowCount - 1, lastColIdx])); + } else if (!newRangeColl.length) { + newRangeColl.push(getRangeAddress([0, 0, 0, 0])); + } + this.spreadsheetObj.selectRange(newRangeColl.join(' ')); + } + } + + renderCheckbox(args: any): void { + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const rowIdx: number = args.rowIndex; + const checkbox = createCheckBox(this.spreadsheetObj.createElement, false, { + checked: !!(sheet.rows[rowIdx] && sheet.rows[rowIdx].selected) + }); + args.element.appendChild(checkbox); + + checkbox.addEventListener('click', () => { + const updateCheckboxSelection = (curRowIdx: any) => { + if (curRowIdx === rowIdx) { + const inputEle = select('.e-frame', checkbox); + let checked = !inputEle.classList.contains('e-check'); + setRow(sheet, rowIdx, { selected: checked } as any); + if (checked) inputEle.classList.add('e-check'); + else inputEle.classList.remove('e-check'); + } + }; + const selectAllCell: any = this.spreadsheetObj.getCell(0, 0); + this.updateSelectedState(selectAllCell && select('.e-frame', selectAllCell) as any, updateCheckboxSelection, true); + }); + } + + renderSelectAllCheckbox(tdEle: any): void { + const checkbox = createCheckBox(this.spreadsheetObj.createElement, false); + const inputEle: HTMLElement = select('.e-frame', checkbox); + this.updateSelectedState(inputEle); + tdEle.appendChild(checkbox); + + checkbox.addEventListener('click', () => { + const sheet: SheetModel = this.spreadsheetObj.getActiveSheet(); + const checked: boolean = !inputEle.classList.contains('e-check'); + const rowCallback = (rowIdx: number) => { + setRow(sheet, rowIdx, { selected: checked } as any); + const cell: any = this.spreadsheetObj.getCell(rowIdx, 0); + const checkboxInput: HTMLElement = cell && select('.e-frame', cell); + if (checkboxInput) { + if (checked) checkboxInput.classList.add('e-check'); + else checkboxInput.classList.remove('e-check'); + } + }; + this.updateSelectedState(inputEle, rowCallback, true); + if (!checked) this.spreadsheetObj.selectRange('A1'); + }); + } + + beforeCellRender(args: any): void { + if (args.colIndex === 0 && args.rowIndex !== undefined) { + const sheet: any = this.spreadsheetObj.getActiveSheet(); + if (args.rowIndex === 0) { + this.renderSelectAllCheckbox(args.element); + } else if (args.rowIndex < sheet.rowCount) { + this.renderCheckbox(args); + } + } + } + + beforeSelect(args: any): void { + const sheet: any = this.spreadsheetObj.getActiveSheet(); + const cellRngIdx: number[] = getRangeIndexes(args.range); + const startRow = cellRngIdx[0]; + const startCol = cellRngIdx[1]; + const endRow = cellRngIdx[2]; + const endCol = cellRngIdx[3]; + const lastColIdx = sheet.colCount - 1; + + if (startRow === endRow && startCol === endCol) return; + if (startCol === 0 && endCol === lastColIdx) return; + args.cancel = true; + } + + beforeEditHandler(args: any): void { + args.cancel = true; + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/datasource.ts new file mode 100644 index 0000000000..0f9734c6f2 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/datasource.ts @@ -0,0 +1,425 @@ +/** + * Editing data source + */ +export let dataSource: Object[] = [ + { + "EmployeeID": 10001, + "Employees": "Laura Nancy", + "Designation": "Designer", + "Location": "France", + "Status": "Inactive", + "Trustworthiness": "Sufficient", + "Rating": 0, + "Software": 69, + "EmployeeImg": "usermale", + "CurrentSalary": 84194, + "Address": "Taucherstraße 10", + "Mail": "laura15@jourrapide.com" + }, + { + "EmployeeID": 10002, + "Employees": "Zachery Van", + "Designation": "CFO", + "Location": "Canada", + "Status": "Inactive", + "Trustworthiness": "Insufficient", + "Rating": 3, + "Software": 99, + "EmployeeImg": "usermale", + "CurrentSalary": 55349, + "Address": "5ª Ave. Los Palos Grandes", + "Mail": "zachery109@sample.com" + }, + { + "EmployeeID": 10003, + "Employees": "Rose Fuller", + "Designation": "CFO", + "Location": "France", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 1, + "Software": 1, + "EmployeeImg": "usermale", + "CurrentSalary": 16477, + "Address": "2817 Milton Dr.", + "Mail": "rose55@rpy.com" + }, + { + "EmployeeID": 10004, + "Employees": "Jack Bergs", + "Designation": "Manager", + "Location": "Mexico", + "Status": "Inactive", + "Trustworthiness": "Insufficient", + "Rating": 3, + "Software": 36, + "EmployeeImg": "usermale", + "CurrentSalary": 49040, + "Address": "2, rue du Commerce", + "Mail": "jack30@sample.com" + }, + { + "EmployeeID": 10005, + "Employees": "Vinet Bergs", + "Designation": "Program Directory", + "Location": "UK", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 1, + "Software": 39, + "EmployeeImg": "usermale", + "CurrentSalary": 5495, + "Address": "Rua da Panificadora, 12", + "Mail": "vinet32@jourrapide.com" + }, + { + "EmployeeID": 10006, + "Employees": "Buchanan Van", + "Designation": "Designer", + "Location": "Germany", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 4, + "Software": 78, + "EmployeeImg": "usermale", + "CurrentSalary": 42182, + "Address": "24, place Kléber", + "Mail": "buchanan18@mail.com" + }, + { + "EmployeeID": 10007, + "Employees": "Dodsworth Nancy", + "Designation": "Project Lead", + "Location": "USA", + "Status": "Inactive", + "Trustworthiness": "Sufficient", + "Rating": 0, + "Software": 0, + "EmployeeImg": "userfemale", + "CurrentSalary": 35776, + "Address": "Rua do Paço, 67", + "Mail": "dodsworth84@mail.com" + }, + { + "EmployeeID": 10008, + "Employees": "Laura Jack", + "Designation": "Developer", + "Location": "Austria", + "Status": "Inactive", + "Trustworthiness": "Perfect", + "Rating": 3, + "Software": 89, + "EmployeeImg": "usermale", + "CurrentSalary": 25108, + "Address": "Rua da Panificadora, 12", + "Mail": "laura82@mail.com" + }, + { + "EmployeeID": 10009, + "Employees": "Anne Fuller", + "Designation": "Program Directory", + "Location": "Mexico", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 0, + "Software": 19, + "EmployeeImg": "userfemale", + "CurrentSalary": 32568, + "Address": "Gran Vía, 1", + "Mail": "anne97@jourrapide.com" + }, + { + "EmployeeID": 10010, + "Employees": "Buchanan Andrew", + "Designation": "Designer", + "Location": "Austria", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 1, + "Software": 62, + "EmployeeImg": "userfemale", + "CurrentSalary": 12320, + "Address": "P.O. Box 555", + "Mail": "buchanan50@jourrapide.com" + }, + { + "EmployeeID": 10011, + "Employees": "Andrew Janet", + "Designation": "System Analyst", + "Location": "Germany", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 3, + "Software": 8, + "EmployeeImg": "userfemale", + "CurrentSalary": 20890, + "Address": "Starenweg 5", + "Mail": "andrew63@mail.com" + }, + { + "EmployeeID": 10012, + "Employees": "Margaret Tamer", + "Designation": "System Analyst", + "Location": "Germany", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 4, + "Software": 7, + "EmployeeImg": "userfemale", + "CurrentSalary": 22337, + "Address": "Magazinweg 7", + "Mail": "margaret26@mail.com" + }, + { + "EmployeeID": 10013, + "Employees": "Tamer Fuller", + "Designation": "CFO", + "Location": "Canada", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 3, + "Software": 78, + "EmployeeImg": "usermale", + "CurrentSalary": 89181, + "Address": "Taucherstraße 10", + "Mail": "tamer40@arpy.com" + }, + { + "EmployeeID": 10014, + "Employees": "Tamer Anne", + "Designation": "CFO", + "Location": "Sweden", + "Status": "Active", + "Trustworthiness": "Sufficient", + "Rating": 0, + "Software": 18, + "EmployeeImg": "usermale", + "CurrentSalary": 20998, + "Address": "Taucherstraße 10", + "Mail": "tamer68@arpy.com" + }, + { + "EmployeeID": 10015, + "Employees": "Anton Davolio", + "Designation": "Project Lead", + "Location": "France", + "Status": "Active", + "Trustworthiness": "Sufficient", + "Rating": 4, + "Software": 8, + "EmployeeImg": "userfemale", + "CurrentSalary": 48232, + "Address": "Luisenstr. 48", + "Mail": "anton46@mail.com" + }, + { + "EmployeeID": 10016, + "Employees": "Buchanan Buchanan", + "Designation": "System Analyst", + "Location": "Austria", + "Status": "Inactive", + "Trustworthiness": "Perfect", + "Rating": 0, + "Software": 19, + "EmployeeImg": "usermale", + "CurrentSalary": 43041, + "Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", + "Mail": "buchanan68@mail.com" + }, + { + "EmployeeID": 10017, + "Employees": "King Buchanan", + "Designation": "Program Directory", + "Location": "Sweden", + "Status": "Active", + "Trustworthiness": "Sufficient", + "Rating": 0, + "Software": 44, + "EmployeeImg": "userfemale", + "CurrentSalary": 25259, + "Address": "Magazinweg 7", + "Mail": "king80@jourrapide.com" + }, + { + "EmployeeID": 10018, + "Employees": "Rose Michael", + "Designation": "Project Lead", + "Location": "Canada", + "Status": "Active", + "Trustworthiness": "Perfect", + "Rating": 4, + "Software": 31, + "EmployeeImg": "userfemale", + "CurrentSalary": 91156, + "Address": "Fauntleroy Circus", + "Mail": "rose75@mail.com" + }, + { + "EmployeeID": 10019, + "Employees": "King Bergs", + "Designation": "Developer", + "Location": "Germany", + "Status": "Active", + "Trustworthiness": "Sufficient", + "Rating": 2, + "Software": 29, + "EmployeeImg": "userfemale", + "CurrentSalary": 28826, + "Address": "2817 Milton Dr.", + "Mail": "king57@jourrapide.com" + }, + { + "EmployeeID": 10020, + "Employees": "Davolio Fuller", + "Designation": "Designer", + "Location": "Canada", + "Status": "Inactive", + "Trustworthiness": "Sufficient", + "Rating": 3, + "Software": 35, + "EmployeeImg": "userfemale", + "CurrentSalary": 71035, + "Address": "Gran Vía, 1", + "Mail": "davolio29@arpy.com" + }, + { + "EmployeeID": 10021, + "Employees": "Rose Rose", + "Designation": "CFO", + "Location": "Germany", + "Status": "Active", + "Trustworthiness": "Perfect", + "Rating": 3, + "Software": 38, + "EmployeeImg": "usermale", + "CurrentSalary": 68123, + "Address": "Rua do Mercado, 12", + "Mail": "rose54@arpy.com" + }, + { + "EmployeeID": 10022, + "Employees": "Andrew Michael", + "Designation": "Program Directory", + "Location": "UK", + "Status": "Inactive", + "Trustworthiness": "Insufficient", + "Rating": 2, + "Software": 61, + "EmployeeImg": "userfemale", + "CurrentSalary": 75470, + "Address": "2, rue du Commerce", + "Mail": "andrew88@jourrapide.com" + }, + { + "EmployeeID": 10023, + "Employees": "Davolio Kathryn", + "Designation": "Manager", + "Location": "Germany", + "Status": "Active", + "Trustworthiness": "Perfect", + "Rating": 3, + "Software": 25, + "EmployeeImg": "usermale", + "CurrentSalary": 25234, + "Address": "Hauptstr. 31", + "Mail": "davolio42@sample.com" + }, + { + "EmployeeID": 10024, + "Employees": "Anne Fleet", + "Designation": "System Analyst", + "Location": "UK", + "Status": "Active", + "Trustworthiness": "Perfect", + "Rating": 3, + "Software": 0, + "EmployeeImg": "userfemale", + "CurrentSalary": 8341, + "Address": "59 rue de lAbbaye", + "Mail": "anne86@arpy.com" + }, + { + "EmployeeID": 10025, + "Employees": "Margaret Andrew", + "Designation": "System Analyst", + "Location": "Germany", + "Status": "Inactive", + "Trustworthiness": "Insufficient", + "Rating": 3, + "Software": 51, + "EmployeeImg": "userfemale", + "CurrentSalary": 84975, + "Address": "P.O. Box 555", + "Mail": "margaret41@arpy.com" + }, + { + "EmployeeID": 10026, + "Employees": "Kathryn Laura", + "Designation": "Project Lead", + "Location": "Austria", + "Status": "Active", + "Trustworthiness": "Insufficient", + "Rating": 3, + "Software": 48, + "EmployeeImg": "usermale", + "CurrentSalary": 97282, + "Address": "Avda. Azteca 123", + "Mail": "kathryn82@rpy.com" + }, + { + "EmployeeID": 10027, + "Employees": "Michael Michael", + "Designation": "Developer", + "Location": "UK", + "Status": "Inactive", + "Trustworthiness": "Perfect", + "Rating": 4, + "Software": 16, + "EmployeeImg": "usermale", + "CurrentSalary": 4184, + "Address": "Rua do Paço, 67", + "Mail": "michael58@jourrapide.com" + }, + { + "EmployeeID": 10028, + "Employees": "Leverling Vinet", + "Designation": "Project Lead", + "Location": "Germany", + "Status": "Inactive", + "Trustworthiness": "Perfect", + "Rating": 0, + "Software": 57, + "EmployeeImg": "userfemale", + "CurrentSalary": 38370, + "Address": "59 rue de lAbbaye", + "Mail": "leverling102@sample.com" + }, + { + "EmployeeID": 10029, + "Employees": "Rose Jack", + "Designation": "Developer", + "Location": "UK", + "Status": "Active", + "Trustworthiness": "Perfect", + "Rating": 0, + "Software": 46, + "EmployeeImg": "userfemale", + "CurrentSalary": 84790, + "Address": "Rua do Mercado, 12", + "Mail": "rose108@jourrapide.com" + }, + { + "EmployeeID": 10030, + "Employees": "Vinet Van", + "Designation": "Developer", + "Location": "USA", + "Status": "Active", + "Trustworthiness": "Sufficient", + "Rating": 0, + "Software": 40, + "EmployeeImg": "usermale", + "CurrentSalary": 71005, + "Address": "Gran Vía, 1", + "Mail": "vinet90@jourrapide.com" + } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/styles.css new file mode 100644 index 0000000000..c529755249 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/src/styles.css @@ -0,0 +1,15 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-like-grid-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file