From c2e9ca6f80ff7af5a2d407b5dd05b3b478a4d245 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 13 Nov 2025 02:40:09 +0530 Subject: [PATCH 1/3] 986040: Need to include "Create Object Structure" section in Angular Spreadsheet UG documentation --- Document-Processing-toc.html | 4 + .../how-to/create-a-object-structure.md | 178 +++++++ .../how-to/create-a-object-structure.md | 178 +++++++ .../how-to/create-a-object-structure.md | 187 +++++++ .../angular/json-structure-cs1/angular.json | 93 ++++ .../angular/json-structure-cs1/index.html | 13 + .../json-structure-cs1/src/app.component.ts | 24 + .../json-structure-cs1/src/datasource.ts | 475 +++++++++++++++++ .../angular/json-structure-cs1/src/main.ts | 5 + .../angular/json-structure-cs1/src/styles.css | 11 + .../angular/json-structure-cs1/tsconfig.json | 32 ++ .../angular/json-structure/angular.json | 93 ++++ .../angular/json-structure/index.html | 13 + .../json-structure/src/app.component.ts | 24 + .../angular/json-structure/src/datasource.ts | 475 +++++++++++++++++ .../angular/json-structure/src/main.ts | 5 + .../angular/json-structure/src/styles.css | 11 + .../angular/json-structure/tsconfig.json | 32 ++ .../create-obj-structure/OpenController.cs | 11 + .../asp-net-core/create-obj-structure/razor | 485 +++++++++++++++++ .../create-obj-structure/tagHelper | 486 ++++++++++++++++++ .../json-structure-cs1/OpenController.cs | 11 + .../asp-net-core/json-structure-cs1/razor | 485 +++++++++++++++++ .../asp-net-core/json-structure-cs1/tagHelper | 486 ++++++++++++++++++ .../create-obj-structure/OpenController.cs | 9 + .../asp-net-mvc/create-obj-structure/razor | 485 +++++++++++++++++ .../create-obj-structure/tagHelper | 486 ++++++++++++++++++ .../json-structure-cs1/OpenController.cs | 9 + .../asp-net-mvc/json-structure-cs1/razor | 485 +++++++++++++++++ .../asp-net-mvc/json-structure-cs1/tagHelper | 486 ++++++++++++++++++ 30 files changed, 5777 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md create mode 100644 Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/angular.json create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/app.component.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/datasource.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/main.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/styles.css create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/tsconfig.json create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/OpenController.cs create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/razor create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/tagHelper create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/OpenController.cs create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/razor create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/tagHelper create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/OpenController.cs create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/razor create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/tagHelper create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/OpenController.cs create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/razor create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/tagHelper diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index cff23f90d..cf9b5c9ba 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -4675,6 +4675,7 @@
  • How To @@ -4725,6 +4726,7 @@
  • How To @@ -4777,6 +4779,7 @@
  • How To @@ -4875,6 +4878,7 @@
  • How To diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md new file mode 100644 index 000000000..27bcbd4b4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md @@ -0,0 +1,178 @@ +--- +layout: post +title: Create an object structure in ASP.NET Core Spreadsheet Control | Syncfusion +description: Learn here all about how to create an object structure in ASP.NET Core Spreadsheet Control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Create a object structure +documentation: ug +--- + +# Create an object structure in ASP.NET Core Spreadsheet Control + +This topic guides you to construct a JSON structure that can be passed to the `openFromJson` method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#properties) of the spreadsheet as value. + +```js +{ Workbook: {} } +``` + +The following properties are the root level properties of the `Workbook` object. + +| Property | Type | Description | +|-------|-------|-------| +| activeSheetIndex | number | Specifies active sheet index in the workbook. | +| sheets | `Sheet[]` | Contains a list of sheet properties. | +| definedNames | `DefineName[]` | Specifies the name for a range and uses it in the formula for calculation. | + +The following table defines each property of the `Sheet`. + +| Property | Type | Description | +|-------|-------|-------| +| name | string | Specifies the name of the sheet. | +| selectedRange | string | Specifies selected range in the sheet. | +| activeCell | string | Specifies active cell within `selectedRange` in the sheet. | +| topLeftCell | string | Specified cell will be positioned at the upper-left corner of the sheet. | +| showHeaders | boolean | Specifies to show or hide column and row headers in the sheet. | +| showGridLines | boolean | Specifies to show or hide gridlines in the sheet. | +| isProtected | boolean | Specifies to protect the cells in the sheet. | +| state | [`SheetState`](../worksheet#sheet-visibility) | Specifies the sheet visibility state. There must be at least one visible sheet in Spreadsheet. | +| columns | `Column[]` | Contains a list of column properties | +| rows | `Row[]` | Contains a list of row properties | +| protectSettings | [`ProtectSettings`](../protect-sheet#protect-sheet) | Configures protect and its options. | +| conditionalFormats | `ConditionalFormat[]` | Specifies the conditional formatting for the sheet. | + +The following table defines each property of the `Column`. + +| Property | Type | Description | +|-------|-------|-------| +| width | number | Specifies the width of the column. | +| customWidth | boolean | Specifies custom width of the column. | +| hidden | boolean | To hide or show the column in the sheet. | + +The following table defines each property of the `Row`. + +| Property | Type | Description | +|-------|-------|-------| +| height | number | Specifies the height of the row. | +| customHeight | boolean | Specifies the custom height of the row. | +| hidden | boolean | To hide or show the row in the sheet. | +| cells | `Cell[]` | Contains a list of cell properties | + +The following table defines each property of the `Cell`. + +| Property | Type | Description | +|-------|-------|-------| +| value | string | Defines the value of the cell which can be text or number. | +| formula | string | Defines the formula or expression of the cell. | +| format | string | Specifies the number format code to display the value in specified number format. | +| hyperlink | string | Specifies the hyperlink of the cell. | +| wrap | boolean | Wraps the cell text to the next line, if the text width exceeds the column width. | +| isLocked | boolean | Specifies the cell whether it is locked or not, for allowing edit range in the spreadsheet protect option. | +| colSpan | number | Specifies the column-wise cell merge count. | +| rowSpan | number | Specifies the row-wise cell merge count. | +| style | `CellStyle` | Specifies the cell style options. | +| validation | `Validation` | Specifies the validation of the cell. | +| image | `Image[]` | Specifies the image of the cell. | + +The following table defines each property of the `CellStyle`. + +| Property | Type | Description | +|-------|-------|-------| +| fontFamily | `FontFamily` | Specifies font family of the cell. | +| verticalAlign | `VerticalAlign` | Specifies vertical align of the cell. | +| textAlign | `TextAlign` | Specifies text align style of the cell. | +| textIndent | string | Specifies text indent style of the cell. | +| color | string | Specifies font color of the cell. | +| backgroundColor | string | Specifies the background color of the cell. | +| fontWeight | `FontWeight` | Specifies font weight of the cell. | +| fontStyle | `FontStyle` | Specifies font style of the cell. | +| fontSize | string | Specifies font size of the cell. | +| textDecoration | `TextDecoration` | Specifies text decoration of the cell. | +| border | string | Specifies border of the cell. | +| borderTop | string | Specifies top border of the cell. | +| borderBottom | string | Specifies bottom border of the cell. | +| borderLeft | string | Specifies left border of the cell. | +| borderRight | string | Specifies right border of the cell. | + +```js +type FontFamily = 'Arial' | 'Arial Black' | 'Axettac Demo' | 'Batang' | 'Book Antiqua' | 'Calibri' | 'Courier' | 'Courier New' | 'Din Condensed' | 'Georgia' | 'Helvetica' | 'Helvetica New' | 'Roboto' | 'Tahoma' | 'Times New Roman' | 'Verdana'; +type VerticalAlign = 'bottom' | 'middle' | 'top'; +type TextAlign = 'left' | 'center' | 'right'; +type FontWeight = 'bold' | 'normal'; +type FontStyle = 'italic' | 'normal'; +type TextDecoration = 'underline' | 'line-through' | 'underline line-through' | 'none'; +``` + +The following table defines each property of the `Validation`. + +| Property | Type | Description | +|-------|-------|-------| +| type | `ValidationType` | Specifies Validation Type. | +| operator | `ValidationOperator` | Specifies Validation Operator. | +| value1 | string | Specifies Validation Minimum Value. | +| value2 | string | Specifies Validation Maximum Value. | +| ignoreBlank | boolean | Specifies IgnoreBlank option in Data Validation. | +| inCellDropDown | boolean | Specifies InCellDropDown option in Data Validation. | +| isHighlighted | boolean | Specifies to allow Highlight Invalid Data. | +| | | | + +```js +type ValidationType = 'WholeNumber' | 'Decimal' | 'Date' | 'TextLength' | 'List' | 'Time'; +type ValidationOperator = 'Between' | 'NotBetween' | 'EqualTo' | 'NotEqualTo' | 'LessThan' | 'GreaterThan' | 'GreaterThanOrEqualTo' | 'LessThanOrEqualTo'; +``` + +The following table defines each property of the `Image`. + +| Property | Type | Description | +|-------|-------|-------| +| src | string | Specifies the image source. | +| id | string | Specifies image element id. | +| height | number | Specifies the height of the image. | +| width | number | Specifies the width of the image. | +| top | number | Specifies the top position of the image. | +| left | number | Specifies the left position of the image. | + +The following table defines each property of the `ConditionalFormat`. + +| Property | Type | Description | +|-------|-------|-------| +| type | `HighlightCell` or `TopBottom` or `DataBar` or `ColorScale` or `IconSet` | Specifies Conditional formatting Type. | +| format | `Format` | Specifies format. | +| cFColor | `CFColor` | Specifies Conditional formatting Highlight Color. | +| value | string | Specifies Conditional formatting value. | +| range | string | Specifies Conditional formatting range. | + +```js +type HighlightCell = 'GreaterThan' | 'LessThan' | 'Between' | 'EqualTo' | 'ContainsText' | 'DateOccur' | 'Duplicate' | 'Unique'; +type TopBottom = 'Top10Items' | 'Bottom10Items' | 'Top10Percentage' | 'Bottom10Percentage' | 'BelowAverage' | 'AboveAverage'; +type DataBar = 'BlueDataBar' | 'GreenDataBar' | 'RedDataBar' | 'OrangeDataBar' | 'LightBlueDataBar' | 'PurpleDataBar'; +type ColorScale = 'GYRColorScale' | 'RYGColorScale' | 'GWRColorScale' | 'RWGColorScale' | 'BWRColorScale' | 'RWBColorScale' | 'WRColorScale' | 'RWColorScale' | 'GWColorScale' | 'WGColorScale' | 'GYColorScale' | 'YGColorScale'; +type IconSet = 'ThreeArrows' | 'ThreeArrowsGray' | 'FourArrowsGray' | 'FourArrows' | 'FiveArrowsGray' | 'FiveArrows' | 'ThreeTrafficLights1' | 'ThreeTrafficLights2' | 'ThreeSigns' | 'FourTrafficLights' | 'FourRedToBlack' | 'ThreeSymbols' | 'ThreeSymbols2' | 'ThreeFlags' | 'FourRating' | 'FiveQuarters' | 'FiveRating' | 'ThreeTriangles' | 'ThreeStars' | 'FiveBoxes'; +type CFColor = 'RedFT' | 'YellowFT' | 'GreenFT' | 'RedF' | 'RedT'; +``` + +The following table defines each property of the `Format`. + +| Property | Type | Description | +|-------|-------|-------| +| format | string | Specifies the number format code to display the value in specified number format. | +| style | `CellStyle` | Specifies the cell style options. | + +The following table defines each property of the `DefinedName`. + +| Property | Type | Description | +|-------|-------|-------| +| name | string | Specifies a name for the defined name, which can be used in the formula. | +| scope | string | Specifies scope for the defined name. | +| comment | string | Specifies comment for the defined name. | +| refersTo | string | Specifies reference for the defined name. | + +In the following demo, the JSON structure is passed to the `openFromJson` method to render the spreadsheet in the [`created`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Created) event. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/json-structure-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/json-structure-cs1/OpenController.cs %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md new file mode 100644 index 000000000..5fe79dca7 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md @@ -0,0 +1,178 @@ +--- +layout: post +title: Create an object structure in ASP.NET MVC Spreadsheet Control | Syncfusion +description: Learn here all about how to create an object structure in ASP.NET MVC Spreadsheet Control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Create a object structure +documentation: ug +--- + +# Create an object structure in ASP.NET MVC Spreadsheet Control + +This topic guides you to construct a JSON structure that can be passed to the `openFromJson` method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#properties) of the spreadsheet as value. + +```js +{ Workbook: {} } +``` + +The following properties are the root level properties of the `Workbook` object. + +| Property | Type | Description | +|-------|-------|-------| +| activeSheetIndex | number | Specifies active sheet index in the workbook. | +| sheets | `Sheet[]` | Contains a list of sheet properties. | +| definedNames | `DefineName[]` | Specifies the name for a range and uses it in the formula for calculation. | + +The following table defines each property of the `Sheet`. + +| Property | Type | Description | +|-------|-------|-------| +| name | string | Specifies the name of the sheet. | +| selectedRange | string | Specifies selected range in the sheet. | +| activeCell | string | Specifies active cell within `selectedRange` in the sheet. | +| topLeftCell | string | Specified cell will be positioned at the upper-left corner of the sheet. | +| showHeaders | boolean | Specifies to show or hide column and row headers in the sheet. | +| showGridLines | boolean | Specifies to show or hide gridlines in the sheet. | +| isProtected | boolean | Specifies to protect the cells in the sheet. | +| state | [`SheetState`](../worksheet#sheet-visibility) | Specifies the sheet visibility state. There must be at least one visible sheet in Spreadsheet. | +| columns | `Column[]` | Contains a list of column properties | +| rows | `Row[]` | Contains a list of row properties | +| protectSettings | [`ProtectSettings`](../protect-sheet#protect-sheet) | Configures protect and its options. | +| conditionalFormats | `ConditionalFormat[]` | Specifies the conditional formatting for the sheet. | + +The following table defines each property of the `Column`. + +| Property | Type | Description | +|-------|-------|-------| +| width | number | Specifies the width of the column. | +| customWidth | boolean | Specifies custom width of the column. | +| hidden | boolean | To hide or show the column in the sheet. | + +The following table defines each property of the `Row`. + +| Property | Type | Description | +|-------|-------|-------| +| height | number | Specifies the height of the row. | +| customHeight | boolean | Specifies the custom height of the row. | +| hidden | boolean | To hide or show the row in the sheet. | +| cells | `Cell[]` | Contains a list of cell properties | + +The following table defines each property of the `Cell`. + +| Property | Type | Description | +|-------|-------|-------| +| value | string | Defines the value of the cell which can be text or number. | +| formula | string | Defines the formula or expression of the cell. | +| format | string | Specifies the number format code to display the value in specified number format. | +| hyperlink | string | Specifies the hyperlink of the cell. | +| wrap | boolean | Wraps the cell text to the next line, if the text width exceeds the column width. | +| isLocked | boolean | Specifies the cell whether it is locked or not, for allowing edit range in the spreadsheet protect option. | +| colSpan | number | Specifies the column-wise cell merge count. | +| rowSpan | number | Specifies the row-wise cell merge count. | +| style | `CellStyle` | Specifies the cell style options. | +| validation | `Validation` | Specifies the validation of the cell. | +| image | `Image[]` | Specifies the image of the cell. | + +The following table defines each property of the `CellStyle`. + +| Property | Type | Description | +|-------|-------|-------| +| fontFamily | `FontFamily` | Specifies font family of the cell. | +| verticalAlign | `VerticalAlign` | Specifies vertical align of the cell. | +| textAlign | `TextAlign` | Specifies text align style of the cell. | +| textIndent | string | Specifies text indent style of the cell. | +| color | string | Specifies font color of the cell. | +| backgroundColor | string | Specifies the background color of the cell. | +| fontWeight | `FontWeight` | Specifies font weight of the cell. | +| fontStyle | `FontStyle` | Specifies font style of the cell. | +| fontSize | string | Specifies font size of the cell. | +| textDecoration | `TextDecoration` | Specifies text decoration of the cell. | +| border | string | Specifies border of the cell. | +| borderTop | string | Specifies top border of the cell. | +| borderBottom | string | Specifies bottom border of the cell. | +| borderLeft | string | Specifies left border of the cell. | +| borderRight | string | Specifies right border of the cell. | + +```js +type FontFamily = 'Arial' | 'Arial Black' | 'Axettac Demo' | 'Batang' | 'Book Antiqua' | 'Calibri' | 'Courier' | 'Courier New' | 'Din Condensed' | 'Georgia' | 'Helvetica' | 'Helvetica New' | 'Roboto' | 'Tahoma' | 'Times New Roman' | 'Verdana'; +type VerticalAlign = 'bottom' | 'middle' | 'top'; +type TextAlign = 'left' | 'center' | 'right'; +type FontWeight = 'bold' | 'normal'; +type FontStyle = 'italic' | 'normal'; +type TextDecoration = 'underline' | 'line-through' | 'underline line-through' | 'none'; +``` + +The following table defines each property of the `Validation`. + +| Property | Type | Description | +|-------|-------|-------| +| type | `ValidationType` | Specifies Validation Type. | +| operator | `ValidationOperator` | Specifies Validation Operator. | +| value1 | string | Specifies Validation Minimum Value. | +| value2 | string | Specifies Validation Maximum Value. | +| ignoreBlank | boolean | Specifies IgnoreBlank option in Data Validation. | +| inCellDropDown | boolean | Specifies InCellDropDown option in Data Validation. | +| isHighlighted | boolean | Specifies to allow Highlight Invalid Data. | +| | | | + +```js +type ValidationType = 'WholeNumber' | 'Decimal' | 'Date' | 'TextLength' | 'List' | 'Time'; +type ValidationOperator = 'Between' | 'NotBetween' | 'EqualTo' | 'NotEqualTo' | 'LessThan' | 'GreaterThan' | 'GreaterThanOrEqualTo' | 'LessThanOrEqualTo'; +``` + +The following table defines each property of the `Image`. + +| Property | Type | Description | +|-------|-------|-------| +| src | string | Specifies the image source. | +| id | string | Specifies image element id. | +| height | number | Specifies the height of the image. | +| width | number | Specifies the width of the image. | +| top | number | Specifies the top position of the image. | +| left | number | Specifies the left position of the image. | + +The following table defines each property of the `ConditionalFormat`. + +| Property | Type | Description | +|-------|-------|-------| +| type | `HighlightCell` or `TopBottom` or `DataBar` or `ColorScale` or `IconSet` | Specifies Conditional formatting Type. | +| format | `Format` | Specifies format. | +| cFColor | `CFColor` | Specifies Conditional formatting Highlight Color. | +| value | string | Specifies Conditional formatting value. | +| range | string | Specifies Conditional formatting range. | + +```js +type HighlightCell = 'GreaterThan' | 'LessThan' | 'Between' | 'EqualTo' | 'ContainsText' | 'DateOccur' | 'Duplicate' | 'Unique'; +type TopBottom = 'Top10Items' | 'Bottom10Items' | 'Top10Percentage' | 'Bottom10Percentage' | 'BelowAverage' | 'AboveAverage'; +type DataBar = 'BlueDataBar' | 'GreenDataBar' | 'RedDataBar' | 'OrangeDataBar' | 'LightBlueDataBar' | 'PurpleDataBar'; +type ColorScale = 'GYRColorScale' | 'RYGColorScale' | 'GWRColorScale' | 'RWGColorScale' | 'BWRColorScale' | 'RWBColorScale' | 'WRColorScale' | 'RWColorScale' | 'GWColorScale' | 'WGColorScale' | 'GYColorScale' | 'YGColorScale'; +type IconSet = 'ThreeArrows' | 'ThreeArrowsGray' | 'FourArrowsGray' | 'FourArrows' | 'FiveArrowsGray' | 'FiveArrows' | 'ThreeTrafficLights1' | 'ThreeTrafficLights2' | 'ThreeSigns' | 'FourTrafficLights' | 'FourRedToBlack' | 'ThreeSymbols' | 'ThreeSymbols2' | 'ThreeFlags' | 'FourRating' | 'FiveQuarters' | 'FiveRating' | 'ThreeTriangles' | 'ThreeStars' | 'FiveBoxes'; +type CFColor = 'RedFT' | 'YellowFT' | 'GreenFT' | 'RedF' | 'RedT'; +``` + +The following table defines each property of the `Format`. + +| Property | Type | Description | +|-------|-------|-------| +| format | string | Specifies the number format code to display the value in specified number format. | +| style | `CellStyle` | Specifies the cell style options. | + +The following table defines each property of the `DefinedName`. + +| Property | Type | Description | +|-------|-------|-------| +| name | string | Specifies a name for the defined name, which can be used in the formula. | +| scope | string | Specifies scope for the defined name. | +| comment | string | Specifies comment for the defined name. | +| refersTo | string | Specifies reference for the defined name. | + +In the following demo, the JSON structure is passed to the `openFromJson` method to render the spreadsheet in the [`created`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Created) event. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/OpenController.cs %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md new file mode 100644 index 000000000..e16ca8919 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to/create-a-object-structure.md @@ -0,0 +1,187 @@ +--- +layout: post +title: Create a object structure in Angular Spreadsheet | Syncfusion +description: Learn here all about Create a object structure in Syncfusion Angular Spreadsheet Component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Create a object structure +documentation: ug +--- + +# Create an object structure in Angular Spreadsheet Component + +This topic guides you to construct a JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openfromjson) method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#properties) of the spreadsheet as value. + +```js +{ Workbook: {} } +``` + +The following properties are the root level properties of the `Workbook` object. + +| Property | Type | Description | +|-------|-------|-------| +| activeSheetIndex | number | Specifies active sheet index in the workbook. | +| sheets | `Sheet[]` | Contains a list of sheet properties. | +| definedNames | `DefineName[]` | Specifies the name for a range and uses it in the formula for calculation. | + +The following table defines each property of the `Sheet`. + +| Property | Type | Description | +|-------|-------|-------| +| name | string | Specifies the name of the sheet. | +| selectedRange | string | Specifies selected range in the sheet. | +| activeCell | string | Specifies active cell within `selectedRange` in the sheet. | +| topLeftCell | string | Specified cell will be positioned at the upper-left corner of the sheet. | +| showHeaders | boolean | Specifies to show or hide column and row headers in the sheet. | +| showGridLines | boolean | Specifies to show or hide gridlines in the sheet. | +| isProtected | boolean | Specifies to protect the cells in the sheet. | +| state | [`SheetState`](../worksheet#sheet-visibility) | Specifies the sheet visibility state. There must be at least one visible sheet in Spreadsheet. | +| columns | `Column[]` | Contains a list of column properties | +| rows | `Row[]` | Contains a list of row properties | +| protectSettings | [`ProtectSettings`](../protect-sheet#protect-sheet) | Configures protect and its options. | +| conditionalFormats | `ConditionalFormat[]` | Specifies the conditional formatting for the sheet. | + +The following table defines each property of the `Column`. + +| Property | Type | Description | +|-------|-------|-------| +| width | number | Specifies the width of the column. | +| customWidth | boolean | Specifies custom width of the column. | +| hidden | boolean | To hide or show the column in the sheet. | + +The following table defines each property of the `Row`. + +| Property | Type | Description | +|-------|-------|-------| +| height | number | Specifies the height of the row. | +| customHeight | boolean | Specifies the custom height of the row. | +| hidden | boolean | To hide or show the row in the sheet. | +| cells | `Cell[]` | Contains a list of cell properties | + +The following table defines each property of the `Cell`. + +| Property | Type | Description | +|-------|-------|-------| +| value | string | Defines the value of the cell which can be text or number. | +| formula | string | Defines the formula or expression of the cell. | +| format | string | Specifies the number format code to display the value in specified number format. | +| hyperlink | string | Specifies the hyperlink of the cell. | +| wrap | boolean | Wraps the cell text to the next line, if the text width exceeds the column width. | +| isLocked | boolean | Specifies the cell whether it is locked or not, for allowing edit range in the spreadsheet protect option. | +| colSpan | number | Specifies the column-wise cell merge count. | +| rowSpan | number | Specifies the row-wise cell merge count. | +| style | `CellStyle` | Specifies the cell style options. | +| validation | `Validation` | Specifies the validation of the cell. | +| image | `Image[]` | Specifies the image of the cell. | + +The following table defines each property of the `CellStyle`. + +| Property | Type | Description | +|-------|-------|-------| +| fontFamily | `FontFamily` | Specifies font family of the cell. | +| verticalAlign | `VerticalAlign` | Specifies vertical align of the cell. | +| textAlign | `TextAlign` | Specifies text align style of the cell. | +| textIndent | string | Specifies text indent style of the cell. | +| color | string | Specifies font color of the cell. | +| backgroundColor | string | Specifies the background color of the cell. | +| fontWeight | `FontWeight` | Specifies font weight of the cell. | +| fontStyle | `FontStyle` | Specifies font style of the cell. | +| fontSize | string | Specifies font size of the cell. | +| textDecoration | `TextDecoration` | Specifies text decoration of the cell. | +| border | string | Specifies border of the cell. | +| borderTop | string | Specifies top border of the cell. | +| borderBottom | string | Specifies bottom border of the cell. | +| borderLeft | string | Specifies left border of the cell. | +| borderRight | string | Specifies right border of the cell. | + +```js +type FontFamily = 'Arial' | 'Arial Black' | 'Axettac Demo' | 'Batang' | 'Book Antiqua' | 'Calibri' | 'Courier' | 'Courier New' | 'Din Condensed' | 'Georgia' | 'Helvetica' | 'Helvetica New' | 'Roboto' | 'Tahoma' | 'Times New Roman' | 'Verdana'; +type VerticalAlign = 'bottom' | 'middle' | 'top'; +type TextAlign = 'left' | 'center' | 'right'; +type FontWeight = 'bold' | 'normal'; +type FontStyle = 'italic' | 'normal'; +type TextDecoration = 'underline' | 'line-through' | 'underline line-through' | 'none'; +``` + +The following table defines each property of the `Validation`. + +| Property | Type | Description | +|-------|-------|-------| +| type | `ValidationType` | Specifies Validation Type. | +| operator | `ValidationOperator` | Specifies Validation Operator. | +| value1 | string | Specifies Validation Minimum Value. | +| value2 | string | Specifies Validation Maximum Value. | +| ignoreBlank | boolean | Specifies IgnoreBlank option in Data Validation. | +| inCellDropDown | boolean | Specifies InCellDropDown option in Data Validation. | +| isHighlighted | boolean | Specifies to allow Highlight Invalid Data. | +| | | | + +```js +type ValidationType = 'WholeNumber' | 'Decimal' | 'Date' | 'TextLength' | 'List' | 'Time'; +type ValidationOperator = 'Between' | 'NotBetween' | 'EqualTo' | 'NotEqualTo' | 'LessThan' | 'GreaterThan' | 'GreaterThanOrEqualTo' | 'LessThanOrEqualTo'; +``` + +The following table defines each property of the `Image`. + +| Property | Type | Description | +|-------|-------|-------| +| src | string | Specifies the image source. | +| id | string | Specifies image element id. | +| height | number | Specifies the height of the image. | +| width | number | Specifies the width of the image. | +| top | number | Specifies the top position of the image. | +| left | number | Specifies the left position of the image. | + +The following table defines each property of the `ConditionalFormat`. + +| Property | Type | Description | +|-------|-------|-------| +| type | `HighlightCell` or `TopBottom` or `DataBar` or `ColorScale` or `IconSet` | Specifies Conditional formatting Type. | +| format | `Format` | Specifies format. | +| cFColor | `CFColor` | Specifies Conditional formatting Highlight Color. | +| value | string | Specifies Conditional formatting value. | +| range | string | Specifies Conditional formatting range. | + +```js +type HighlightCell = 'GreaterThan' | 'LessThan' | 'Between' | 'EqualTo' | 'ContainsText' | 'DateOccur' | 'Duplicate' | 'Unique'; +type TopBottom = 'Top10Items' | 'Bottom10Items' | 'Top10Percentage' | 'Bottom10Percentage' | 'BelowAverage' | 'AboveAverage'; +type DataBar = 'BlueDataBar' | 'GreenDataBar' | 'RedDataBar' | 'OrangeDataBar' | 'LightBlueDataBar' | 'PurpleDataBar'; +type ColorScale = 'GYRColorScale' | 'RYGColorScale' | 'GWRColorScale' | 'RWGColorScale' | 'BWRColorScale' | 'RWBColorScale' | 'WRColorScale' | 'RWColorScale' | 'GWColorScale' | 'WGColorScale' | 'GYColorScale' | 'YGColorScale'; +type IconSet = 'ThreeArrows' | 'ThreeArrowsGray' | 'FourArrowsGray' | 'FourArrows' | 'FiveArrowsGray' | 'FiveArrows' | 'ThreeTrafficLights1' | 'ThreeTrafficLights2' | 'ThreeSigns' | 'FourTrafficLights' | 'FourRedToBlack' | 'ThreeSymbols' | 'ThreeSymbols2' | 'ThreeFlags' | 'FourRating' | 'FiveQuarters' | 'FiveRating' | 'ThreeTriangles' | 'ThreeStars' | 'FiveBoxes'; +type CFColor = 'RedFT' | 'YellowFT' | 'GreenFT' | 'RedF' | 'RedT'; +``` + +The following table defines each property of the `Format`. + +| Property | Type | Description | +|-------|-------|-------| +| format | string | Specifies the number format code to display the value in specified number format. | +| style | `CellStyle` | Specifies the cell style options. | + +The following table defines each property of the `DefinedName`. + +| Property | Type | Description | +|-------|-------|-------| +| name | string | Specifies a name for the defined name, which can be used in the formula. | +| scope | string | Specifies scope for the defined name. | +| comment | string | Specifies comment for the defined name. | +| refersTo | string | Specifies reference for the defined name. | + +In the following demo, the JSON structure is passed to the [`openFromJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openfromjson) method to render the spreadsheet in the [`created`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#created) event. + +{% tabs %} + +{% highlight ts tabtitle="app.component.ts" %} +{% include code-snippet/spreadsheet/angular/json-structure-cs1/src/app.component.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="datasource.ts" %} +{% include code-snippet/spreadsheet/angular/json-structure-cs1/src/datasource.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/json-structure-cs1/src/main.ts %} +{% endhighlight %} + +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/json-structure-cs1" %} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/angular.json new file mode 100644 index 000000000..e29b83432 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/angular.json @@ -0,0 +1,93 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "index": "index.html", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "my-app:build:production" + }, + "development": { + "buildTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ] + } + } + } + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/index.html new file mode 100644 index 000000000..ace26b00a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/index.html @@ -0,0 +1,13 @@ + + + + + MyApp + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/app.component.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/app.component.ts new file mode 100644 index 000000000..0dde6bd99 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/app.component.ts @@ -0,0 +1,24 @@ +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; +import { jsonData } from './datasource'; + +@Component({ + imports: [ + + SpreadsheetAllModule + ], + + + standalone: true, + selector: 'app-container', + template: ` ` +}) +export class AppComponent { + public data?: object[]; + @ViewChild('spreadsheet') public spreadsheetObj!: SpreadsheetComponent; + + created() { + this.spreadsheetObj.openFromJson({ file: jsonData }); + } +}; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/datasource.ts new file mode 100644 index 000000000..eb843a1d1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/datasource.ts @@ -0,0 +1,475 @@ +/** + * json structure + */ +export let jsonData: Object = { + "Workbook": { + "definedNames": [], + "sheets": [ + { + "columns": [ + { + "width": 100 + }, + { + "width": 158 + }, + { + "width": 72 + }, + { + "width": 113 + }, + { + "width": 113 + }, + { + "width": 77 + }, + { + "width": 97 + }, + { + "width": 73 + } + ], + "conditionalFormats": [ + { + "type": "GYRColorScale", + "range": "C3:C10" + }, + { + "type": "LessThan", + "cFColor": "RedF", + "range": "G3:G10", + "value": "43707," + }, + { + "type": "BlueDataBar", + "range": "D3:D10" + }, + { + "type": "GreenDataBar", + "range": "E3:E10" + }, + { + "type": "Top10Items", + "format": { + "style": { + "backgroundColor": "#009999", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "Bottom10Items", + "format": { + "style": { + "backgroundColor": "#C68D53", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "ThreeStars", + "range": "H3:H10" + } + ], + "name": "Inventory List", + "rows": [ + { + "cells": [ + { + "colSpan": 8, + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + }, + "value": "Inventory List" + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + } + ], + "height": 30 + }, + { + "cells": [ + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Code" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Name" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Quantity" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Purchase Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Selling Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Profit" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Last Updated" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Rating" + } + ] + }, + { + "cells": [ + { + "value": "AG940Z" + }, + { + "value": "Laser Printer" + }, + { + "value": "144" + }, + { + "format": "$#,##0.00", + "value": "169.5" + }, + { + "format": "$#,##0.00", + "value": "172" + }, + { + "format": "$#,##0.00", + "formula": "=E3-D3" + }, + { + "format": "mm-dd-yyyy", + "value": "43610" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BJ120K" + }, + { + "value": "Scientific Calculator" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "21.8" + }, + { + "format": "$#,##0.00", + "value": "23" + }, + { + "format": "$#,##0.00", + "formula": "=E4-D4" + }, + { + "format": "mm-dd-yyyy", + "value": "43674" + }, + { + "value": "4" + } + ] + }, + { + "cells": [ + { + "value": "BC120M" + }, + { + "value": "Wired Keyboard" + }, + { + "value": "438" + }, + { + "format": "$#,##0.00", + "value": "26.8" + }, + { + "format": "$#,##0.00", + "value": "29" + }, + { + "format": "$#,##0.00", + "formula": "=E5-D5" + }, + { + "format": "mm-dd-yyyy", + "value": "43920" + }, + { + "value": "4.25" + } + ] + }, + { + "cells": [ + { + "value": "BS121L" + }, + { + "value": "Memory Card" + }, + { + "value": "486" + }, + { + "format": "$#,##0.00", + "value": "23.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E6-D6" + }, + { + "format": "mm-dd-yyyy", + "value": "43697" + }, + { + "value": "3.5" + } + ] + }, + { + "cells": [ + { + "value": "BU121K" + }, + { + "value": "Coffee Maker" + }, + { + "value": "176" + }, + { + "format": "$#,##0.00", + "value": "56.5" + }, + { + "format": "$#,##0.00", + "value": "59" + }, + { + "format": "$#,##0.00", + "formula": "=E7-D7" + }, + { + "format": "mm-dd-yyyy", + "value": "43863" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BD121M" + }, + { + "value": "Table Lamp" + }, + { + "value": "0" + }, + { + "format": "$#,##0.00", + "value": "22.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E8-D8" + }, + { + "format": "mm-dd-yyyy", + "value": "43780" + }, + { + "value": "5" + } + ] + }, + { + "cells": [ + { + "value": "AT992X" + }, + { + "value": "Document Scanner" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "175" + }, + { + "format": "$#,##0.00", + "value": "177" + }, + { + "format": "$#,##0.00", + "formula": "=E9-D9" + }, + { + "format": "mm-dd-yyyy", + "value": "43568" + }, + { + "value": "4.75" + } + ] + }, + { + "cells": [ + { + "value": "AP992Z" + }, + { + "value": "Gaming Headset" + }, + { + "value": "58" + }, + { + "format": "$#,##0.00", + "value": "32" + }, + { + "format": "$#,##0.00", + "value": "35" + }, + { + "format": "$#,##0.00", + "formula": "=E10-D10" + }, + { + "format": "mm-dd-yyyy", + "value": "43875" + }, + { + "value": "4.4" + } + ] + } + ], + "selectedRange": "A1:H1" + } + ] + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/main.ts new file mode 100644 index 000000000..290fe7e02 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/main.ts @@ -0,0 +1,5 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; +import 'zone.js'; +bootstrapApplication(AppComponent) + .catch((err) => console.error(err)); diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/styles.css new file mode 100644 index 000000000..ddf5b115a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/src/styles.css @@ -0,0 +1,11 @@ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-cs1/tsconfig.json new file mode 100644 index 000000000..9fa16d633 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure-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/json-structure/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json new file mode 100644 index 000000000..e29b83432 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json @@ -0,0 +1,93 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "index": "index.html", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "my-app:build:production" + }, + "development": { + "buildTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ] + } + } + } + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html new file mode 100644 index 000000000..ace26b00a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html @@ -0,0 +1,13 @@ + + + + + MyApp + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts new file mode 100644 index 000000000..0dde6bd99 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts @@ -0,0 +1,24 @@ +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; +import { jsonData } from './datasource'; + +@Component({ + imports: [ + + SpreadsheetAllModule + ], + + + standalone: true, + selector: 'app-container', + template: ` ` +}) +export class AppComponent { + public data?: object[]; + @ViewChild('spreadsheet') public spreadsheetObj!: SpreadsheetComponent; + + created() { + this.spreadsheetObj.openFromJson({ file: jsonData }); + } +}; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts new file mode 100644 index 000000000..eb843a1d1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts @@ -0,0 +1,475 @@ +/** + * json structure + */ +export let jsonData: Object = { + "Workbook": { + "definedNames": [], + "sheets": [ + { + "columns": [ + { + "width": 100 + }, + { + "width": 158 + }, + { + "width": 72 + }, + { + "width": 113 + }, + { + "width": 113 + }, + { + "width": 77 + }, + { + "width": 97 + }, + { + "width": 73 + } + ], + "conditionalFormats": [ + { + "type": "GYRColorScale", + "range": "C3:C10" + }, + { + "type": "LessThan", + "cFColor": "RedF", + "range": "G3:G10", + "value": "43707," + }, + { + "type": "BlueDataBar", + "range": "D3:D10" + }, + { + "type": "GreenDataBar", + "range": "E3:E10" + }, + { + "type": "Top10Items", + "format": { + "style": { + "backgroundColor": "#009999", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "Bottom10Items", + "format": { + "style": { + "backgroundColor": "#C68D53", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "ThreeStars", + "range": "H3:H10" + } + ], + "name": "Inventory List", + "rows": [ + { + "cells": [ + { + "colSpan": 8, + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + }, + "value": "Inventory List" + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + } + ], + "height": 30 + }, + { + "cells": [ + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Code" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Name" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Quantity" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Purchase Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Selling Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Profit" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Last Updated" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Rating" + } + ] + }, + { + "cells": [ + { + "value": "AG940Z" + }, + { + "value": "Laser Printer" + }, + { + "value": "144" + }, + { + "format": "$#,##0.00", + "value": "169.5" + }, + { + "format": "$#,##0.00", + "value": "172" + }, + { + "format": "$#,##0.00", + "formula": "=E3-D3" + }, + { + "format": "mm-dd-yyyy", + "value": "43610" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BJ120K" + }, + { + "value": "Scientific Calculator" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "21.8" + }, + { + "format": "$#,##0.00", + "value": "23" + }, + { + "format": "$#,##0.00", + "formula": "=E4-D4" + }, + { + "format": "mm-dd-yyyy", + "value": "43674" + }, + { + "value": "4" + } + ] + }, + { + "cells": [ + { + "value": "BC120M" + }, + { + "value": "Wired Keyboard" + }, + { + "value": "438" + }, + { + "format": "$#,##0.00", + "value": "26.8" + }, + { + "format": "$#,##0.00", + "value": "29" + }, + { + "format": "$#,##0.00", + "formula": "=E5-D5" + }, + { + "format": "mm-dd-yyyy", + "value": "43920" + }, + { + "value": "4.25" + } + ] + }, + { + "cells": [ + { + "value": "BS121L" + }, + { + "value": "Memory Card" + }, + { + "value": "486" + }, + { + "format": "$#,##0.00", + "value": "23.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E6-D6" + }, + { + "format": "mm-dd-yyyy", + "value": "43697" + }, + { + "value": "3.5" + } + ] + }, + { + "cells": [ + { + "value": "BU121K" + }, + { + "value": "Coffee Maker" + }, + { + "value": "176" + }, + { + "format": "$#,##0.00", + "value": "56.5" + }, + { + "format": "$#,##0.00", + "value": "59" + }, + { + "format": "$#,##0.00", + "formula": "=E7-D7" + }, + { + "format": "mm-dd-yyyy", + "value": "43863" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BD121M" + }, + { + "value": "Table Lamp" + }, + { + "value": "0" + }, + { + "format": "$#,##0.00", + "value": "22.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E8-D8" + }, + { + "format": "mm-dd-yyyy", + "value": "43780" + }, + { + "value": "5" + } + ] + }, + { + "cells": [ + { + "value": "AT992X" + }, + { + "value": "Document Scanner" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "175" + }, + { + "format": "$#,##0.00", + "value": "177" + }, + { + "format": "$#,##0.00", + "formula": "=E9-D9" + }, + { + "format": "mm-dd-yyyy", + "value": "43568" + }, + { + "value": "4.75" + } + ] + }, + { + "cells": [ + { + "value": "AP992Z" + }, + { + "value": "Gaming Headset" + }, + { + "value": "58" + }, + { + "format": "$#,##0.00", + "value": "32" + }, + { + "format": "$#,##0.00", + "value": "35" + }, + { + "format": "$#,##0.00", + "formula": "=E10-D10" + }, + { + "format": "mm-dd-yyyy", + "value": "43875" + }, + { + "value": "4.4" + } + ] + } + ], + "selectedRange": "A1:H1" + } + ] + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts new file mode 100644 index 000000000..290fe7e02 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts @@ -0,0 +1,5 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; +import 'zone.js'; +bootstrapApplication(AppComponent) + .catch((err) => console.error(err)); diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css new file mode 100644 index 000000000..ddf5b115a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css @@ -0,0 +1,11 @@ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json new file mode 100644 index 000000000..9fa16d633 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/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/asp-net-core/create-obj-structure/OpenController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/OpenController.cs new file mode 100644 index 000000000..df49829f1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/OpenController.cs @@ -0,0 +1,11 @@ +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); +} + +public IActionResult Save(SaveSettings saveSettings) +{ + return Workbook.Save(saveSettings); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/razor new file mode 100644 index 000000000..f7689682b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/razor @@ -0,0 +1,485 @@ +@using Syncfusion.EJ2 + +@Html.EJS().Spreadsheet("spreadsheet").Created("created").Render() + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/tagHelper new file mode 100644 index 000000000..5b36da189 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/create-obj-structure/tagHelper @@ -0,0 +1,486 @@ +
    + + +
    + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/OpenController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/OpenController.cs new file mode 100644 index 000000000..df49829f1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/OpenController.cs @@ -0,0 +1,11 @@ +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); +} + +public IActionResult Save(SaveSettings saveSettings) +{ + return Workbook.Save(saveSettings); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/razor new file mode 100644 index 000000000..f7689682b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/razor @@ -0,0 +1,485 @@ +@using Syncfusion.EJ2 + +@Html.EJS().Spreadsheet("spreadsheet").Created("created").Render() + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/tagHelper new file mode 100644 index 000000000..5b36da189 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/json-structure-cs1/tagHelper @@ -0,0 +1,486 @@ +
    + + +
    + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/OpenController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/OpenController.cs new file mode 100644 index 000000000..6e849df91 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/OpenController.cs @@ -0,0 +1,9 @@ +public ActionResult Open(OpenRequest openRequest) +{ + return Content(Workbook.Open(openRequest)); +} + +public void Save(SaveSettings saveSettings) +{ + Workbook.Save(saveSettings); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/razor new file mode 100644 index 000000000..f7689682b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/razor @@ -0,0 +1,485 @@ +@using Syncfusion.EJ2 + +@Html.EJS().Spreadsheet("spreadsheet").Created("created").Render() + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/tagHelper new file mode 100644 index 000000000..5b36da189 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/create-obj-structure/tagHelper @@ -0,0 +1,486 @@ +
    + + +
    + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/OpenController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/OpenController.cs new file mode 100644 index 000000000..6e849df91 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/OpenController.cs @@ -0,0 +1,9 @@ +public ActionResult Open(OpenRequest openRequest) +{ + return Content(Workbook.Open(openRequest)); +} + +public void Save(SaveSettings saveSettings) +{ + Workbook.Save(saveSettings); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/razor new file mode 100644 index 000000000..f7689682b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/razor @@ -0,0 +1,485 @@ +@using Syncfusion.EJ2 + +@Html.EJS().Spreadsheet("spreadsheet").Created("created").Render() + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/tagHelper new file mode 100644 index 000000000..5b36da189 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/json-structure-cs1/tagHelper @@ -0,0 +1,486 @@ +
    + + +
    + + \ No newline at end of file From b2cb6e0b488ed8118805820e6931fa1d871b7fe8 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 13 Nov 2025 11:10:05 +0530 Subject: [PATCH 2/3] 986040: Need to include "Create Object Structure" section in Angular Spreadsheet UG documentation --- .../ASP-NET-CORE/how-to/create-a-object-structure.md | 2 +- .../Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md index 27bcbd4b4..a5256c6ed 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md @@ -1,6 +1,6 @@ --- layout: post -title: Create an object structure in ASP.NET Core Spreadsheet Control | Syncfusion +title: Create an object structure in ASP.NET Core Spreadsheet | Syncfusion description: Learn here all about how to create an object structure in ASP.NET Core Spreadsheet Control of Syncfusion Essential JS 2 and more. platform: document-processing control: Create a object structure diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md index 5fe79dca7..be6d41eb5 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/how-to/create-a-object-structure.md @@ -1,6 +1,6 @@ --- layout: post -title: Create an object structure in ASP.NET MVC Spreadsheet Control | Syncfusion +title: Create an object structure in ASP.NET MVC Spreadsheet | Syncfusion description: Learn here all about how to create an object structure in ASP.NET MVC Spreadsheet Control of Syncfusion Essential JS 2 and more. platform: document-processing control: Create a object structure From b742e6133c4ff0b894578ce2a74e8c94f3c8f89e Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 13 Nov 2025 11:19:41 +0530 Subject: [PATCH 3/3] 986040: Need to include "Create Object Structure" section in Angular Spreadsheet UG documentation --- .../angular/json-structure/angular.json | 93 ---- .../angular/json-structure/index.html | 13 - .../json-structure/src/app.component.ts | 24 - .../angular/json-structure/src/datasource.ts | 475 ------------------ .../angular/json-structure/src/main.ts | 5 - .../angular/json-structure/src/styles.css | 11 - .../angular/json-structure/tsconfig.json | 32 -- 7 files changed, 653 deletions(-) delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css delete mode 100644 Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json deleted file mode 100644 index e29b83432..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/angular.json +++ /dev/null @@ -1,93 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "my-app": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular/build:application", - "options": { - "index": "index.html", - "browser": "src/main.ts", - "polyfills": [ - "zone.js" - ], - "tsConfig": "tsconfig.json", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.css" - ] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kB", - "maximumError": "1MB" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "4kB", - "maximumError": "8kB" - } - ], - "outputHashing": "all" - }, - "development": { - "optimization": false, - "extractLicenses": false, - "sourceMap": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular/build:dev-server", - "configurations": { - "production": { - "buildTarget": "my-app:build:production" - }, - "development": { - "buildTarget": "my-app:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n" - }, - "test": { - "builder": "@angular/build:karma", - "options": { - "polyfills": [ - "zone.js", - "zone.js/testing" - ], - "tsConfig": "tsconfig.json", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.css" - ] - } - } - } - } - } -} diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html deleted file mode 100644 index ace26b00a..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - MyApp - - - - - - - - diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts deleted file mode 100644 index 0dde6bd99..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/app.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' -import { Component, ViewChild } from '@angular/core'; -import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; -import { jsonData } from './datasource'; - -@Component({ - imports: [ - - SpreadsheetAllModule - ], - - - standalone: true, - selector: 'app-container', - template: ` ` -}) -export class AppComponent { - public data?: object[]; - @ViewChild('spreadsheet') public spreadsheetObj!: SpreadsheetComponent; - - created() { - this.spreadsheetObj.openFromJson({ file: jsonData }); - } -}; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts deleted file mode 100644 index eb843a1d1..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/datasource.ts +++ /dev/null @@ -1,475 +0,0 @@ -/** - * json structure - */ -export let jsonData: Object = { - "Workbook": { - "definedNames": [], - "sheets": [ - { - "columns": [ - { - "width": 100 - }, - { - "width": 158 - }, - { - "width": 72 - }, - { - "width": 113 - }, - { - "width": 113 - }, - { - "width": 77 - }, - { - "width": 97 - }, - { - "width": 73 - } - ], - "conditionalFormats": [ - { - "type": "GYRColorScale", - "range": "C3:C10" - }, - { - "type": "LessThan", - "cFColor": "RedF", - "range": "G3:G10", - "value": "43707," - }, - { - "type": "BlueDataBar", - "range": "D3:D10" - }, - { - "type": "GreenDataBar", - "range": "E3:E10" - }, - { - "type": "Top10Items", - "format": { - "style": { - "backgroundColor": "#009999", - "fontWeight": "Bold" - } - }, - "range": "F3:F10", - "value": "1," - }, - { - "type": "Bottom10Items", - "format": { - "style": { - "backgroundColor": "#C68D53", - "fontWeight": "Bold" - } - }, - "range": "F3:F10", - "value": "1," - }, - { - "type": "ThreeStars", - "range": "H3:H10" - } - ], - "name": "Inventory List", - "rows": [ - { - "cells": [ - { - "colSpan": 8, - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - }, - "value": "Inventory List" - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - } - ], - "height": 30 - }, - { - "cells": [ - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Item Code" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Item Name" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Quantity" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Purchase Price" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Selling Price" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Profit" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Last Updated" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Rating" - } - ] - }, - { - "cells": [ - { - "value": "AG940Z" - }, - { - "value": "Laser Printer" - }, - { - "value": "144" - }, - { - "format": "$#,##0.00", - "value": "169.5" - }, - { - "format": "$#,##0.00", - "value": "172" - }, - { - "format": "$#,##0.00", - "formula": "=E3-D3" - }, - { - "format": "mm-dd-yyyy", - "value": "43610" - }, - { - "value": "4.5" - } - ] - }, - { - "cells": [ - { - "value": "BJ120K" - }, - { - "value": "Scientific Calculator" - }, - { - "value": "116" - }, - { - "format": "$#,##0.00", - "value": "21.8" - }, - { - "format": "$#,##0.00", - "value": "23" - }, - { - "format": "$#,##0.00", - "formula": "=E4-D4" - }, - { - "format": "mm-dd-yyyy", - "value": "43674" - }, - { - "value": "4" - } - ] - }, - { - "cells": [ - { - "value": "BC120M" - }, - { - "value": "Wired Keyboard" - }, - { - "value": "438" - }, - { - "format": "$#,##0.00", - "value": "26.8" - }, - { - "format": "$#,##0.00", - "value": "29" - }, - { - "format": "$#,##0.00", - "formula": "=E5-D5" - }, - { - "format": "mm-dd-yyyy", - "value": "43920" - }, - { - "value": "4.25" - } - ] - }, - { - "cells": [ - { - "value": "BS121L" - }, - { - "value": "Memory Card" - }, - { - "value": "486" - }, - { - "format": "$#,##0.00", - "value": "23.5" - }, - { - "format": "$#,##0.00", - "value": "25" - }, - { - "format": "$#,##0.00", - "formula": "=E6-D6" - }, - { - "format": "mm-dd-yyyy", - "value": "43697" - }, - { - "value": "3.5" - } - ] - }, - { - "cells": [ - { - "value": "BU121K" - }, - { - "value": "Coffee Maker" - }, - { - "value": "176" - }, - { - "format": "$#,##0.00", - "value": "56.5" - }, - { - "format": "$#,##0.00", - "value": "59" - }, - { - "format": "$#,##0.00", - "formula": "=E7-D7" - }, - { - "format": "mm-dd-yyyy", - "value": "43863" - }, - { - "value": "4.5" - } - ] - }, - { - "cells": [ - { - "value": "BD121M" - }, - { - "value": "Table Lamp" - }, - { - "value": "0" - }, - { - "format": "$#,##0.00", - "value": "22.5" - }, - { - "format": "$#,##0.00", - "value": "25" - }, - { - "format": "$#,##0.00", - "formula": "=E8-D8" - }, - { - "format": "mm-dd-yyyy", - "value": "43780" - }, - { - "value": "5" - } - ] - }, - { - "cells": [ - { - "value": "AT992X" - }, - { - "value": "Document Scanner" - }, - { - "value": "116" - }, - { - "format": "$#,##0.00", - "value": "175" - }, - { - "format": "$#,##0.00", - "value": "177" - }, - { - "format": "$#,##0.00", - "formula": "=E9-D9" - }, - { - "format": "mm-dd-yyyy", - "value": "43568" - }, - { - "value": "4.75" - } - ] - }, - { - "cells": [ - { - "value": "AP992Z" - }, - { - "value": "Gaming Headset" - }, - { - "value": "58" - }, - { - "format": "$#,##0.00", - "value": "32" - }, - { - "format": "$#,##0.00", - "value": "35" - }, - { - "format": "$#,##0.00", - "formula": "=E10-D10" - }, - { - "format": "mm-dd-yyyy", - "value": "43875" - }, - { - "value": "4.4" - } - ] - } - ], - "selectedRange": "A1:H1" - } - ] - } -} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts deleted file mode 100644 index 290fe7e02..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; -import 'zone.js'; -bootstrapApplication(AppComponent) - .catch((err) => console.error(err)); diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css deleted file mode 100644 index ddf5b115a..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/src/styles.css +++ /dev/null @@ -1,11 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json deleted file mode 100644 index 9fa16d633..000000000 --- a/Document-Processing/code-snippet/spreadsheet/angular/json-structure/tsconfig.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "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