Skip to content

Commit c54a74c

Browse files
author
bhuvaneshdhakshinmaoorthy
committed
993171: Added all files
1 parent e258d0a commit c54a74c

98 files changed

Lines changed: 6496 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Document-Processing/code-snippet/spreadsheet/angular/accessibility/src/app.ts‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet'
4+
5+
import { Component, ViewChild } from '@angular/core';
6+
import { SpreadsheetComponent, ChartModel, getFormatFromType } from '@syncfusion/ej2-angular-spreadsheet';
7+
import { inventoryData, cartData, stockData } from './datasource';
8+
9+
@Component({
10+
imports: [
11+
12+
SpreadsheetModule
13+
],
14+
15+
16+
standalone: true,
17+
selector: 'app-container',
18+
template: `<div class="control-section">
19+
<ejs-spreadsheet #spreadsheet openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open" saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save" (created)="created()">
20+
<e-sheets>
21+
<e-sheet name="Inventory List" selectedRange="A2:A2">
22+
<e-ranges>
23+
<e-range [dataSource]="inventoryData" startCell="A2"></e-range>
24+
</e-ranges>
25+
<e-columns>
26+
<e-column [width]=100></e-column>
27+
<e-column [width]=158></e-column>
28+
<e-column [width]=100></e-column>
29+
<e-column [width]=110></e-column>
30+
<e-column [width]=130></e-column>
31+
<e-column [width]=130></e-column>
32+
<e-column [width]=97></e-column>
33+
<e-column [width]=80></e-column>
34+
</e-columns>
35+
<e-rows>
36+
<e-row [height]=56>
37+
<e-cells>
38+
<e-cell value="Inventory List"></e-cell>
39+
</e-cells>
40+
</e-row>
41+
<e-row [index]="0">
42+
<e-cells>
43+
<e-cell [index]="9" [chart]="chart"></e-cell>
44+
</e-cells>
45+
</e-row>
46+
<e-row [index]="13" [height]=36>
47+
<e-cells>
48+
<e-cell [index]="3" value="Total Amount:"></e-cell>
49+
<e-cell formula="=ROUND(SUM(E3:E13),1)"></e-cell>
50+
</e-cells>
51+
</e-row>
52+
</e-rows>
53+
</e-sheet>
54+
<e-sheet name="Shopping Cart" selectedRange="A3:A3">
55+
<e-ranges>
56+
<e-range [dataSource]="cartData" startCell="A3"></e-range>
57+
</e-ranges>
58+
<e-columns>
59+
<e-column [width]=150></e-column>
60+
<e-column [width]=150></e-column>
61+
<e-column [width]=150></e-column>
62+
<e-column [width]=80></e-column>
63+
<e-column [width]=100></e-column>
64+
<e-column [width]=100></e-column>
65+
</e-columns>
66+
<e-rows>
67+
<e-row>
68+
<e-cells>
69+
<e-cell value="Shopping Cart" [style]="{
70+
fontSize: '20pt', fontWeight: 'bold', fontFamily: 'Comic Sans MS',
71+
textAlign: 'center', backgroundColor: 'rgb(53, 124, 210)', verticalAlign: 'middle', color: 'rgb(255, 255, 255)'
72+
}"></e-cell>
73+
</e-cells>
74+
</e-row>
75+
</e-rows>
76+
</e-sheet>
77+
<e-sheet name="Stock List" selectedRange="A2:A2">
78+
<e-ranges>
79+
<e-range [dataSource]="stockData" startCell="A2"></e-range>
80+
</e-ranges>
81+
<e-columns>
82+
<e-column [width]=150></e-column>
83+
<e-column [width]=150></e-column>
84+
<e-column [width]=150></e-column>
85+
<e-column [width]=150></e-column>
86+
</e-columns>
87+
<e-rows>
88+
<e-row>
89+
<e-cells>
90+
<e-cell value="Stock List" [style]="{
91+
fontSize: '15pt', fontWeight: 'bold', fontFamily: 'Comic Sans MS',
92+
textAlign: 'center', backgroundColor: 'rgb(53, 124, 210)', verticalAlign: 'middle', color: 'rgb(255, 255, 255)'
93+
}"></e-cell>
94+
</e-cells>
95+
</e-row>
96+
</e-rows>
97+
</e-sheet>
98+
</e-sheets>
99+
</ejs-spreadsheet>
100+
</div>`
101+
})
102+
103+
export class AppComponent {
104+
@ViewChild('spreadsheet')
105+
spreadsheetObj!: SpreadsheetComponent;
106+
inventoryData: object[] = inventoryData;
107+
cartData: object[] = cartData;
108+
stockData: object[] = stockData;
109+
chart: ChartModel[] = [{ type: "Column", range: "A3:F8" }]
110+
111+
created(): void {
112+
this.spreadsheetObj.merge('Inventory List!A1:I1');
113+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Inventory List!A2:H2');
114+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle', fontSize: '13pt', }, 'Inventory List!A1:H1');
115+
this.spreadsheetObj.conditionalFormat({ type: 'BlueDataBar', range: 'Inventory List!E3:E13' });
116+
this.spreadsheetObj.conditionalFormat({ type: 'GreenDataBar', range: 'Inventory List!F3:F13' });
117+
this.spreadsheetObj.conditionalFormat({ type: 'ThreeStars', range: 'Inventory List!H3:H13' });
118+
// Add Data validation to range.
119+
this.spreadsheetObj.addDataValidation({ type: 'WholeNumber', operator: 'GreaterThan', value1: '20', ignoreBlank: false, }, 'Inventory List!C4:C13');
120+
// Apply cell format
121+
this.spreadsheetObj.cellFormat({ backgroundColor: '#d8e8f1' }, 'Inventory List!A4:I4');
122+
this.spreadsheetObj.cellFormat({ backgroundColor: '#d8e8f1' }, 'Inventory List!A6:I6');
123+
this.spreadsheetObj.cellFormat({ backgroundColor: '#d8e8f1' }, 'Inventory List!A8:I8');
124+
this.spreadsheetObj.cellFormat({ backgroundColor: '#d8e8f1' }, 'Inventory List!A10:I10');
125+
this.spreadsheetObj.cellFormat({ backgroundColor: '#d8e8f1' }, 'Inventory List!A12:I12');
126+
this.spreadsheetObj.cellFormat({ color: '#004078' }, 'Inventory List!A3:I13');
127+
this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'Inventory List!A1:A13');
128+
this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'Inventory List!C1:C13');
129+
this.spreadsheetObj.cellFormat({ fontSize: '24pt', fontWeight: 'bold', textAlign: 'center', backgroundColor: '#357CD2', verticalAlign: 'middle', color: '#ffffff' }, 'Inventory List!A1:I1');
130+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor: '#A4D6FA', verticalAlign: 'middle', color: '#004078', }, 'Inventory List!A2:I2');
131+
this.spreadsheetObj.cellFormat({ backgroundColor: '#A4D6FA', textAlign: 'right', verticalAlign: 'middle', color: '#004078', fontSize: '14pt' }, 'Inventory List!A14:I14');
132+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, 'Inventory List!E14:E14');
133+
// Apply number format.
134+
this.spreadsheetObj.numberFormat(getFormatFromType('Currency'), 'Inventory List!D3:F14');
135+
// Apply merge to cell range.
136+
this.spreadsheetObj.merge('Shopping Cart!A1:F2');
137+
this.spreadsheetObj.merge('Stock List!A1:D1');
138+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor: 'rgb(164, 214, 250)', fontFamily: "Book Antiqua", color: 'rgb(0, 64, 120)' }, 'Shopping Cart!A3:F3');
139+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor: 'rgb(164, 214, 250)', fontFamily: "Book Antiqua", color: 'rgb(0, 64, 120)' }, 'Stock List!A2:D2');
140+
const rangeAddress: string[] = ['Shopping Cart!A5:F5', 'Shopping Cart!A7:F7', 'Shopping Cart!A9:f9', 'Shopping Cart!A11:F11',
141+
'Shopping Cart!A13:F13', 'Stock List!A4:D4', 'Stock List!A6:D6', 'Stock List!A8:D8', 'Stock List!A10:D10'];
142+
for (let i = 0; i < rangeAddress.length; i++) {
143+
this.spreadsheetObj.cellFormat({ backgroundColor: 'rgb(216, 232, 241)' }, rangeAddress[i]);
144+
}
145+
this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'Shopping Cart!D4:E12');
146+
this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'Stock List!B3:D12');
147+
this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, 'Shopping Cart!E13:F13');
148+
this.spreadsheetObj.setBorder({ border: '2.5px solid #FFB936' }, 'Shopping Cart!A1:F13', 'Outer');
149+
this.spreadsheetObj.setBorder({ border: '1.25px solid #FFB936' }, 'Shopping Cart!A1:F13', 'Inner');
150+
this.spreadsheetObj.setBorder({ border: '1px solid #0400FF' }, 'Stock List!A1:D11', 'Outer');
151+
this.spreadsheetObj.setBorder({ border: '1px solid #0400FF' }, 'Stock List!A1:D11', 'Inner');
152+
this.spreadsheetObj.updateCell({ value: 'Total Amount' }, "Shopping Cart!E13");
153+
this.spreadsheetObj.updateCell({ formula: '=SUM(F4:F12)' }, "Shopping Cart!F13");
154+
this.spreadsheetObj.conditionalFormat({ type: 'PurpleDataBar', range: 'Shopping Cart!E4:E12' });
155+
this.spreadsheetObj.conditionalFormat({ type: 'GreenDataBar', range: 'Stock List!D3:D11' });
156+
this.spreadsheetObj.conditionalFormat({ type: 'GYRColorScale', range: 'Stock List!C3:C11' });
157+
this.spreadsheetObj.conditionalFormat({ type: 'RWGColorScale', range: 'Shopping Cart!F4:F12' });
158+
this.spreadsheetObj.conditionalFormat({ type: 'Between', cFColor: 'RedFT', value: '10,60', range: 'Shopping Cart!D4:D12' });
159+
this.spreadsheetObj.element.focus();
160+
};
161+
}

‎Document-Processing/code-snippet/spreadsheet/angular/autofill-cs1/src/app.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
4+
5+
6+
7+
import { Component, ViewChild } from '@angular/core';
8+
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
9+
import { enableRipple } from '@syncfusion/ej2-base';
10+
import { defaultData } from './datasource';
11+
12+
enableRipple(true);
13+
14+
@Component({
15+
imports: [
16+
17+
SpreadsheetAllModule
18+
],
19+
20+
21+
standalone: true,
22+
selector: 'app-container',
23+
template: `<div>
24+
<button class='e-btn' (click)='onclick()'>Change showFillOptions</button>
25+
<ejs-spreadsheet #spreadsheet (created)="created()" >
26+
<e-sheets>
27+
<e-sheet name="Price Details">
28+
<e-ranges>
29+
<e-range [dataSource]="budgetData"></e-range>
30+
</e-ranges>
31+
<e-columns>
32+
<e-column [width]=130></e-column>
33+
<e-column [width]=100></e-column>
34+
<e-column [width]=100></e-column>
35+
</e-columns>
36+
</e-sheet>
37+
</e-sheets>
38+
</ejs-spreadsheet></div>`
39+
})
40+
export class AppComponent {
41+
@ViewChild('spreadsheet')
42+
spreadsheetObj: SpreadsheetComponent | undefined;
43+
44+
budgetData: object[] = defaultData;
45+
onclick(): void {
46+
var showFillOptions = this.spreadsheetObj!.autoFillSettings.showFillOptions;
47+
this.spreadsheetObj!.autoFillSettings.showFillOptions = !showFillOptions; //To change whether fill options need to be shown or not.
48+
}
49+
50+
created() {
51+
this.spreadsheetObj!.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
52+
this.spreadsheetObj!.autoFill('D4:D11','D2:D3', 'Down','CopyCells');
53+
this.spreadsheetObj!.autoFill('E4:E11','E2:E3','Down','FillSeries');
54+
this.spreadsheetObj!.autoFill('B4:B11','B2:B3','Down','FillFormattingOnly');
55+
this.spreadsheetObj!.autoFill('C4:C11','C2:C3','Down','FillWithoutFormatting');
56+
}
57+
}
58+
59+

‎Document-Processing/code-snippet/spreadsheet/angular/base-64-string/src/app.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet'
4+
5+
import { Component, ViewChild } from '@angular/core';
6+
import { SpreadsheetComponent, BeforeSaveEventArgs, SaveCompleteEventArgs } from '@syncfusion/ej2-angular-spreadsheet';
7+
import { data } from './datasource';
8+
9+
@Component({
10+
imports: [
11+
12+
SpreadsheetModule
13+
],
14+
15+
16+
standalone: true,
17+
selector: 'app-container',
18+
template: `<div class="control-section">
19+
<button class="e-btn custom-btn" (click)='import()'>Import Base64</button>
20+
<button class="e-btn custom-btn" (click)='export()'>Export as Base64</button>
21+
<ejs-spreadsheet #spreadsheet openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open" (beforeSave)="beforeSave($event)" (saveComplete)="saveComplete($event)">
22+
<e-sheets>
23+
<e-sheet name="Car Sales Report">
24+
<e-ranges>
25+
<e-range [dataSource]="data"></e-range>
26+
</e-ranges>
27+
<e-columns>
28+
<e-column [width]=180></e-column>
29+
<e-column [width]=130></e-column>
30+
<e-column [width]=130></e-column>
31+
<e-column [width]=180></e-column>
32+
<e-column [width]=130></e-column>
33+
<e-column [width]=120></e-column>
34+
</e-columns>
35+
</e-sheet>
36+
</e-sheets>
37+
</ejs-spreadsheet>
38+
</div>`
39+
})
40+
export class AppComponent {
41+
@ViewChild('spreadsheet')
42+
spreadsheetObj!: SpreadsheetComponent;
43+
44+
data: Object[] = data;
45+
base64String!: string | ArrayBuffer;
46+
beforeSave(args: BeforeSaveEventArgs): void {
47+
args.needBlobData = true; // To trigger the saveComplete event.
48+
args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.
49+
};
50+
saveComplete(args: SaveCompleteEventArgs): void {
51+
// Convert blob data to base64 string.
52+
let reader: FileReader = new FileReader();
53+
reader.readAsDataURL(args.blobData);
54+
55+
reader.onloadend = () => {
56+
this.base64String = reader.result ? reader.result : '';
57+
};
58+
};
59+
import(): void {
60+
fetch(this.base64String as string)
61+
.then((response) => response.blob())
62+
.then((fileBlob) => {
63+
let file: File = new File([fileBlob], 'Sample.xlsx');
64+
this.spreadsheetObj.open({ file: file });
65+
});
66+
};
67+
export(): void {
68+
this.spreadsheetObj.save({
69+
url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
70+
fileName: 'Worksheet',
71+
saveType: 'Xlsx',
72+
}); // Specifies the save URL, file name, file type need to be saved.
73+
// Logs base64 string into the console.
74+
console.log('Base64 String - ', this.base64String);
75+
}
76+
}
77+

‎Document-Processing/code-snippet/spreadsheet/angular/calculation-cs1/src/app.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
4+
import { Component, ViewChild } from '@angular/core';
5+
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
6+
import { enableRipple } from '@syncfusion/ej2-base';
7+
import { dataSource } from './datasource';
8+
9+
enableRipple(true);
10+
11+
@Component({
12+
imports: [
13+
SpreadsheetAllModule
14+
],
15+
standalone: true,
16+
selector: 'app-container',
17+
template: `<ejs-spreadsheet #spreadsheet (created)="created()" calculationMode="Automatic">
18+
<e-sheets>
19+
<e-sheet name="Product Details">
20+
<e-ranges>
21+
<e-range [dataSource]="data" startCell="A1"></e-range>
22+
</e-ranges>
23+
<e-columns>
24+
<e-column [width]=130></e-column>
25+
<e-column [width]=92></e-column>
26+
<e-column [width]=96></e-column>
27+
</e-columns>
28+
</e-sheet>
29+
</e-sheets>
30+
</ejs-spreadsheet>`
31+
})
32+
export class AppComponent {
33+
@ViewChild('spreadsheet')
34+
spreadsheetObj: SpreadsheetComponent | undefined;
35+
36+
data: object[] = dataSource;
37+
38+
created() {
39+
this.spreadsheetObj!.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
40+
}
41+
}
42+
43+

‎Document-Processing/code-snippet/spreadsheet/angular/calculation-cs2/src/app.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
4+
import { Component, ViewChild } from '@angular/core';
5+
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
6+
import { enableRipple } from '@syncfusion/ej2-base';
7+
import { dataSource } from './datasource';
8+
9+
enableRipple(true);
10+
11+
@Component({
12+
imports: [
13+
SpreadsheetAllModule
14+
],
15+
standalone: true,
16+
selector: 'app-container',
17+
template: `<ejs-spreadsheet #spreadsheet (created)="created()" calculationMode="Manual">
18+
<e-sheets>
19+
<e-sheet name="Product Details">
20+
<e-ranges>
21+
<e-range [dataSource]="data" startCell="A1"></e-range>
22+
</e-ranges>
23+
<e-columns>
24+
<e-column [width]=130></e-column>
25+
<e-column [width]=92></e-column>
26+
<e-column [width]=96></e-column>
27+
</e-columns>
28+
</e-sheet>
29+
</e-sheets>
30+
</ejs-spreadsheet>`
31+
})
32+
export class AppComponent {
33+
@ViewChild('spreadsheet')
34+
spreadsheetObj: SpreadsheetComponent | undefined;
35+
36+
data: object[] = dataSource;
37+
38+
created() {
39+
this.spreadsheetObj!.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
40+
}
41+
}
42+
43+

0 commit comments

Comments
 (0)