Skip to content

Commit 1daf562

Browse files
ManiRam94ManiRam94
authored
Merge pull request #3 from Yash58vanth/master
documentation(EJ2-67661): UG document to save and load report using database.
2 parents e7962ab + 1841324 commit 1daf562

19 files changed

Lines changed: 648 additions & 3 deletions

File tree

‎Angular/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# How to save and load reports from a SQL Server Database to a Pivot Table
2+
3+
A quick start project that shows how to save and load reports from a SQL Server database and load them into the Syncfusion Pivot Table at run time. This repository includes a ASP.NET Core Web App Controller ([MyWebService](../MyWebService/)) for saving and loading reports from a SQL server database, as well as a quick start samples in the Angular platform that displays the loaded report in a Syncfusion Pivot Table.
4+
5+
## Project prerequisites
6+
7+
Before beginning work on the server and client projects, ensure the following software to be installed in the machine.
8+
9+
* [git](https://git-scm.com/downloads)
10+
* [Node.js](https://nodejs.org/en/)
11+
* [Angular](https://angularjs.org/)
12+
* [Visual Studio Code](https://code.visualstudio.com/)
13+
* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/ ) and [.NET Core SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or later installed on your machine.
14+
15+
## How to run this application?
16+
17+
* To run this application, clone the [Save-and-load-report-from-SQL-database-to-pivot-table](https://github.com/SyncfusionExamples/Save-and-load-report-from-SQL-database-to-pivot-table) repository and then open **MyWebService** in Visual Studio 2022. Simply build and run your project in IIS Express, and it will host and display the URL `https://localhost:44313`.
18+
19+
* Now open Angular sample in Visual Studio Code and and install the necessary npm packages using the following command.
20+
21+
```sh
22+
npm install
23+
```
24+
25+
* Initialize the Pivot Table, create a pivot report based on the given data source, map the hosted url to perform save and load reports with the SQL database, and finally run your project with the following command.
26+
27+
```sh
28+
npm run start
29+
```

‎Angular/pivot-table/.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎Angular/pivot-table/angular.json‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"pivot-sample": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/pivot-sample",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
"src/favicon.ico",
25+
"src/assets"
26+
],
27+
"styles": [
28+
"src/styles.css"
29+
],
30+
"scripts": []
31+
},
32+
"configurations": {
33+
"production": {
34+
"budgets": [
35+
{
36+
"type": "initial",
37+
"maximumWarning": "500kb",
38+
"maximumError": "1mb"
39+
},
40+
{
41+
"type": "anyComponentStyle",
42+
"maximumWarning": "2kb",
43+
"maximumError": "4kb"
44+
}
45+
],
46+
"outputHashing": "all"
47+
},
48+
"development": {
49+
"buildOptimizer": false,
50+
"optimization": false,
51+
"vendorChunk": true,
52+
"extractLicenses": false,
53+
"sourceMap": true,
54+
"namedChunks": true
55+
}
56+
},
57+
"defaultConfiguration": "production"
58+
},
59+
"serve": {
60+
"builder": "@angular-devkit/build-angular:dev-server",
61+
"configurations": {
62+
"production": {
63+
"browserTarget": "pivot-sample:build:production"
64+
},
65+
"development": {
66+
"browserTarget": "pivot-sample:build:development"
67+
}
68+
},
69+
"defaultConfiguration": "development"
70+
},
71+
"extract-i18n": {
72+
"builder": "@angular-devkit/build-angular:extract-i18n",
73+
"options": {
74+
"browserTarget": "pivot-sample:build"
75+
}
76+
},
77+
"test": {
78+
"builder": "@angular-devkit/build-angular:karma",
79+
"options": {
80+
"polyfills": [
81+
"zone.js",
82+
"zone.js/testing"
83+
],
84+
"tsConfig": "tsconfig.spec.json",
85+
"assets": [
86+
"src/favicon.ico",
87+
"src/assets"
88+
],
89+
"styles": [
90+
"src/styles.css"
91+
],
92+
"scripts": []
93+
}
94+
}
95+
}
96+
}
97+
},
98+
"cli": {
99+
"analytics": "ad0cffc8-ea88-4e4e-95a2-c8eaac6d59bc"
100+
}
101+
}

‎Angular/pivot-table/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "pivot-sample",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^15.1.0",
14+
"@angular/common": "^15.1.0",
15+
"@angular/compiler": "^15.1.0",
16+
"@angular/core": "^15.1.0",
17+
"@angular/forms": "^15.1.0",
18+
"@angular/platform-browser": "^15.1.0",
19+
"@angular/platform-browser-dynamic": "^15.1.0",
20+
"@angular/router": "^15.1.0",
21+
"@syncfusion/ej2-angular-pivotview": "^20.4.43-ngcc",
22+
"rxjs": "~7.8.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.12.0"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^15.1.1",
28+
"@angular/cli": "~15.1.1",
29+
"@angular/compiler-cli": "^15.1.0",
30+
"@types/jasmine": "~4.3.0",
31+
"jasmine-core": "~4.5.0",
32+
"karma": "~6.4.0",
33+
"karma-chrome-launcher": "~3.1.0",
34+
"karma-coverage": "~2.2.0",
35+
"karma-jasmine": "~5.1.0",
36+
"karma-jasmine-html-reporter": "~2.0.0",
37+
"typescript": "~4.9.4"
38+
}
39+
}

‎Angular/pivot-table/src/app/app.component.css‎

Whitespace-only changes.

‎Angular/pivot-table/src/app/app.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div>
2+
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowExcelExport='true'
3+
allowConditionalFormatting='true' allowNumberFormatting='true' allowPdfExport='true' showToolbar='true' allowCalculatedField='true'
4+
showFieldList='true' width='700' [chartSettings]='chartSettings' [displayOption]='displayOption'
5+
[gridSettings]='gridSettings' [toolbar]='toolbarOptions' (saveReport)='saveReport($event)'
6+
(loadReport)='loadReport($event)' (fetchReport)='fetchReport($event)' (renameReport)='renameReport($event)'
7+
(removeReport)='removeReport($event)' (newReport)='newReport()' (toolbarRender)='beforeToolbarRender($event)'>
8+
</ejs-pivotview>
9+
</div>

‎Angular/pivot-table/src/app/app.component.spec.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
declarations: [
8+
AppComponent
9+
],
10+
}).compileComponents();
11+
});
12+
13+
it('should create the app', () => {
14+
const fixture = TestBed.createComponent(AppComponent);
15+
const app = fixture.componentInstance;
16+
expect(app).toBeTruthy();
17+
});
18+
19+
it(`should have as title 'pivot-sample'`, () => {
20+
const fixture = TestBed.createComponent(AppComponent);
21+
const app = fixture.componentInstance;
22+
expect(app.title).toEqual('pivot-sample');
23+
});
24+
25+
it('should render title', () => {
26+
const fixture = TestBed.createComponent(AppComponent);
27+
fixture.detectChanges();
28+
const compiled = fixture.nativeElement as HTMLElement;
29+
expect(compiled.querySelector('.content span')?.textContent).toContain('pivot-sample app is running!');
30+
});
31+
});

0 commit comments

Comments
 (0)