Microsoft SQL server in EJ2 TypeScript Pivotview control

4 Jul 20237 minutes to read

This section describes how to retrieve data from Microsoft SQL Server using Microsoft SqlClient and bind it to the Pivot Table via a Web API controller.

Create a Web API service to fetch SQL Server data

1. Open Visual Studio and create an ASP.NET Core Web App project type, naming it MyWebService. To create an ASP.NET Core Web application, follow the document link.

2. To connect a SQL Server using the SqlClient in our application, we need to install the System.Data.SqlClient NuGet package. To do so, open the NuGet package manager of the project solution, search for the package System.Data.SqlClient and install it.

3. Create a Web API controller (aka, PivotController.cs) file under Controllers folder that helps to establish data communication with the Pivot Table.

4. In the Web API controller (aka, PivotController), 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.

    using Microsoft.AspNetCore.Mvc;
    using System.Data;
    using System.Data.SqlClient;

    namespace MyWebService.Controllers
    {
        [ApiController]
        [Route("[controller]")]
        public class PivotController : ControllerBase
        {
            private static DataTable FetchSQLResult()
            {
                // Replace with your own connection string.
                string conSTR = @"<Enter your valid connection string here>";
                SqlConnection sqlConnection = new(conSTR);
                sqlConnection.Open();
                SqlCommand cmd = new(xquery, sqlConnection);
                SqlDataAdapter dataAdapter = new(cmd);
                DataTable dataTable = new();
                dataAdapter.Fill(dataTable);
                return dataTable;
            }
        }
    }

5. In the Get() method of the PivotController.cs file, the FetchSQLResult method is used to retrieve the SQL data as a DataTable, which is then serialized into JSON using JsonConvert.SerializeObject().

    using Microsoft.AspNetCore.Mvc;
    using Newtonsoft.Json;
    using System.Data;
    using System.Data.SqlClient;

    namespace MyWebService.Controllers
    {
        [ApiController]
        [Route("[controller]")]
        public class PivotController : ControllerBase
        {
            [HttpGet(Name = "GetSQLResult")]
            public object Get()
            {
                return JsonConvert.SerializeObject(FetchSQLResult());
            }

            private static DataTable FetchSQLResult()
            {
                string conSTR = @"<Enter your valid connection string here>";
                string xquery = "SELECT * FROM table1";
                SqlConnection sqlConnection = new(conSTR);
                sqlConnection.Open();
                SqlCommand cmd = new(xquery, sqlConnection);
                SqlDataAdapter dataAdapter = new(cmd);
                DataTable dataTable = new();
                dataAdapter.Fill(dataTable);
                return dataTable;
            }
        }
    }

6. Run the web application and it will be hosted within the URL https://localhost:44393.

7. 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:44393/Pivot, as shown in the browser page below.

Connecting the Pivot Table to a SQL database using the Web API service

1. Create a simple Typescript Pivot Table by following the “Getting Started” documentation link.

2. Map the hosted Web API’s URL link https://localhost:44393/Pivot to the Pivot Table in app.ts by using the url property under dataSourceSettings.

import { PivotView, FieldList } from '@syncfusion/ej2-pivotview';

PivotView.Inject(FieldList);
let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        url: 'https://localhost:44393/Pivot',
        //Other codes here...
    }
});
pivotObj.appendTo('#PivotView1');

3. Frame and set the report based on the data retrieved from the SQL database.

import { PivotView, FieldList } from '@syncfusion/ej2-pivotview';

PivotView.Inject(FieldList);
let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        url: 'https://localhost:44393/Pivot',
        enableSorting: true,
        columns: [{ name: 'Product' }],
        valueSortSettings: { headerDelimiter: ' - ' },
        values: [{ name: 'Quantity', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'State' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        expandAll: false,
        filters: []
    },
    showFieldList: true,
    width: '100%',
    height: 290,
    gridSettings: { columnWidth: 140 }
});
pivotObj.appendTo('#PivotView1');

When you run the sample, the resulting pivot table will look like this:

Explore our Typescript Pivot Table sample and ASP.NET Core Web Application to extract data from a SQL database and bind to the Pivot Table in this GitHub repository.