Skip to content

Commit 44e32f9

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 01-25-2023 7:00:09 PM
1 parent 28a6e2f commit 44e32f9

File tree

4 files changed

+172
-0
lines changed

4 files changed

+172
-0
lines changed

‎ej2-angular-toc.html

+4
Original file line numberDiff line numberDiff line change
@@ -1591,6 +1591,10 @@
15911591
<ul>
15921592
<li><a href="/ej2-angular/pivotview/getting-started">Getting Started</a></li>
15931593
<li><a href="/ej2-angular/pivotview/data-binding">Data Binding</a></li>
1594+
<li>Connecting to database
1595+
<ul>
1596+
<li><a href="/ej2-angular/pivotview/connecting-to-database/microsoft-sql-server">Microsoft SQL Server</a></li>
1597+
</ul>
15941598
<li><a href="/ej2-angular/pivotview/server-side-pivot-engine">Server Side Engine</a></li>
15951599
<li><a href="/ej2-angular/pivotview/olap">OLAP</a></li>
15961600
<li><a href="/ej2-angular/pivotview/pivot-chart">Pivot Chart</a></li>

‎ej2-angular/pivotview/connecting-to-database/microsoft-sql-server.md

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
---
2+
layout: post
3+
title: Microsoft SQL Server Data Binding in Angular Pivotview component | Syncfusion
4+
description: Learn how to bind Microsoft SQL Server Database data in the Syncfusion Angular Pivotview component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-angular
6+
control: Microsoft SQL Server Data Binding
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# SQL Server Data Binding in Angular Pivotview component
12+
13+
This section describes how to retrieve data from SQL Server database using Microsoft SqlClient and bind it to the Pivot Table via a Web API controller.
14+
15+
## Steps to connect the SQL Server database via Web API application
16+
17+
**1.** Download the ASP.NET Core Web Application from [`this`](https://github.com/SyncfusionExamples/how-to-bind-SQL-database-to-pivot-table) GitHub repository.
18+
19+
**2.** The application named as **PivotController** (server-side) that is downloaded from the above GitHub repository includes the following files.
20+
21+
* **ProductController.cs** file under **Controllers** folder – This helps to do data communication with Pivot Table.
22+
* **Database1.mdf** file under **App_Data** folder – This MDF (Master Database File) file contains example data.
23+
24+
**3.** In the Web API controller (aka, ProductController), **SqlConnection** helps to connect the SQL database (that is, Database1.mdf). Next, using **SqlCommand** and **SqlDataAdapter** you can process the desired SQL query string and retrieve data from the database. The **Fill** method of the DataAdapter is used to populate the SQL data into a **DataTable** as shown in the following code snippet.
25+
26+
```csharp
27+
using Microsoft.AspNetCore.Mvc;
28+
using System.Data;
29+
using System.Data.SqlClient;
30+
31+
namespace PivotController.Controllers
32+
{
33+
[ApiController]
34+
[Route("[controller]")]
35+
public class ProductController : ControllerBase
36+
{
37+
private static DataTable FetchSQLResult()
38+
{
39+
// Replace with your own connection string.
40+
string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
41+
+ @"\App_Data\Database1.mdf;Integrated Security=True";
42+
string xquery = "SELECT * FROM table1";
43+
SqlConnection sqlConnection = new(conSTR);
44+
sqlConnection.Open();
45+
SqlCommand cmd = new(xquery, sqlConnection);
46+
SqlDataAdapter dataAdapter = new(cmd);
47+
DataTable dataTable = new();
48+
dataAdapter.Fill(dataTable);
49+
return dataTable;
50+
}
51+
}
52+
}
53+
54+
```
55+
56+
**4.** In the **Get()** method of the **ProductController.cs** file, the **FetchSQLResult** method is used to retrieve the SQL data as a **DataTable**, which is then serialized into JSON using **JsonConvert.SerializeObject()**.
57+
58+
```csharp
59+
using Microsoft.AspNetCore.Mvc;
60+
using Newtonsoft.Json;
61+
using System.Data;
62+
using System.Data.SqlClient;
63+
64+
namespace PivotController.Controllers
65+
{
66+
[ApiController]
67+
[Route("[controller]")]
68+
public class ProductController : ControllerBase
69+
{
70+
[HttpGet(Name = "GetSQLResult")]
71+
public object Get()
72+
{
73+
return JsonConvert.SerializeObject(FetchSQLResult());
74+
}
75+
76+
private static DataTable FetchSQLResult()
77+
{
78+
string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
79+
+ @"\App_Data\Database1.mdf;Integrated Security=True";
80+
string xquery = "SELECT * FROM table1";
81+
SqlConnection sqlConnection = new(conSTR);
82+
sqlConnection.Open();
83+
SqlCommand cmd = new(xquery, sqlConnection);
84+
SqlDataAdapter dataAdapter = new(cmd);
85+
DataTable dataTable = new();
86+
dataAdapter.Fill(dataTable);
87+
return dataTable;
88+
}
89+
}
90+
}
91+
92+
```
93+
94+
**5.** Run the web application (aka, PivotController) and it will be hosted within the URL `https://localhost:7139`.
95+
96+
**6.** Finally, the retrieved data from SQL Server which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:7139/product`, as shown in the browser page below.
97+
98+
![Hosted Web API URL](images/code-web-app.png)
99+
100+
## Connecting the Pivot Table to the hosted Web API URL
101+
102+
**1.** Download the Angular Pivot Table sample from [`this`](https://github.com/SyncfusionExamples/how-to-bind-SQL-database-to-pivot-table) GitHub repository.
103+
104+
**2.** Next, map the hosted Web API's URL link `https://localhost:7139/product` to the Pivot Table component in `app.ts` by using the [`url`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/dataSourceSettings/#url) property under [`dataSourceSettings`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/dataSourceSettings/).
105+
106+
```typescript
107+
import { Component, OnInit } from '@angular/core';
108+
import { FieldListService, IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview';
109+
110+
@Component({
111+
selector: 'app-root',
112+
// specifies the template string for the pivot table component
113+
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>`,
114+
providers: [FieldListService],
115+
})
116+
export class AppComponent implements OnInit {
117+
public pivotData: IDataSet[] | undefined;
118+
public dataSourceSettings: IDataOptions | undefined;
119+
120+
ngOnInit(): void {
121+
122+
this.dataSourceSettings = {
123+
url: 'https://localhost:7139/product'
124+
//Other codes here...
125+
};
126+
}
127+
}
128+
129+
```
130+
131+
**3.** Frame and set the report based on the data retrieved from the SQL database.
132+
133+
```typescript
134+
import { Component, OnInit } from '@angular/core';
135+
import { FieldListService, IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview';
136+
137+
@Component({
138+
selector: 'app-root',
139+
// specifies the template string for the pivot table component
140+
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>`,
141+
providers: [FieldListService],
142+
})
143+
export class AppComponent implements OnInit {
144+
public pivotData: IDataSet[] | undefined;
145+
public dataSourceSettings: IDataOptions | undefined;
146+
147+
ngOnInit(): void {
148+
149+
this.dataSourceSettings = {
150+
url: 'https://localhost:7139/product',
151+
enableSorting: true,
152+
expandAll: false,
153+
columns: [{ name: 'Product' }],
154+
values: [{ name: 'Quantity' }, { name: 'Amount', caption: 'Sold Amount' }],
155+
rows: [{ name: 'Country' }, { name: 'State' }],
156+
formatSettings: [{ name: 'Amount', format: 'C0' }],
157+
filters: []
158+
};
159+
}
160+
}
161+
162+
```
163+
164+
**4.** Run the sample to get the following result.
165+
166+
![PivotTable bound with SQL database](images/sql-data-binding.png)
167+
168+
> The sample for connecting the Pivot Table to a SQL Server database via an ASP.NET Web application can be found in [`this`](https://github.com/SyncfusionExamples/how-to-bind-SQL-database-to-pivot-table) GitHub repository.

‎ej2-angular/pivotview/images/code-web-app.png

113 KB
Loading

‎ej2-angular/pivotview/images/sql-data-binding.png

33.4 KB
Loading

0 commit comments

Comments
 (0)