Skip to content

Commit 82a7c7b

Browse files
Yash58vanthYash58vanth
committed
documentation(EJ2-67661): UG document to save and load report using database.
1 parent 1841324 commit 82a7c7b

9 files changed

Lines changed: 525 additions & 0 deletions

File tree

‎VUE/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 Vue 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+
* [Vue](https://vuejs.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 Vue 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 dev
29+
```

‎VUE/pivot-table/.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

‎VUE/pivot-table/.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎VUE/pivot-table/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>pivot-sample</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎VUE/pivot-table/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "pivot-sample",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "KarthickrajaMuthuRaman <karthickraja.m@syncfusion.com>",
6+
"license": "MIT",
7+
"private": true,
8+
"scripts": {
9+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11+
},
12+
"dependencies": {
13+
"@syncfusion/ej2-vue-pivotview": "^20.4.43",
14+
"vue": "^2.5.11"
15+
},
16+
"browserslist": [
17+
"> 1%",
18+
"last 2 versions",
19+
"not ie <= 8"
20+
],
21+
"devDependencies": {
22+
"babel-core": "^6.26.0",
23+
"babel-loader": "^7.1.2",
24+
"babel-preset-env": "^1.6.0",
25+
"babel-preset-stage-3": "^6.24.1",
26+
"cross-env": "^5.0.5",
27+
"css-loader": "^0.28.7",
28+
"file-loader": "^1.1.4",
29+
"vue-loader": "^13.0.5",
30+
"vue-template-compiler": "^2.4.4",
31+
"webpack": "^3.6.0",
32+
"webpack-dev-server": "^2.9.1"
33+
}
34+
}

‎VUE/pivot-table/src/App.vue‎

Lines changed: 351 additions & 0 deletions
Large diffs are not rendered by default.

‎VUE/pivot-table/src/assets/logo.png‎

6.69 KB
Loading

‎VUE/pivot-table/src/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
new Vue({
5+
el: '#app',
6+
render: h => h(App)
7+
})

‎VUE/pivot-table/webpack.config.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.css$/,
15+
use: [
16+
'vue-style-loader',
17+
'css-loader'
18+
],
19+
}, {
20+
test: /\.vue$/,
21+
loader: 'vue-loader',
22+
options: {
23+
loaders: {
24+
}
25+
// other vue-loader options go here
26+
}
27+
},
28+
{
29+
test: /\.js$/,
30+
loader: 'babel-loader',
31+
exclude: /node_modules/
32+
},
33+
{
34+
test: /\.(png|jpg|gif|svg)$/,
35+
loader: 'file-loader',
36+
options: {
37+
name: '[name].[ext]?[hash]'
38+
}
39+
}
40+
]
41+
},
42+
resolve: {
43+
alias: {
44+
'vue$': 'vue/dist/vue.esm.js'
45+
},
46+
extensions: ['*', '.js', '.vue', '.json']
47+
},
48+
devServer: {
49+
historyApiFallback: true,
50+
noInfo: true,
51+
overlay: true
52+
},
53+
performance: {
54+
hints: false
55+
},
56+
devtool: '#eval-source-map'
57+
}
58+
59+
if (process.env.NODE_ENV === 'production') {
60+
module.exports.devtool = '#source-map'
61+
// http://vue-loader.vuejs.org/en/workflow/production.html
62+
module.exports.plugins = (module.exports.plugins || []).concat([
63+
new webpack.DefinePlugin({
64+
'process.env': {
65+
NODE_ENV: '"production"'
66+
}
67+
}),
68+
new webpack.optimize.UglifyJsPlugin({
69+
sourceMap: true,
70+
compress: {
71+
warnings: false
72+
}
73+
}),
74+
new webpack.LoaderOptionsPlugin({
75+
minimize: true
76+
})
77+
])
78+
}

0 commit comments

Comments
 (0)