Skip to content

Commit f4b619c

Browse files
committed
documentation(EJ2-67661): UG document to save and load report using database.
1 parent 63b15f3 commit f4b619c

16 files changed

Lines changed: 1125 additions & 0 deletions

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.

0 commit comments

Comments
 (0)